/* =========================================
   Homepage Core Styles
   ========================================= */

/* --- Variables & Tokens --- */
:root {
    --acme-primary: #0056b3;
    --acme-secondary: #00a8cc;
    --acme-dark: #0f172a;
    --acme-light: #f8fafc;
    --acme-glass-bg: rgba(255, 255, 255, 0.1);
    --acme-glass-border: rgba(255, 255, 255, 0.2);
    --acme-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);

    /* Fluid Typography Scale */
    --fs-hero: clamp(2rem, 1.5rem + 2vw, 3rem);
    --fs-h1: clamp(2rem, 1.6rem + 2vw, 3rem);
    --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    --fs-small: clamp(0.875rem, 0.8rem + 0.2vw, 0.95rem);

    /* Fluid Spacing Scale */
    --section-padding-fluid: clamp(40px, 6vw, 100px);
    --grid-gap-fluid: clamp(16px, 2.5vw, 32px);
    --component-gap-fluid: clamp(12px, 2vw, 24px);
    --header-margin-fluid: clamp(32px, 5vw, 60px);
}

/* --- Utilities --- */
.acme-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.acme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.acme-btn-primary {
    background: var(--acme-primary);
    color: white;
}

.acme-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.4);
    color: white;
}

.acme-btn-secondary {
    background: white;
    color: var(--acme-primary);
    border: 2px solid var(--acme-primary);
}

.acme-btn-secondary:hover {
    background: var(--acme-primary);
    color: white;
}

/* --- SECTION 1: HERO --- */
/* --- SECTION 1: HERO --- */
.acme-hero {
    position: relative;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;

    /* Safer Breakout for Android/Mobile */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;

    color: white;
    overflow-x: hidden;
    /* Strict containment */
    box-sizing: border-box;
    z-index: 1;
}

/* New Hero Background Image Support */
.acme-hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.acme-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Optional Overlay if needed later */
.acme-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    /* Subtle default overlay */
    z-index: 1;
}

@media (max-width: 992px) {
    .acme-hero {
        width: 100%;
        left: 0;
        margin-left: 0;
        margin-right: 0;
        right: 0;
    }
}

/* Overlay removed by user request */
.acme-hero::before {
    content: none;
}

/* Ensure content is above overlay */
.acme-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    /* Ensure max-width is explicit here if not global */
    margin: 0 auto;
}

.acme-hero-content {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 40px;
    align-items: center;
    text-align: left;
    min-height: 80vh;
    /* Allow vertical spacing */
}

/* Hero Text */
.acme-hero-text {
    align-self: center;
    padding: 20px 0;
    /* Add padding for safety */
}

.acme-hero-headline {
    font-size: var(--fs-hero);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
    color: #ffffff !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

.acme-highlight {
    color: #7dd3fc;
    background: linear-gradient(to right, #7dd3fc, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.acme-hero-subheadline {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: var(--component-gap-fluid);
    max-width: 90%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    /* Added for visibility */
}

.acme-hero-stats-line {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.acme-hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.acme-hero-actions .acme-btn {
    min-width: 200px;
}

.acme-hero-actions .acme-btn-primary {
    background: #004db3;
    color: white;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Mobile button size reduction */
@media (max-width: 576px) {
    .acme-hero-actions .acme-btn-primary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

.acme-hero-actions .acme-btn-primary:hover {
    background: #003d8f;
    transform: translateY(-1px);
}

.acme-hero-actions .acme-btn-secondary {
    background: #ffffff;
    color: #003d8f;
    /* Darker blue for WCAG AA contrast */
    border: none;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Mobile button size reduction */
@media (max-width: 576px) {
    .acme-hero-actions .acme-btn-secondary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

.acme-hero-actions .acme-btn-secondary:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: translateY(-1px);
}

/* Hero USPs */
.acme-hero-usps {
    margin-top: 20px;
    width: 100%;
}

/* Mobile: Move USPs above testimonial card */
@media (max-width: 992px) {
    .acme-hero-usps {
        order: 2;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

.acme-hero-usps ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.acme-hero-usps li {
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Desktop Icon & Text Styling */
.acme-hero-usps .acme-usp-icon {
    margin-right: 6px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.acme-hero-usps .acme-usp-icon svg {
    width: 100%;
    height: 100%;
}

/* Remove Desktop Separator, since we have icons now */
.acme-hero-usps li:not(:last-child):after {
    display: none;
}

/* Add spacing between items on desktop since separator is gone */
.acme-hero-usps li {
    margin-right: 10px;
    /* Gap handled by flex gap usually, but just in case */
}

/* Mobile/Tablet Adjustments within existing media queries logic, 
   but added here for locality, overriding desktop defaults via media query */
@media (max-width: 992px) {
    .acme-hero-usps ul {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        /* Left align for mobile/tablet */
    }

    /* Hide the specific HTML icon on mobile to keep the Green Checkmark design */
    .acme-hero-usps .acme-usp-icon {
        display: none !important;
    }

    .acme-hero-usps li {
        justify-content: flex-start;
        /* Left align content */
        width: 100%;
        position: relative;
        text-align: left;
        margin-right: 0;
    }

    /* Green Checkmark */
    /* Green Checkmark */
    .acme-hero-usps li:before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
        transform: translateY(2px);
    }
}

/* Hero Stats Grid (Glassmorphic) */
.acme-hero-stats-grid {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.acme-hero-stat-item {
    background: rgba(15, 23, 42, 0.85);
    /* Solid fallback for performance/accessibility */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.acme-hero-stat-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
}

.acme-hero-stat-item .stat-num {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.acme-hero-stat-item .stat-label {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
}

/* Hero Visual - Testimonial Card Overlay */
.acme-hero-visual {
    position: relative;
    height: 100%;
    /* Grid cell container */
}

.acme-hero-testimonial-card {
    background: rgba(15, 23, 42, 0.9);
    /* Darker solid fallback */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    color: white;
    width: 100%;
    max-width: 420px;
    /* Fixed width */
    min-height: 240px;
    /* Compact fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Position fixed by user request */
    position: absolute;
    top: auto;
    bottom: 40px;
    right: 40px;
    left: auto;
    transform: none;
    z-index: 10;
}

@media (max-width: 992px) {
    .acme-hero-testimonial-card {
        position: relative;
        bottom: 0;
        right: 0;
        margin: 20px auto 0;
        width: 100%;
        max-width: 500px;
        min-height: auto;
        padding: 30px;
    }
}

/* Glow effect refinement */
.acme-hero-testimonial-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Glow effect like image */
.acme-hero-testimonial-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(45deg, transparent 40%, rgba(56, 189, 248, 0.3) 100%);
    z-index: -1;
    pointer-events: none;
}

.acme-quote-icon {
    font-family: serif;
    font-size: clamp(3rem, 2.5rem + 2vw, 4rem);
    line-height: 0.5;
    color: #94a3b8;
    display: block;
    margin-bottom: 5px;
    opacity: 0.3;
}

.acme-testi-quote {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 12px;
    font-style: normal;
    color: #f8fafc;
    font-weight: normal;
}

.acme-testi-author {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acme-testi-author strong {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    margin-bottom: 0;
}

.acme-testi-author span {
    font-size: 0.9rem;
    color: #94a3b8;
}

.acme-testi-stats {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 12px;
    gap: 10px;
}

.acme-mini-stat {
    display: flex;
    flex-direction: column;
}

.acme-mini-stat .val {
    font-weight: 700;
    font-size: 1.1em;
    color: white;
}

.acme-mini-stat .lbl {
    font-size: 0.75em;
    color: #94a3b8;
    line-height: 1.2;
}

/* Card Positioning Fix for Large Screens */
/* Use viewport units so the card scales and moves with the background image cover */
@media (min-width: 993px) {

    .acme-hero .acme-container,
    .acme-hero .acme-hero-visual {
        position: static;
    }

    .acme-hero-testimonial-card {
        top: auto;
        bottom: 40px;
        right: 12%;
        left: auto;
        transform: none;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .acme-hero {
        min-height: 100vh;
        padding-top: 40px;
        /* Custom spacing to match design mockups */
        padding-bottom: 40px;
    }

    .acme-hero .acme-container {
        width: 100vw;
    }

    .acme-hero-content {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 30px;
        min-height: calc(100vh - 80px);
        justify-content: space-between;
    }

    .acme-hero-text {
        display: flex;
        flex-direction: column;
    }

    .acme-hero-actions {
        order: 1;
    }

    .acme-hero-testimonial-card {
        margin: 20px auto 0;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 380px;
        transform: none;
        padding: 20px;
        order: 3;
    }

    .acme-hero-actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .acme-hero-bottom-stat {
        justify-content: center;
    }

    .acme-hero-stats-line,
    .acme-hero-stats-grid {
        justify-content: center;
    }

    .acme-hero-headline {
        font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
        padding-top: 50px;
    }

    .acme-hero-subheadline {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 576px) {
    .acme-hero {
        padding: 50px 20px 40px;
    }

    .acme-hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .acme-hero-actions .acme-btn {
        width: 100%;
        min-width: auto;
    }

    .acme-hero-stats-grid {
        gap: 12px;
    }

    .acme-hero-stat-item {
        min-width: 120px;
        padding: 12px 18px;
    }

    .acme-bento-grid-hero {
        grid-template-columns: 1fr;
    }
}

/* --- SECTION 2: TRUST BADGES CAROUSEL --- */
.acme-trust-section {
    padding: 35px 0;
    background: #001f3f;
    /* Very dark navy blue - almost black */
    text-align: center;
    overflow: hidden;
    position: relative;
}

.acme-trust-section .acme-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.acme-trust-heading {
    font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.1rem);
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 30px 0;
    text-align: left;
    width: 100%;
}

.acme-trust-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.acme-trust-carousel {
    display: flex;
    gap: 60px;
    animation: scroll-infinite 30s linear infinite;
    width: max-content;
}

@keyframes scroll-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move by half (since we duplicate items) */
    }
}

/* Pause on hover */
.acme-trust-carousel:hover {
    animation-play-state: paused;
}

.acme-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 60px;
    flex-shrink: 0;
}

/* SVG Badge Styling */
.acme-trust-svg {
    max-width: 120px;
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acme-trust-svg svg {
    width: 100px;
    height: 50px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.acme-trust-item:hover .acme-trust-svg svg {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Image Logo Styling (for uploaded logos) */
.acme-trust-item img {
    max-height: 50px;
    max-width: 150px;
    filter: brightness(0) invert(1) opacity(0.7);
    /* White color effect */
    transition: all 0.3s ease;
    object-fit: contain;
}

.acme-trust-item:hover img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

/* Text Fallback */
.acme-trust-text {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.1rem);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.acme-trust-item:hover .acme-trust-text {
    color: rgba(255, 255, 255, 1);
}

/* Responsive */
@media (max-width: 768px) {
    .acme-trust-section {
        padding: 30px 0;
    }

    .acme-trust-carousel {
        gap: 35px;
        animation-duration: 22s;
    }

    .acme-trust-item {
        min-width: 80px !important;
        width: auto !important;
        height: 45px;
    }

    .acme-trust-svg svg {
        max-width: 80px;
        max-height: 35px;
    }

    .acme-trust-item img {
        max-height: 35px;
        max-width: 100px;
    }
}

@media (max-width: 576px) {
    .acme-trust-section {
        padding: 25px 0;
    }

    .acme-trust-heading {
        font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
        margin-bottom: 20px;
    }

    .acme-trust-carousel {
        gap: 25px;
        animation-duration: 18s;
    }

    .acme-trust-item {
        min-width: 60px !important;
        width: auto !important;
        height: 35px;
    }

    .acme-trust-svg svg {
        max-width: 60px;
        max-height: 30px;
    }

    .acme-trust-item img {
        max-height: 30px;
        max-width: 75px;
    }
}


/* --- SECTION 3: POPULAR COURSES --- */
.acme-courses-section {
    padding: var(--section-padding-fluid) 0;
    background: white;
    min-height: 600px;
    /* Prevent collapse if no courses */
}

/* Ensure vertical stacking */
.acme-courses-section .acme-container {
    display: flex;
    flex-direction: column !important;
}

.acme-section-header {
    display: flex;
    justify-content: space-between;
    /* Heading Left, Link Right */
    align-items: center;
    margin-bottom: var(--header-margin-fluid);
    /* Reduced from 50px for tighter feel */
    gap: 30px;
    /* Space between Heading and Link */
    width: 100%;
}



.acme-heading-xl {
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--acme-dark);
    margin: 0;
}

.acme-btn-link {
    color: var(--acme-primary);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s;
}

.acme-btn-link:hover {
    gap: 10px;
}

.acme-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--grid-gap-fluid);
    grid-auto-flow: dense;
}

.acme-course-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    overflow: hidden;
    /* Phase 3: Modern, Diffused Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.acme-course-card:hover {
    transform: translateY(-5px);
    /* Phase 3: Deeper, softer hover shadow */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
}

/* 
   Structure:
   Row 1: 2 Columns (Span 3 each) -> Items 1, 2
   Row 2: 3 Columns (Span 2 each) -> Items 3, 4, 5
   Row 3: 2 Columns (Span 3 each) -> Items 6, 7
*/

/* Grid spans removed for robustness */

/* Card Content Styling */
.acme-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.acme-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f1f5f9;
    overflow: hidden;
}

.acme-card-feat-1 .acme-card-image {
    padding-top: 60%;
}

.acme-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.acme-course-card:hover .acme-card-image img {
    transform: scale(1.05);
}

.acme-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.acme-card-title {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.acme-card-feat-1 .acme-card-title {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
}

.acme-card-excerpt {
    color: #64748b;
    font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
    line-height: 1.4;
    margin-bottom: 15px;
}

.acme-card-instructor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
    margin-bottom: 5px;
}

.acme-instructor-name {
    font-weight: 700;
    color: #334155;
}

.acme-student-count-text {
    color: #64748b;
}

.acme-card-rating-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
    font-weight: 700;
    color: #b4690e;
}

.acme-stars {
    display: flex;
    gap: 1px;
}

.acme-stars .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #eab308;
}

.acme-review-count {
    font-weight: 400;
    color: #64748b;
    margin-left: 2px;
}

.acme-card-level {
    font-size: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
    color: #64748b;
    margin-bottom: 15px;
}

.acme-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: auto;
}

.acme-price-sale {
    /* Phase 3: Balanced Typography */
    font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
    /* Slightly reduced max size for better balance */
    font-weight: 700;
    color: var(--acme-dark);
}

.acme-price-regular {
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    /* Reduced for hierarchy */
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 400;
}

.acme-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    color: var(--acme-primary);
    font-weight: 600;
}

.acme-arrow-icon {
    font-size: 1.2em;
    transition: transform 0.2s;
}

.acme-course-card:hover .acme-arrow-icon {
    transform: translateX(5px);
}

/* Responsive Grid */
@media (max-width: 768px) {
    .acme-courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Spans removed */
}

@media (max-width: 576px) {
    .acme-courses-grid {
        grid-template-columns: 1fr !important;
    }

    /* Spans removed */

    .acme-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        text-align: left;
    }
}

/* --- SECTION 3.5: WHO WE ARE --- */
.acme-whoweare-section {
    padding: var(--section-padding-fluid) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.acme-whoweare-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(0, 86, 179, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.acme-whoweare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.acme-whoweare-content {
    padding-right: 20px;
}

.acme-whoweare-content .acme-heading-xl {
    margin-bottom: var(--component-gap-fluid);
    position: relative;
}

/* Decorative line under heading */
.acme-whoweare-content .acme-heading-xl::after {
    content: none;
}

.acme-whoweare-text {
    font-size: var(--fs-body);
    line-height: 1.8;
    color: #475569;
    margin-bottom: 32px;
}

.acme-whoweare-text p {
    margin-bottom: 16px;
}

.acme-whoweare-text p:last-child {
    margin-bottom: 0;
}

.acme-whoweare-content .acme-btn {
    margin-top: 8px;
}

.acme-whoweare-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.acme-whoweare-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.2);
}

.acme-whoweare-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* Decorative corner accent */
.acme-whoweare-image::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.1), transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 992px) {
    .acme-whoweare-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .acme-whoweare-content {
        padding-right: 0;
        text-align: center;
    }

    .acme-whoweare-content .acme-heading-xl::after {
        margin-left: auto;
        margin-right: auto;
    }

    .acme-whoweare-image {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .acme-whoweare-section {
        padding: 60px 0;
    }

    .acme-whoweare-grid {
        gap: 30px;
    }

    .acme-whoweare-text {
        font-size: 0.95rem;
    }

    .acme-whoweare-image img {
        aspect-ratio: 1/1;
    }
}

/* --- SECTION 4: VALUE PROPOSITIONS (BENTO) --- */
.acme-values-section {
    padding: var(--section-padding-fluid) 0;
    background: white;
}

.acme-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--grid-gap-fluid);
}

.acme-value-card {
    background: var(--acme-dark);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.acme-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Bento Variations */
.acme-value-tall {
    grid-row: span 2;
    background: linear-gradient(135deg, var(--acme-dark) 0%, #1e293b 100%);
}

.acme-value-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.acme-value-icon {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
    width: 60px;
    height: 60px;
    background: var(--acme-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Ensure no margin bottom when in wide card row layout, but keep standard otherwise */
    flex-shrink: 0;
}

/* Specific fix for wide card layout icon spacing handled via flex gap, remove margin */
.acme-value-wide .acme-value-icon {
    margin-bottom: 0;
}

.acme-value-icon .dashicons {
    /* Dashicons have font-size: 20px by default, override */
    font-size: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Reset line-height */
}

.acme-value-title {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    font-weight: 700;
    margin: 0 0 10px 0;
    color: white !important;
}

.acme-value-text {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

/* --- SECTION 5: STATS COUNTER --- */
.acme-stats-section {
    padding: var(--section-padding-fluid) 0;
    background: var(--acme-dark);
    color: white;
    position: relative;
    overflow: hidden;
}

/* optional bg pattern */
.acme-stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(0, 168, 204, 0.1) 0%, transparent 25%);
    pointer-events: none;
}

.acme-stats-wrapper {
    display: flex;
    justify-content: space-between;
    /* Changed from center to space-between for full width */
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    /* Reduced gap slightly to fit 4 items better */
    width: 100%;
    /* Ensure it takes full container width */
}

.acme-stat-widget {
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: none;
    /* Remove max-width constraint to allow filling space */
    padding: 30px 10px;
    /* Reduce side padding to allow more text space */
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background 0.3s ease;

    /* Ensure content is centered vertically in equal-height cards */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.acme-stat-widget:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.acme-stat-number {
    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 2rem);
    /* Reduced even more as requested */
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(to bottom, #d6d3d1 20%, #94a3b8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    /* Maintain visibility fallback */
    color: white;
}

/* Ensure Safari/others handle the fill color gracefully or use solid color if gradient fails */
@supports not (background-clip: text) {
    .acme-stat-number {
        background: none;
        color: #f1f5f9;
        -webkit-text-fill-color: initial;
    }
}

.acme-stat-label {
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    color: #cbd5e1;
    /* Lighter than #94a3b8 for better contrast against dark bg */
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    /* Force text to stay on one line */
}

/* Responsive */
@media (max-width: 992px) {
    .acme-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .acme-value-tall {
        grid-row: auto;
    }

    .acme-value-wide {
        grid-column: span 2;
    }
}

@media (max-width: 576px) {
    .acme-values-grid {
        grid-template-columns: 1fr;
    }

    .acme-value-wide {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .acme-stats-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .acme-stat-widget {
        width: 100%;
    }
}

/* Stat Star Sizing */
.acme-stat-star {
    font-size: 0.7em;
    /* Makes the star smaller relative to the number */
    vertical-align: middle;
    margin-left: 2px;
}

/* --- SECTION 3.6: WHY CHOOSE US --- */
.acme-whychooseus-section {
    padding: var(--section-padding-fluid) 0;
    background: #f8fafc;
    /* Light background for contrast */
}

/* Force vertical stacking to move header to Top */
.acme-whychooseus-section .acme-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.acme-whychooseus-header {
    text-align: left;
    margin-bottom: var(--header-margin-fluid);
}

.acme-whychooseus-header .acme-heading-xl {
    position: relative;
    display: inline-block;
    /* width constraint removed to unstack text */
    text-align: left;
}

.acme-whychooseus-header .acme-heading-xl::after {
    content: none;
}

.acme-whychooseus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap-fluid);
    /* min-height removed to allow natural content height */
}

.acme-whychooseus-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content vertically if needed */
}



.acme-whychooseus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--acme-primary);
}

.acme-whychooseus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(0, 86, 179, 0.1);
    /* Primary color with opacity */
    color: var(--acme-primary);
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 28px;
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    /* Prevent icon shrinking */
}

.acme-whychooseus-card:hover .acme-whychooseus-icon {
    background: var(--acme-primary);
    color: #ffffff;
}

.acme-whychooseus-icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.acme-whychooseus-heading {
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
    font-weight: 700;
    color: var(--acme-dark);
    margin: 0 0 12px 0;
}

.acme-whychooseus-desc {
    font-size: clamp(0.9rem, 0.85rem + 0.1vw, 1rem);
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
    /* Allow description to take space */
}

/* Responsive */
@media (max-width: 992px) {

    /* Carousel - Horizontal Scroll Snap for Mobile & Tablet */
    .acme-whychooseus-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        grid-template-columns: none;
        /* Override grid */

        /* Layout Breakout Logic - Robust (Matching 16px Mobile Padding) */
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;

        /* Padding for aesthetics - bottom padding for shadow visibility */
        padding: 0 16px 30px 16px;

        /* Flexible height to avoid CLS gaps */
        min-height: auto;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .acme-whychooseus-grid::-webkit-scrollbar {
        display: none;
    }

    .acme-whychooseus-card {
        flex: 0 0 45%;
        /* Tablet: Show ~2 cards + peek */
        max-width: 400px;
        scroll-snap-align: center;
        padding: 30px 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        margin: 5px 0;
        min-height: 250px;
    }
}

@media (max-width: 576px) {
    .acme-whychooseus-card {
        flex: 0 0 85%;
        /* Mobile: Show 1 card + peek */
        max-width: 340px;
    }
}

/* --- SECTION 7: SUCCESS STORIES (NEW GRID DESIGN) --- */
.acme-success-section {
    padding: var(--section-padding-fluid) 0;
    background: #f8fafc;
    /* Changed from #ffffff to light gray for alternating pattern */
}

.acme-success-section .acme-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.acme-success-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    text-align: center;
    margin: 0 auto 60px auto;
    letter-spacing: normal;
    width: 100%;
    display: inline-block;
    background-image: linear-gradient(to right, #0f172a 20%, #3b82f6 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.acme-success-title .acme-brand {
    color: var(--acme-primary);
}

.acme-success-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-fluid);
}

/* Hide clones on Desktop to preserve Grid layout */
@media (min-width: 993px) {
    .acme-success-card.acme-clone {
        display: none !important;
    }
}

/* Modern Card Design Update */
.acme-success-card {
    background: #FFFFFF;
    border: none;
    border-top: 4px solid transparent;
    /* Prepare for gradient or solid color */
    border-radius: 16px;
    /* Smooth corners */
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy premium feel */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    /* Tailwind-like shadow */
}

/* Featured card gets the brand color header immediately */
.acme-success-card.is-featured {
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hover Effect: Lift & Accent */
/* Hover Effect: Lift & Accent */
.acme-success-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Decorative Background Quote Icon */
.acme-success-card::before {
    content: '“';
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 140px;
    line-height: 1;
    font-family: serif;
    color: var(--acme-primary);
    opacity: 0.1;
    /* Increased from 0.04 */
    pointer-events: none;
    transition: transform 0.4s ease;
}

.acme-success-card:hover::before {
    transform: scale(1.1) rotate(5deg);
    opacity: 0.15;
}

.acme-success-body {
    flex-grow: 1;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.acme-success-quote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #475569;
    /* Slate-600 for better readability */
    margin: 0;
    font-weight: 500;
    font-style: italic;
}

/* Remove old divider, replace with spacing */
.acme-success-divider {
    display: none;
}

.acme-success-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
    margin-top: auto;
}

.acme-success-author {
    display: flex;
    align-items: center;
    /* gap removed as avatar is moved */
}

/* Header: Avatar + Meta */
.acme-success-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push meta to right */
    gap: 16px;
    /* Space between avatar and text */
    margin-bottom: 24px;
    /* Space before body text */
}

/* Moved to top left */
.acme-success-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #F1F5F9;
    border: 2px solid #ffffff;
    /* Slightly thinner border for smaller size */
    box-shadow: 0 0 0 2px var(--acme-primary);
    margin-bottom: 0;
    /* Removed spacing as it is now in flex row */
    flex-shrink: 0;
}

.acme-success-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acme-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acme-primary);
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.acme-success-meta {
    display: flex;
    flex-direction: column;
    text-align: right;
    /* Right align text */
}

.acme-success-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--acme-dark);
    margin: 0;
    line-height: 1.2;
}

.acme-success-role {
    font-size: 0.85rem;
    color: #64748b;
    /* Muted color for hierarchy */
    font-weight: 500;
    margin: 2px 0 0 0;
}

.acme-success-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: normal;
}

.acme-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.acme-success-rating .star {
    font-size: 14px;
    color: #f59e0b;
    /* Gold star */
}

.acme-success-rating .rating-num {
    font-size: 1rem;
    font-weight: 800;
    color: #b4690e;
    /* Dark gold for text */
    line-height: 1;
}

.acme-success-rating .rating-count {
    font-size: 0.9rem;
    color: #94a3b8;
    /* Slate grey */
    font-weight: 400;
    margin-left: 2px;
}

/* Responsive */
@media (max-width: 992px) {

    /* Carousel - Horizontal Scroll Snap for Mobile & Tablet */
    .acme-success-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        /* Increased gap for better separation */
        grid-template-columns: none;
        /* Override grid */

        /* Layout Breakout Logic - Robust */
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;

        /* Padding for aesthetics - bottom padding for shadow visibility */
        padding: 0 20px 40px 20px;

        /* Flexible height to avoid CLS gaps */
        min-height: auto;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .acme-success-grid::-webkit-scrollbar {
        display: none;
    }

    .acme-success-card {
        flex: 0 0 40%;
        /* Reduce width to peek the next card more clearly (2.5 cards visible) */
        max-width: 400px;
        scroll-snap-align: center;
        margin: 5px 0;
        /* Ensure consistent height or flex behavior if needed */
        padding: 24px;
        /* Ensure comfortable padding */
    }

    /* Fix Footer Layout for Tablet too */
    .acme-success-footer {
        flex-wrap: wrap;
        gap: 12px;
    }

    .acme-success-author {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .acme-success-role {
        word-wrap: break-word;
    }
}

@media (max-width: 576px) {
    .acme-success-section {
        padding: 60px 0;
    }

    .acme-success-card {
        flex: 0 0 85%;
        max-width: 320px;
        padding: 16px;
        /* Further reduced padding */
    }

    .acme-success-footer {
        flex-wrap: wrap;
        /* CRITICAL: Allows items to wrap instead of squash */
        gap: 12px;
    }

    .acme-success-author {
        /* Ensure author block takes space but allows wrapping */
        flex: 1 1 auto;
        min-width: 0;
        /* Allows text truncation/wrapping to work properly */
        max-width: 100%;
    }

    .acme-success-avatar {
        width: 40px;
        height: 40px;
    }

    .acme-success-name {
        font-size: 0.95rem;
        /* Slightly smaller text */
    }

    .acme-success-role {
        font-size: 0.8rem;
    }

    /* Moved to top left */
    .acme-success-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background: #F1F5F9;
        border: 2px solid #ffffff;
        /* Slightly thinner border for smaller size */
        box-shadow: 0 0 0 2px var(--acme-primary);
        margin-bottom: 0;
        /* Removed spacing as it is now in flex row */
        flex-shrink: 0;
    }

    .acme-success-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .acme-avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--acme-primary);
        color: white;
        font-weight: 700;
        font-size: 1.2rem;
    }

    .acme-success-meta {
        display: flex;
        flex-direction: column;
        text-align: right;
        /* Right align text */
    }

    .acme-success-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--acme-dark);
        margin: 0;
        line-height: 1.2;
    }

    .acme-success-role {
        font-size: 0.85rem;
        color: #64748b;
        /* Muted color for hierarchy */
        font-weight: 500;
        margin: 2px 0 0 0;
    }

    .acme-success-rating {
        display: flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-weight: normal;
    }

    .acme-rating-stars {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .acme-success-rating .star {
        font-size: 14px;
        color: #f59e0b;
        /* Gold star */
    }

    .acme-success-rating .rating-num {
        font-size: 1rem;
        font-weight: 800;
        color: #b4690e;
        /* Dark gold for text */
        line-height: 1;
    }

    .acme-success-rating .rating-count {
        font-size: 0.9rem;
        color: #94a3b8;
        /* Slate grey */
        font-weight: 400;
        margin-left: 2px;
    }

    /* Responsive */
    @media (max-width: 992px) {

        /* Carousel - Horizontal Scroll Snap for Mobile & Tablet */
        .acme-success-grid {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 24px;
            /* Increased gap for better separation */
            grid-template-columns: none;
            /* Override grid */

            /* Layout Breakout Logic - Robust */
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;

            /* Padding for aesthetics - bottom padding for shadow visibility */
            padding: 0 20px 40px 20px;

            /* Flexible height to avoid CLS gaps */
            min-height: auto;

            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .acme-success-grid::-webkit-scrollbar {
            display: none;
        }

        .acme-success-card {
            flex: 0 0 40%;
            /* Reduce width to peek the next card more clearly (2.5 cards visible) */
            max-width: 400px;
            scroll-snap-align: center;
            margin: 5px 0;
            /* Ensure consistent height or flex behavior if needed */
            padding: 24px;
            /* Ensure comfortable padding */
        }

        /* Fix Footer Layout for Tablet too */
        .acme-success-footer {
            flex-wrap: wrap;
            gap: 12px;
        }

        .acme-success-author {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
        }

        .acme-success-role {
            word-wrap: break-word;
        }
    }

    @media (max-width: 576px) {
        .acme-success-section {
            padding: 60px 0;
        }

        .acme-success-card {
            flex: 0 0 85%;
            max-width: 320px;
            padding: 16px;
            /* Further reduced padding */
        }

        .acme-success-footer {
            flex-wrap: wrap;
            /* CRITICAL: Allows items to wrap instead of squash */
            gap: 12px;
        }

        .acme-success-author {
            /* Ensure author block takes space but allows wrapping */
            flex: 1 1 auto;
            min-width: 0;
            /* Allows text truncation/wrapping to work properly */
            max-width: 100%;
        }

        .acme-success-avatar {
            width: 40px;
            height: 40px;
        }

        .acme-success-name {
            font-size: 0.95rem;
            /* Slightly smaller text */
        }

        .acme-success-role {
            font-size: 0.8rem;
        }

        .acme-success-grid {
            width: calc(100% + 32px);
            margin-left: -16px;
            margin-right: -16px;
            padding: 0 16px 30px 16px;
        }
    }
}

/* --- SECTION 8: INSTRUCTORS (Refactored) --- */
.acme-instructor-section {
    padding: var(--section-padding-fluid) 0;
    background: #ffffff;
    /* Changed from #f8fafc to white for alternating pattern */
}

/* Force vertical stacking to fix side-by-side issue */
.acme-instructor-section .acme-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.acme-text-center {
    text-align: center;
}

.acme-mb-40 {
    margin-bottom: var(--header-margin-fluid);
}

/* --- Spotlight Layout (Single) --- */
.acme-spotlight-card {
    background: #ffffff;
    border-radius: 24px;
    /* rounded-3xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* shadow-2xl */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 1150px;
    margin: 40px auto 0;
}

@media (min-width: 993px) {
    .acme-spotlight-card {
        flex-direction: row;
        min-height: 400px;
        /* CONTAINER spec */
    }
}

.acme-spotlight-image-side {
    position: relative;
    width: 100%;
}

@media (min-width: 993px) {
    .acme-spotlight-image-side {
        width: 50%;
        /* lg:w-1/2 */
    }
}

.acme-spotlight-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1;
    /* aspect-square */
}

@media (max-width: 576px) {
    .acme-spotlight-image-side {
        height: 350px;
        /* Limit height on mobile */
    }

    .acme-spotlight-image {
        aspect-ratio: 16/10;
        /* Wider aspect for mobile spotlight */
    }
}

.acme-spotlight-content-side {
    padding: 32px;
    /* p-8 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

@media (min-width: 993px) {
    .acme-spotlight-content-side {
        padding: 56px;
        /* lg:p-14 */
        width: 50%;
    }
}

.acme-spotlight-badge {
    display: inline-block;
    background: #0056b3;
    /* Blue */
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 20px;
}

.acme-spotlight-name {
    font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    /* tracking-tight */
    line-height: 1.1;
    /* leading-tight */
    color: #1e293b;
    margin: 0 0 5px 0;
}

.acme-spotlight-role {
    font-size: 1.1rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 20px;
}

.acme-spotlight-desc {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1rem;
}

.acme-spotlight-desc p {
    margin-bottom: 1em;
    /* Ensure paragraphs spacing */
}

.acme-spotlight-stats {
    border-top: 1px solid #e2e8f0;
    padding-top: 24px;
    /* pt-6 */
    margin-top: auto;
    /* ensure bottom alignment if needed */
    display: flex;
    align-items: center;
    gap: 32px;
    /* gap-8 */
}

.acme-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #1e293b;
}

.acme-stat-item .dashicons {
    color: #94a3b8;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.acme-stat-divider {
    width: 1px;
    height: 24px;
    background: #cbd5e1;
}

/* --- Dynamic Grid System (Multiple) --- */
.acme-instructors-grid-system {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* justify-center */
    gap: var(--grid-gap-fluid);
    /* gap-30 */
    margin-top: var(--header-margin-fluid);
}

.acme-grid-instructor-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.acme-grid-instructor-card:hover {
    transform: translateY(-5px);
}

.acme-grid-image-wrapper {
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
}

.acme-grid-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acme-grid-content {
    padding: 20px;
    text-align: center;
}

.acme-grid-name {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.acme-grid-name a {
    color: inherit;
    text-decoration: none;
}

.acme-grid-role {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.acme-grid-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
}

/* --- SECTION 10: BLOG / RESOURCES --- */
.acme-blog-section {
    padding: var(--section-padding-fluid) 0;
    background-color: #f8fafc;
}

.acme-section-heading {
    text-align: center;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 800;
    margin-bottom: var(--header-margin-fluid);
    display: inline-block;
    background-image: linear-gradient(to right, #0f172a 20%, #3b82f6 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.acme-posts-grid.home-grid {
    display: grid;
    gap: var(--grid-gap-fluid);
    grid-template-columns: repeat(3, 1fr);
}

.acme-blog-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Consistent baseline shadow */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Enabled Transition */
}

.acme-blog-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* Deep hover shadow */
    transform: translateY(-5px);
    /* Lift */
}

.acme-blog-card__image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #e2e8f0;
}

.acme-blog-card__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    /* Enabled Zoom */
}

.acme-blog-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9;
    color: #cbd5e1;
}

.acme-blog-card__placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

.acme-blog-card:hover .acme-blog-card__image-wrapper img {
    transform: scale(1.05);
    /* Zoom effect */
}

.acme-blog-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.acme-blog-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    color: rgb(0, 12, 41);
}

.acme-blog-card__title a {
    text-decoration: none;
    color: inherit;
}

.acme-blog-card__title a:hover {
    color: var(--acme-blue-primary);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(106, 111, 115);
    margin-bottom: 20px;
}

.acme-blog-card__meta.custom-meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 16px;
    font-size: 14px;
    color: rgb(106, 111, 115);
}

.custom-meta .author-info,
.custom-meta .date-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.custom-meta svg {
    color: #94a3b8;
    flex-shrink: 0;
}

.custom-meta .author-name {
    font-weight: 600;
    color: var(--acme-navy-deep);
}

/* Responsiveness */
@media (max-width: 992px) {
    .acme-posts-grid.home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acme-posts-grid.home-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .acme-blog-card__content {
        padding: 20px;
    }
}


/* --- SECTION 10: BLOG / LATEST NEWS --- */
.acme-blog-section {
    padding: var(--section-padding-fluid) 0;
    background: #ffffff;
    /* White background for alternating pattern */
}

.acme-blog-section .acme-container {
    display: flex;
    flex-direction: column;
}

/* --- SECTION 11: FAQ --- */
.acme-faq-home-section {
    padding: var(--section-padding-fluid) 0;
    background-color: #ffffff;
}

.acme-faq-home-section .acme-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Ensure the grid wrapper still centers its children if needed, but the container should be flex-start */
.acme-faq-home-grid {
    display: flex !important;
    gap: var(--grid-gap-fluid);
    width: 100%;
}

.acme-faq-home-column {
    flex: 1;
}

/* Revert to standard Archive Style (Udemy-like) */
.acme-faq-home-section .acme-accordion {
    border: 1px solid #d1d7dc !important;
    border-radius: 0px !important;
    background: #ffffff !important;
    width: 100%;
    /* Ensure full width */
}

.acme-faq-home-section .acme-accordion__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px !important;
    /* Stacked list style */
    display: block !important;
    width: 100%;
    background: #ffffff !important;
    border-radius: 0px !important;
    border-bottom: 1px solid #d1d7dc !important;
    box-shadow: none !important;
}

.acme-faq-home-section .acme-accordion__item:last-child {
    border-bottom: none !important;
}

.acme-faq-home-section .acme-accordion__header {
    background-color: #f7f9fa !important;
    color: #2d2f31 !important;
    padding: 16px 24px !important;
    border: none !important;
    min-height: 56px !important;
    border-radius: 0px !important;
    display: flex !important;
    justify-content: flex-start !important;
    /* Correct mismatch: sitting next to icon */
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.acme-faq-home-section .acme-accordion__header:hover {
    background-color: #e3e7ea !important;
}

.acme-faq-home-section .acme-accordion__title {
    color: #2d2f31 !important;
    font-weight: 700 !important;
    /* Correct mismatch: bold weight */
    font-size: 16px !important;
    flex: 1 !important;
    text-align: left !important;
}

.acme-faq-home-section .acme-accordion__icon {
    background: transparent !important;
    border-radius: 0px !important;
    width: auto !important;
    height: auto !important;
    color: #1c1d1f !important;
    order: -1 !important;
    /* Ensure icon is on left */
    display: flex !important;
    align-items: center !important;
}

.acme-faq-home-section .acme-accordion__icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
}

.acme-faq-home-section .acme-accordion__body {
    background: #ffffff !important;
    border-top: 1px solid #d1d7dc !important;
}

.acme-faq-home-section .acme-accordion__content>* {
    padding: 16px 24px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #1c1d1f !important;
}

/* Center Section Heading Override - keep title centered for section balance */
.acme-faq-home-section .acme-heading-xl {
    text-align: center;
    width: 100%;
    margin-bottom: var(--header-margin-fluid);
}

@media (max-width: 994px) {
    .acme-faq-home-grid {
        flex-direction: column;
        gap: 0;
    }
}

/* --- Phase 1: Carousel Dots --- */
.acme-carousel-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .acme-carousel-dots {
        display: flex;
    }
}

.acme-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
}

.acme-dot.active {
    background: var(--acme-primary);
    width: 24px;
    border-radius: 4px;
}

/* =========================================
   PERFORMANCE & ACCESSIBILITY UPGRADES
   ========================================= */

/* 1. Skeleton Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.acme-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Apply to Blog Placeholders */
.acme-blog-card__placeholder {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* 2. Dark Mode Support (Variables Setup) */
/* Dark Mode Support intentionally removed to fix contrast issues.
   Will be reintroduced with proper theme switching strategy later. */
/* --- SECTION 13: LOCATION & CONTACT --- */
.acme-location-section {
    background-color: #f8fafc;
    padding: 100px 0;
}

.acme-section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.acme-heading-xl {
    font-size: 40px;
    font-weight: 800;
    display: inline-block;
    background-image: linear-gradient(to right, #0f172a 20%, #3b82f6 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 12px 0;
}

.acme-subheading {
    font-size: 18px;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.acme-location-grid {
    display: block;
    width: 100%;
}

/* Left Column */
/* Left Column Wrapper */
.acme-location-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Map Wrapper */
.acme-map-wrapper {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.acme-map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}

/* Contact Info Card */
.acme-contact-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.acme-contact-row {
    display: flex;
    align-items: center;
    /* Vertically center icon and text */
    gap: 16px;
}

.acme-icon-box {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    /* Blue matching mockup */
    border-radius: 12px;
    /* Rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.acme-icon-blue {
    background: #3b82f6;
}

.acme-icon-check {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.acme-contact-details {
    font-size: 15px;
    color: #1e293b;
    line-height: 1.5;
}

.acme-label-strong {
    font-weight: 700;
    color: #0f172a;
    margin-right: 4px;
}

.acme-phone-link,
.acme-email-link {
    color: #1e293b;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.acme-phone-link:hover,
.acme-email-link:hover {
    color: #3b82f6;
}

.acme-contact-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 4px 0;
}

.acme-hours-row {
    align-items: center;
}

.acme-hours-text {
    font-weight: 500;
    color: #1e293b;
}


/* =========================================
   STITCH CONTACT SECTION STYLES
   ========================================= */
.acme-stitch-contact-section {
    background-color: #f8fafc;
    padding: 80px 20px;
    color: #0f172a;
}

.acme-stitch-container {
    max-width: 1200px;
    margin: 0 auto;
}

.acme-stitch-header {
    text-align: center;
    margin-bottom: 60px;
}

.acme-stitch-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}

.acme-stitch-title .text-dark {
    color: #0f172a;
}

.acme-stitch-title .text-primary {
    color: #147abd;
}

.acme-stitch-subtitle {
    color: #64748b;
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Data Grid */
.acme-stitch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .acme-stitch-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cards */
.acme-stitch-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.acme-stitch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #e2e8f0;
}

.acme-stitch-icon-box {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    background-color: #f0f9ff;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #147abd;
}

.acme-stitch-icon-box .material-symbols-outlined {
    font-size: 1.875rem;
}

.acme-stitch-info {
    overflow: hidden;
}

.acme-stitch-info .label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #147abd;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.acme-stitch-info p {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Enquiry Section */
.acme-stitch-enquiry {
    background: white;
    border-radius: 2rem;
    padding: 2.5rem;
    border: 1px solid #e0f2fe;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.acme-stitch-enquiry h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #0f172a;
}

.acme-stitch-enquiry p {
    color: #475569;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.acme-stitch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    background-color: #147abd;
    color: white;
    font-weight: 700;
    border-radius: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(20, 122, 189, 0.3);
}

.acme-stitch-btn:hover {
    background-color: #0c6399;
    transform: scale(0.98);
}

.acme-stitch-response-time {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

/* Map */
.acme-stitch-map-wrapper {
    width: 100%;
    height: 450px;
    border-radius: 2rem;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #e2e8f0;
}

.acme-stitch-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: contrast(1.05) grayscale(0.2);
}

/* Live Traffic badge overlap */
.acme-map-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.acme-traffic-indicator {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.acme-traffic-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #22c55e;
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@media (min-width: 768px) {
    .acme-stitch-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   NEW SPLIT LAYOUT (Screenshot Matching)
   ========================================= */

.acme-stitch-contact-section {
    background-color: #f8fafc;
    /* Light blueish grey from screenshot */
    padding: 60px 20px;
}

/* Main Grid: Left (Map+Info) | Right (Form) */
.acme-contact-split-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .acme-contact-split-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        /* Map/Info slightly wider, or balanced */
        gap: 2rem;
        align-items: start;
    }
}

/* --- Left Column --- */
.acme-contact-left-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 1. Map Card */
.acme-map-card-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    height: 320px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: #e2e8f0;
}

.acme-map-card-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Overlay Card on Map (To match screenshot visual) */
.acme-map-overlay-card {
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    padding: 15px;
    border-radius: 12px;
    width: 240px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.acme-map-overlay-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #0f172a;
}

.acme-map-overlay-text {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
    margin-bottom: 8px;
}

.acme-map-btn {
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

/* 2. Contact Details List Card */
.acme-contact-list-card {
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.acme-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.acme-contact-item:last-child {
    margin-bottom: 0;
}

.acme-contact-icon-sq {
    width: 48px;
    height: 48px;
    background: #3b82f6;
    /* Bright Blue */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

.acme-contact-icon-sq .material-symbols-outlined {
    font-size: 24px;
}

.acme-contact-text-group {
    display: flex;
    flex-direction: column;
}

.acme-contact-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
    margin-bottom: 2px;
}

.acme-contact-value {
    font-size: 1rem;
    color: #334155;
    font-weight: 500;
}

.acme-contact-value a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.acme-contact-value a:hover {
    color: #3b82f6;
}


/* --- Right Column (Form) --- */
.acme-enquiry-form-card {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.acme-enquiry-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.acme-enquiry-sub {
    color: #64748b;
    margin-bottom: 2rem;
}

.acme-form-group {
    margin-bottom: 1.25rem;
}

.acme-form-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    transition: all 0.2s;
    outline: none;
    color: #334155;
}

.acme-form-input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.acme-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.acme-form-btn-block {
    width: 100%;
    padding: 1rem;
    background: #3b82f6;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.acme-form-btn-block:hover {
    background: #2563eb;
}


/* =========================================
   NEW DESIGN: CONTENT LEFT | TALL MAP RIGHT
   ========================================= */

.acme-stitch-contact-section {
    background-color: #f8fafc;
    padding: 80px 20px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.acme-stitch-wrapper-split {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    /* Map on top mobile, content below? Or Map bottom? Standard is Map bottom mobile. */
    gap: 3rem;
}

@media (min-width: 1024px) {
    .acme-stitch-wrapper-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: stretch;
        /* Make map stretch to height of content */
    }
}

/* --- Left Column: Content --- */
.acme-col-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center if map is taller? Or top. Screenshot looks top/spread. */
    gap: 2.5rem;
}

/* Header */
.acme-stitch-header {
    text-align: left;
    /* Screenshot: Left aligned */
    margin-bottom: 0;
}

.acme-stitch-title {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    display: inline-block;
    background-image: linear-gradient(to right, #0f172a 20%, #3b82f6 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.acme-stitch-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 90%;
    margin: 0;
}

/* 2x2 Grid for Cards */
.acme-cards-2x2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .acme-cards-2x2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cards Styling */
.acme-stitch-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.acme-stitch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.acme-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Screenshot shows rounded icons? Or soft square? Zooming in... Logic says circle or soft square. Let's stick to soft square from previous design or circle if icon 'location' has circle bg. Screenshot Step 87: Looks like circle bg for icons, light blue. */
    background: #e0f2fe;
    /* Light blue */
    color: #0284c7;
    /* Darker blue icon */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acme-icon-circle .material-symbols-outlined {
    font-size: 24px;
}

.acme-card-text small {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #3b82f6;
    /* Label Color */
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.05em;
}

.acme-card-text div {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Enquiry Box - Bottom Left */
.acme-enquiry-box-alt {
    background: #f0f9ff;
    /* Light blueish bg from screenshot */
    border-radius: 2rem;
    padding: 2.5rem;
    border: 1px solid #e0f2fe;
}

.acme-enquiry-head {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.acme-enquiry-desc {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.acme-btn-quick {
    background: #0ea5e9;
    /* Sky blue button */
    color: white;
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.4);
    transition: background 0.2s;
    text-decoration: none;
}

.acme-btn-quick:hover {
    background: #0284c7;
}

.acme-enquiry-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

/* --- Right Column: Map --- */
.acme-col-map {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    min-height: 500px;
    /* Tall map */
    height: 100%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background: #e2e8f0;
}

.acme-col-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.1);
    /* Slight filter */
}

@media (max-width: 1024px) {
    .acme-col-map {
        min-height: 350px !important;
        height: 350px !important;
    }
}

/* Map Floating Pills */
.acme-map-pills-container {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
    pointer-events: none;
    /* Let clicks pass through container */
}

.acme-map-pill {
    background: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    pointer-events: auto;
    /* Re-enable clicks */
    text-decoration: none;
}

.acme-pill-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}


/* Quick Enquiry Modal Styles */
.acme-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Flexbox Centering */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* When displayed via JS, we need it to be flex, not block */
.acme-modal[style*="display: block"] {
    display: flex !important;
}

.acme-modal-content {
    background-color: #ffffff;
    margin: 0;
    /* Flexbox handles centering */
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 550px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    max-height: 90vh;
    /* Prevent overflowing viewport height */
    overflow-y: auto;
    /* Scroll internally if needed */

    /* Hide scrollbar internally for cleaner look */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.acme-modal-content::-webkit-scrollbar {
    width: 6px;
}

.acme-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.acme-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    border: 3px solid transparent;
}

@media (max-width: 768px) {
    .acme-modal {
        padding: 0;
        align-items: center;
        /* keep centered */

        /* Hide scrollbar on wrapper too */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
    }

    .acme-modal::-webkit-scrollbar {
        display: none;
        /* WebKit */
    }

    .acme-modal-content {
        width: 90%;
        max-width: 90%;
        margin: auto;
        padding: 24px;
        border-radius: 20px;
        max-height: 85vh;

        /* Hide scrollbar completely on mobile */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .acme-modal-content::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    .acme-modal-content {
        width: 95%;
        padding: 20px;
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.acme-close-modal {
    color: #94a3b8;
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    /* Visual center fix */
}

.acme-close-modal:hover,
.acme-close-modal:focus {
    color: #ef4444;
    /* Red for close action */
    background: #fee2e2;
    transform: rotate(90deg);
}

/* Form Styles */
#quick-enquiry-form input,
#quick-enquiry-form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s;
}

#quick-enquiry-form input:focus,
#quick-enquiry-form textarea:focus {
    border-color: #0ea5e9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

#quick-enquiry-form button {
    background-color: #0ea5e9;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    transition: background-color 0.2s;
}

#quick-enquiry-form button:hover {
    background-color: #0284c7;
}

/* Success Message */
#form-success-message {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}