/* ==========================================================================
    Wilmette Events - About Page Template Stylesheet
    Fully Dynamic ACF Integration - No Fallback Images or Text.
    Fully Responsive (Mobile -> 4K) & ADA Compliant (WCAG 2.1 AA).
    ========================================================================== */

    /* --------------------------------------------------------------------------
    0. Global Layout, Colors & Container System
    -------------------------------------------------------------------------- */
    .about-main,
    .sos-main.about-main {
        background-color: var(--color-bg-cream, #FAF7F2);
        color: var(--color-text-dark, #1E1E1E);
        font-family: var(--font-family-secondary, "Poppins", sans-serif);
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* Base Section with Padding Block */
    .about-section {
        position: relative;
        padding-block: 60px 0;
        width: 100%;
        padding-bottom: 0;
    }

    /* 100% Full-Width Bleed Container */
    .about-fullwidth-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Normal Responsive Container */
    .about-container,
    .about-main .container,
    .about-main .hero-fluid-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0vw 13vw 2vw;
    }

    .about-testimonials-header span.about-title-main {
        font-size: 36px !important;
    }

    @media (min-width: 1400px) {

        .about-container,
        .about-main .container,
        .about-main .hero-fluid-container {
            padding-inline: 13vw !important;
        }
    }

    @media (max-width: 1024px) {

        .about-container,
        .about-main .container,
        .about-main .hero-fluid-container {
            padding-inline: 7.5vw !important;
        }
    }

    @media (max-width: 767px) {

        .about-container,
        .about-main .container,
        .about-main .hero-fluid-container {
            padding-inline: 20px !important;
        }
    }

    /* Reusable Section Headers */
    .about-section-header {
        margin-bottom: clamp(32px, 4vw, 52px);
    }

    .about-section-header.text-center {
        text-align: center;
    }

    .about-section-title {
        font-size: clamp(28px, 3.2vw, 44px);
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 12px;
        letter-spacing: -0.02em;
        color: var(--color-text-dark, #1E1E1E);
    }

    .about-title-main {
        display: block;
        font-family: var(--font-family-secondary) !important;
        color: #1B2330 !important;
        font-size: 40px !important;
    }

    .about-title-accent {
        display: block;
        font-family: var(--font-family-accent, "Oleo Script", cursive);
        font-style: italic;
        font-weight: 400;
        color: var(--color-accent-coral, #C8422C);
        margin-top: 4px;
    }

    .about-section-lead {
        font-size: clamp(15px, 1.2vw, 17px);
        line-height: 1.68;
        color: #4B5563;
        max-width: 720px;
        margin: 14px auto 0;
    }

    /* Decorative Polka Dot Patterns */
    .about-dots-pattern {
        position: absolute;
        width: 220px;
        height: 220px;
        background-image: radial-gradient(#E8B8B0 1.8px, transparent 1.8px), radial-gradient(#9B83C2 1.8px, transparent 1.8px);
        background-size: 16px 16px;
        background-position: 0 0, 8px 8px;
        opacity: 0.5;
        pointer-events: none;
        z-index: 1;
    }

    .about-dots-pattern.top-left {
        top: 30px;
        left: 20px;
    }

    .about-dots-pattern.bottom-right {
        bottom: 30px;
        right: 20px;
    }

    /* Screen reader text for accessibility */
    .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important;
    }

    /* --------------------------------------------------------------------------
    1. Hero Banner Section (.about-hero-section)
    -------------------------------------------------------------------------- */
    .about-hero-section {
        position: relative;
        min-height: 500px;
        background-color: #0F1E19;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        padding-block: clamp(50px, 6vw, 85px);
        z-index: 2;
    }

    .about-hero-section .about-container.hero-fluid-container.container.about-hero-container {
        padding: 6vw 13vw 3vw;
    }

    /* Fallback gradient when no background image is uploaded */
    .about-hero-section.no-bg-image {
        background: radial-gradient(circle at 85% 20%, rgba(200, 66, 44, 0.28) 0%, transparent 45%),
            linear-gradient(135deg, #0c1a15 0%, #153628 55%, #1f1833 100%);
    }

    .about-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #040824c2 0%, #060b2dc2 19%, #000000a1 50%, #00000000 70%, #00000000 100%);
        z-index: 1;
    }

    .about-hero-container {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .about-hero-content {
        max-width: 860px;
    }

    .about-hero-title {
        margin: 0 0 16px;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .about-hero-main-title {
        display: block;
        font-family: var(--font-family-secondary);
        font-size: 80px;
        font-weight: 600;
        color: #FFFFFF;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .about-hero-accent-title {
        display: block;
        font-family: var(--font-family-accent, "Oleo Script", cursive);
        font-weight: 400;
        color: var(--color-accent-coral, #FF6F59);
        font-size: 70px;
        margin-top: 6px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .about-hero-subheading {
        font-family: var(--font-family-secondary, "Poppins", sans-serif);
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.55;
        margin: 0;
        max-width: 640px;
    }

    /* --------------------------------------------------------------------------
    2. Sticky Jump Navigation Bar (Exact same design & behavior as Contact Us)
    -------------------------------------------------------------------------- */
    .contact-jump-nav,
    .about-jump-nav,
    .about-jump-nav-bar {
        position: relative;
        background-color: #FAF7F2;
        border-bottom: 1px solid #EBE4D8;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        transition: background-color 0.25s ease, box-shadow 0.25s ease;
        z-index: 90;
        width: 100%;
    }

    .contact-jump-nav.is-sticky,
    .about-jump-nav.is-sticky,
    .about-jump-nav-bar.is-sticky {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 990;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        animation: contact-nav-drop 0.22s ease forwards;
    }

    @keyframes contact-nav-drop {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

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

    .about-jump-nav-placeholder {
        display: block;
        width: 100%;
        height: 0px;
    }

    section#who-we-are {
        padding-top: 5vw !important;
    }

    .about-jump-nav .contact-jump-container,
    .contact-jump-container,
    .about-jump-nav-inner {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }

    .contact-jump-list,
    .about-jump-nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 36px !important;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .contact-jump-list::-webkit-scrollbar,
    .about-jump-nav-list::-webkit-scrollbar {
        display: none;
    }

    .contact-jump-item,
    .about-jump-nav-item {
        flex-shrink: 0;
    }

    .contact-jump-link,
    .about-jump-nav-link {
        display: inline-block;
        padding: 24px 10px !important;
        color: #1F2937 !important;
        font-family: var(--font-family-body, "Poppins", sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        position: relative;
        border-bottom: none !important;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .contact-jump-link:hover,
    .about-jump-nav-link:hover {
        color: #241B67 !important;
    }

    .contact-jump-link:focus-visible,
    .about-jump-nav-link:focus-visible {
        color: #D4462C !important;
        outline: 2px solid #D4462C;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .contact-jump-link::after,
    .about-jump-nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3.5px !important;
        background-color: #D4462C !important;
        border-radius: 3px 3px 0 0 !important;
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }

    .contact-jump-link.is-active::after,
    .contact-jump-link:hover::after,
    .about-jump-nav-link.is-active::after,
    .about-jump-nav-link:hover::after {
        transform: scaleX(1) !important;
    }

    .contact-jump-link.is-active,
    .contact-jump-link[aria-current="true"],
    .about-jump-nav-link.is-active,
    .about-jump-nav-link[aria-current="location"],
    .about-jump-nav-link[aria-current="true"] {
        color: #241B67 !important;
    }

    /* --------------------------------------------------------------------------
    3. Animated Text Ticker Bar (Exact same as Homepage .section-animated-ticker)
    -------------------------------------------------------------------------- */
    .section-animated-ticker,
    .about-marquee-section {
        background-color: var(--color-bg-cream, #FAF7F2);
        padding: 0 0 6.5vw;
        overflow: hidden;
        position: relative;
        z-index: 6;
        width: 100%;
        border-bottom: 1px solid rgba(229, 224, 216, 0.5);
    }

    .about-container.container.about-partners-principles-container.about-unified-container {
        padding-bottom: 5vw;
    }

    .ticker-viewport {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
        white-space: nowrap;
    }

    .ticker-track {
        display: inline-flex;
        width: max-content;
        animation: ticker-scroll 24s linear infinite;
        will-change: transform;
    }

    .section-animated-ticker:hover .ticker-track,
    .section-animated-ticker:focus-within .ticker-track {
        animation-play-state: paused;
    }

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

        100% {
            transform: translateX(-50%);
        }
    }

    .ticker-group {
        display: inline-flex;
        align-items: center;
    }

    .ticker-item {
        display: inline-flex;
        align-items: center;
        gap: 24px;
        padding: 0 30px 0 0;
    }

    .ticker-text {
        font-family: var(--font-family-primary, "Figtree", sans-serif);
        font-weight: 900;
        font-size: clamp(38px, 5.2vw, 70px);
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 2px var(--color-primary, #057A3A);
        letter-spacing: 2%;
        user-select: none;
    }

    .ticker-separator {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--color-accent-coral, #E15B45);
    }

    .about-ticker-sep-line {
        display: inline-block;
        width: 14px;
        height: 2.2px;
        background-color: var(--color-primary, #057A3A);
    }

    .about-ticker-sep-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--color-primary, #057A3A);
    }

    /* --------------------------------------------------------------------------
    4. Unified Story & Principles Section (1424px Hug Container, Homepage Partnership + Attached Figma Design)
    -------------------------------------------------------------------------- */
    .section-image-content.about-partners-principles-section,
    .about-partners-principles-section {
        padding: 0 !important;
        background-color: var(--color-bg-cream, #FAF7F2);
        position: relative;
        overflow: hidden;
        z-index: 4;
    }

    /* .about-jump-nav-placeholder.contact-jump-nav-placeholder{
        height: 0 !important;
    } */
    .about-unified-container {
        max-width: 1424px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-inline: clamp(20px, 3vw, 40px) !important;
        position: relative;
        z-index: 2;
    }

    /* Vector Circle Backgrounds from WordPress Uploads (Exact user-provided asset) */
    .about-circle-vector-bg {
        position: absolute;
        pointer-events: none;
        z-index: 0 !important;
        overflow: hidden;
    }

    .about-circle-vector-bg img {
        display: block;
        width: clamp(280px, 32vw, 520px);
        height: auto;
        object-fit: contain;
        opacity: 0.88;
    }

    .about-circle-vector-bg.bg-top-left {
        top: -100px;
        left: -100px;
    }

    .about-circle-vector-bg.bg-bottom-right,
    .about-circle-vector-bg.bg-right-bottom {
        bottom: -20px;
        right: -140px;
    }

    /* Specific positioning when placed directly inside .about-partners-block */
    .about-partners-block {
        position: relative;
        width: 100%;
    }

    .about-partners-block .about-circle-vector-bg.bg-top-left {
        top: -60px;
        left: -80px;
        z-index: 0;
    }

    .about-partners-block .about-circle-vector-bg.bg-bottom-right,
    .about-partners-block .about-circle-vector-bg.bg-right-bottom {
        bottom: -50px;
        right: -70px;
        z-index: 0;
    }

    /* Specific positioning when placed directly inside .about-principles-block */
    .about-principles-block {
        position: relative;
        width: 100%;
    }

    .about-principles-block .about-circle-vector-bg.bg-bottom-right,
    .about-principles-block .about-circle-vector-bg.bg-right-bottom {
        bottom: -60px;
        right: -70px;
        z-index: 0;
    }

    /* Circular Halftone Dot Burst Patterns from Figma Design (CSS Fallback) */
    .about-dots-burst {
        position: absolute;
        width: clamp(260px, 30vw, 440px);
        height: clamp(260px, 30vw, 440px);
        background-image: radial-gradient(circle, #F5C6BF 2.2px, transparent 2.6px),
            radial-gradient(circle, #A594C8 2.2px, transparent 2.6px);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        opacity: 0.65;
        mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 72%);
        -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 72%);
        pointer-events: none;
        z-index: 1;
    }

    .about-dots-burst.burst-left {
        top: 20px;
        left: -40px;
    }

    .about-dots-burst.burst-right {
        right: -40px;
        bottom: 25px;
        top: auto;
        transform: none;
    }

    /* PART 1: Homepage Image Content Block */
    .about-story-row {
        position: relative;
        width: 100%;
    }

    .image-content-card {
        border-radius: var(--radius-lg, 20px);
        padding: 0px;
        display: grid;
        grid-template-columns: 44% 56%;
        gap: clamp(30px, 4vw, 55px);
        align-items: flex-start;
        z-index: 3;
    }

    .image-content-card.no-media {
        grid-template-columns: 1fr;
        max-width: 880px;
        margin: 0 auto;
    }

    .image-content-media {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .image-content-media img {
        width: 100%;
        height: 100%;
        min-height: 380px;
        max-height: 500px;
        object-fit: cover;
        border-radius: 20px !important;
        display: block;
        transition: transform 0.4s ease;
    }

    .image-content-media img:hover {
        transform: scale(1.02);
    }

    .image-content-info h2,
    .about-partners-title {
        font-size: 40px;
        margin-bottom: 0;
        color: var(--color-text-dark, #1E1E1E);
        font-family: var(--font-family-secondary, "Poppins", sans-serif);
        line-height: 1.2;
        font-weight: 800;
    }

    .about-partners-main-title {
        display: block;
    }

    .heading-accent,
    .about-partners-accent-title {
        font-family: var(--font-family-accent, "Oleo Script", cursive) !important;
        color: var(--color-accent-coral, #D4462C) !important;
        font-weight: 400 !important;
        display: block;
        margin-top: 4px;
    }

    .image-content-header {
        margin-bottom: 20px;
    }

    .image-content-body p {
        font-weight: 500 !important;
        max-width: 730px;
        font-size: 18px;
        color: #3c3c3c;
        line-height: 1.68;
        margin-bottom: 16px;
    }

    .image-content-body p:last-child {
        font-weight: 500 !important;
        max-width: 730px;
        font-size: 16px;
        color: #666666;
        line-height: 1.68;
        margin-bottom: 16px;
    }

    .image-content-body p:last-child {
        margin-bottom: 0;
    }

    /* Partner Logos Wrapper with Elegant Gradient Vertical Dividers (Exact Homepage) */
    .partner-logos-wrapper {
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 24px 0 24px;
        flex-wrap: wrap;
    }

    .partner-logo-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .partner-logo-item::before {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        right: -24px;
        width: 2px;
        background: linear-gradient(to bottom,
                transparent,
                rgba(166, 166, 166, 0.4) 15%,
                #a6a6a6 50%,
                rgba(166, 166, 166, 0.4) 85%,
                transparent);
        transform: scaleX(0.5);
        transform-origin: center;
    }

    .partner-logo-item:last-child::before {
        display: none;
    }

    .partner-logo-item img {
        max-height: 150px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04));
        transition: transform 0.2s ease;
    }

    /* .partner-logo-item img:hover {
        transform: scale(1.04);
    } */

    .image-content-cta {
        margin-top: 24px;
    }

    /* Anchor for smooth scroll from Jump Navigation */
    .about-principles-anchor {
        position: relative;
        top: -90px;
        display: block;
        height: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* PART 2: What Brings Us Together (Attached Figma Design: 1424 Hug x 290 Hug) */
    .about-principles-block {
        margin-top: clamp(60px, 7vw, 95px);
        position: relative;
        width: 100%;
        z-index: 2;
    }

    .about-principles-block .about-section-header {
        text-align: center;
        margin-bottom: 35px;
        position: relative;
        z-index: 3;
    }

    .about-principles-block .about-section-title {
        font-family: var(--font-family-primary, "Figtree", sans-serif);
        font-size: clamp(30px, 3.5vw, 44px);
        font-weight: 800;
        color: #1E1E1E;
        line-height: 1.2;
        margin: 0 0 10px;
        letter-spacing: -0.02em;
    }

    .about-title-main {
        display: block;
        color: #1E1E1E;
    }

    .about-title-accent {
        display: block;
        font-family: var(--font-family-accent, "Oleo Script", cursive);
        font-weight: 400;
        color: #D4462C;
        margin-top: 15px;
        font-size: 38px;
        font-style: normal;
    }

    .about-section-lead {
        font-size: 16px;
        line-height: 1.68;
        color: #3C3C3C;
        max-width: 760px;
        margin: 14px auto 0;
        font-weight: 500 !important;
    }

    /* 4 Commitment Cards Grid (1424 Hug x 290 Hug from Figma) */
    .about-principles-grid {
        display: grid;
        gap: clamp(16px, 1.8vw, 24px);
        width: 100%;
        position: relative;
        z-index: 3;
    }

    .about-principles-grid.grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .about-principles-grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-principles-grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        margin: 0 auto;
    }

    .about-principles-grid.grid-cols-1 {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
    }

    /* Individual Card (Exact Figma Specs: #FFF6F4, 1px #F3DFDA, 20px radius, ~290px height) */
    .about-principle-card {
        position: relative;
        z-index: 4;
        background-color: #F7EDED !important;
        border: 1px solid #FED2E6 !important;
        border-radius: 20px !important;
        padding: clamp(26px, 2.5vw, 32px) clamp(20px, 2vw, 26px);
        min-height: 290px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
        box-shadow: 0 8px 12px rgba(0 0 0 / 10%);
    }

    /* .about-principle-card:hover {

    border-color: #E8B8B0;
    } */

    .about-principle-icon-wrap {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 48px;
    }

    .about-principle-svg {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .about-custom-icon {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .about-principle-card-title {
        font-family: var(--font-family-secondary);
        font-size: 24px;
        font-weight: 500;
        color: #000;
        margin: 0 0 12px;
        line-height: 1.3;
    }

    .about-principle-card-desc {
        font-size: 16px;
        line-height: 1.62;
        color: #3C3C3C;
        margin: 0;
    }

    /* --------------------------------------------------------------------------
    6. Timeline / Legacy Section (.about-timeline-section)
    -------------------------------------------------------------------------- */
    .about-timeline-section {
        background-color: var(--color-bg-cream, #FAF7F2);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        position: relative;
        overflow: hidden;
        z-index: 4;
    }

    .about-timeline-container {
        position: relative;
        z-index: 2;
    }

    .about-timeline-track {
        position: relative;
        margin-top: 36px;
    }

    /* Central spine line */
    .about-timeline-spine {
        position: absolute;
        top: 15px;
        bottom: 20px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background-color: #E8B8B0;
        z-index: 1;
    }

    .about-timeline-milestone {
        position: relative;
        margin-bottom: 0px;
        display: flex;
        align-items: flex-start;
        z-index: 2;
    }

    .about-timeline-milestone:last-child {
        margin-bottom: 0;
    }

    .about-timeline-milestone.milestone-right {
        justify-content: flex-end;
    }

    .about-timeline-milestone.milestone-left {
        justify-content: flex-start;
    }

    /* Central Node & Year */
    .about-timeline-node-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        z-index: 3;
        pointer-events: none;
    }

    .about-timeline-node {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #C8422C;
        box-shadow: 0 0 30px 4px #d4462c9e;
        flex-shrink: 0;
        outline: 5px solid #fff;
    }

    .about-timeline-year {
        font-family: var(--font-family-accent);
        font-size: 32px;
        font-weight: 400;
        color: #442293;
        position: absolute;
        white-space: nowrap;
    }

    .milestone-right .about-timeline-year {
        left: calc(100% + 20px);
    }

    .milestone-left .about-timeline-year {
        right: calc(100% + 20px);
    }

    /* Milestone Cards */
    .about-timeline-card {
        width: calc(52% - 50px);
        background: #FFFFFF;
        border-radius: 20px;
        padding: 8px;
        box-shadow: 0 4px 6px rgba(0 0 0 / 10%);
        border: 1px solid rgba(229, 224, 216, 0.6);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        margin-top: 45px;
    }

    /* .about-timeline-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
    } */

    .about-timeline-card-inner {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .about-timeline-card-text {
        padding: 10px 0px 10px 15px;
    }

    .about-timeline-card-inner.without-media {
        display: block;
    }

    .about-timeline-card-media {
        flex-shrink: 0;
        width: 180px;
        height: -webkit-fill-available;
        border-radius: 20px;
        overflow: hidden;
    }

    .about-timeline-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .about-timeline-card-text {
        flex: 1;
        min-width: 0;
    }

    .about-timeline-card-title {
        font-family: var(--font-family-secondary);
        font-size: 18px;
        font-weight: 800;
        color: #000;
        margin: 0 0 5px;
        line-height: 1.32;
    }

    .about-timeline-card-desc {
        font-size: 16px;
        line-height: 1.58;
        color: #3C3C3C;
        margin: 0;
    }

    /* --------------------------------------------------------------------------
    7. Testimonials / Polaroid Carousel (.about-testimonials-section)
    -------------------------------------------------------------------------- */
    .about-testimonials-section {

        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        position: relative;
        overflow: hidden;
        z-index: 4;
        padding-top: 100px !important;
        padding-bottom: 300px !important;
    }

    .new-testimonial {
        background: #F7EDED;
        background: linear-gradient(180deg, rgba(247, 237, 237, 1) 0%, rgba(247, 237, 237, 1) 50%, rgba(255, 214, 201, 1) 50%, rgba(255, 214, 201, 1) 100%);
    }

    /* 13vw Unified Section Container matching other sections */
    .about-testimonials-container {
        position: relative;
        z-index: 25;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 13vw !important;
    }

    @media (max-width: 1200px) {
        .about-testimonials-container {
            padding-inline: 7.5vw !important;
        }
    }

    @media (max-width: 767px) {
        .about-testimonials-section {
            padding-top: 40px !important;
            padding-bottom: 160px !important;
        }

        .about-testimonials-container {
            padding-inline: 20px !important;
        }
    }

    /* Section Header in Testimonials */
    .about-testimonials-header {
        margin-bottom: 24px !important;
        position: relative;
        z-index: 2;
    }

    .about-testimonials-header .about-title-main {
        font-family: var(--font-family-primary, "Figtree", sans-serif);
        font-size: clamp(28px, 2.8vw, 42px);
        font-weight: 800;
        color: #1E293B;
        display: block;
        line-height: 1.2;
    }

    .about-testimonials-header .about-title-accent {
        font-family: "Playfair Display", "Lora", Georgia, serif;
        font-style: italic;
        font-size: clamp(22px, 2.2vw, 32px);
        font-weight: 700;
        color: #D95338;
        display: block;
        margin-top: 6px;
    }

    /* Polaroid Carousel Track & Viewport */
    .about-polaroid-viewport {
        width: 100% !important;
        overflow: hidden;
        padding-top: 200px !important;
        padding-bottom: 15px !important;
        padding-inline: 0 !important;
        position: relative;
        z-index: 2;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        margin-top: -100px;
        container-type: inline-size;
    }

    .about-polaroid-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--polaroid-gap, clamp(14px, 1.8vw, 26px)) !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        will-change: transform;
        box-sizing: border-box !important;
    }

    .about-polaroid-item {
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    /* Floating Staggering matching attached design */
    /* =========================================================
       4 CARDS ALWAYS FIT ON DESKTOP (>= 992px)
       ========================================================= */

    @media (min-width: 992px) {

        :root {
            --polaroid-gap: clamp(14px, 1.8vw, 26px);
        }

        .about-polaroid-track {
            display: flex !important;
            flex-wrap: nowrap !important;
            width: max-content !important;
            min-width: 100% !important;
            gap: var(--polaroid-gap, clamp(14px, 1.8vw, 26px)) !important;
            box-sizing: border-box !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
        }

        .about-polaroid-viewport {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
            overflow-y: visible !important;
            box-sizing: border-box !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            container-type: inline-size;
        }

        .about-polaroid-item {
            --p-gap: var(--polaroid-gap, clamp(14px, 1.8vw, 26px));
            --item-width: calc((var(--viewport-w, 100cqw) - (3 * var(--p-gap))) / 4);
            flex: 0 0 var(--item-width) !important;
            width: var(--item-width) !important;
            min-width: var(--item-width) !important;
            max-width: var(--item-width) !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-card {
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-photo-wrap {
            width: 100% !important;
            min-width: 0 !important;
            transform: rotate(var(--photo-tilt, 0deg));
            transform-origin: center center;
            transition: transform 0.3s ease;
        }

        .about-polaroid-img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            display: block !important;
            border-radius: 2px;
        }

        .about-polaroid-content {
            margin-left: clamp(4px, 0.7vw, 10px) !important;
            margin-right: clamp(4px, 0.7vw, 10px) !important;
            padding: clamp(10px, 1.2vw, 18px) clamp(8px, 1.1vw, 16px) clamp(8px, 1vw, 14px) !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-quote p {
            font-size: clamp(10px, 0.9vw, 13px) !important;
            line-height: 1.45 !important;
        }

        .about-polaroid-author {
            font-size: clamp(10px, 0.9vw, 13px) !important;
        }

        .about-polaroid-info {
            font-size: clamp(9px, 0.75vw, 11px) !important;
        }

        .about-polaroid-item:nth-child(4n + 1) {
            margin-top: -160px !important;
        }

        .about-polaroid-item:nth-child(4n + 2) {
            margin-top: 25px !important;
        }

        .about-polaroid-item:nth-child(4n + 3) {
            margin-top: 25px !important;
        }

        .about-polaroid-item:nth-child(4n + 4) {
            margin-top: -160px !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .about-polaroid-viewport {
            padding-top: 120px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .about-polaroid-item {
            flex: 0 0 240px !important;
            width: 240px !important;
            min-width: 240px !important;
        }

        .about-polaroid-item:nth-child(4n + 1),
        .about-polaroid-item:nth-child(4n + 4) {
            margin-top: -110px !important;
        }

        .about-polaroid-item:nth-child(4n + 2),
        .about-polaroid-item:nth-child(4n + 3) {
            margin-top: 15px !important;
        }
    }

    @media (max-width: 767px) {
        .about-testimonials-section {
            padding-top: 50px !important;
            padding-bottom: 120px !important;
        }

        .about-polaroid-viewport {
            padding-top: 10px !important;
            padding-bottom: 25px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
            overflow-y: visible !important;
            container-type: inline-size;
        }

        .about-polaroid-track {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 20px !important;
            width: max-content !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-item {
            --mobile-w: var(--viewport-w, min(100cqw, calc(100vw - 40px)));
            flex: 0 0 var(--mobile-w) !important;
            width: var(--mobile-w) !important;
            min-width: var(--mobile-w) !important;
            max-width: var(--mobile-w) !important;
            margin-top: 0 !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-card {
            width: 100% !important;
            max-width: 320px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-photo-wrap {
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .about-polaroid-img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
        }

        .about-testimonials-controls-wrap {
            margin-top: 20px !important;
            margin-bottom: 30px !important;
        }
    }

    .about-polaroid-item:hover,
    .about-polaroid-item:focus-within {
        transform: translateY(-6px);
        z-index: 5;
    }

    /* Card: transparent container */
    .about-polaroid-card {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Authentic Polaroid White Frame with Shadow & Tilt from design */
    .about-polaroid-photo-wrap {
        transform-origin: center center;
        transition: transform 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .about-polaroid-img {
        width: 100%;
        object-fit: contain;
        display: block;
        border-radius: 2px;
    }

    /* Polaroid Caption & Quote with Pink/Coral Outline from design */
    .about-polaroid-content {
        background: #FFFFFF !important;
        border: 4px solid #FFAAA8 !important;
        margin-top: -28px !important;
        position: relative !important;
        z-index: 3 !important;
        padding: 18px 16px 14px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: -35px 10px 10px;
    }

    .about-polaroid-item.text-only .about-polaroid-content {
        margin: 0 !important;
        padding: 28px 20px !important;
        min-height: 220px;
        justify-content: center;
    }

    .about-polaroid-quote {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .about-polaroid-quote p {
        font-size: 13px !important;
        line-height: 1.48 !important;
        color: #222222 !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }

    .about-polaroid-author-wrap {
        margin-top: auto;
    }

    .about-polaroid-author {
        display: block !important;
        font-style: normal !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #111111 !important;
    }

    .about-polaroid-info {
        display: block !important;
        font-size: 12px !important;
        color: #000 !important;
        margin-top: 3px !important;
    }

    /* Bottom Carousel Controls matching design replica */
    .about-testimonials-controls-wrap {
        position: relative !important;
        z-index: 25 !important;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }

    nav#about-jump-nav {
        top: 0px !important;
    }

    .about-testimonials-controls {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        position: relative !important;
        z-index: 25 !important;
    }

    .about-slider-nav-btn {
        width: 31.667px !important;
        height: 31.667px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
        color: #241F20 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        cursor: pointer !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;

        position: relative !important;
        z-index: 30 !important;

        transition: transform 0.15s ease, opacity 0.2s ease !important;
        box-shadow: none !important;
    }

    .about-slider-nav-btn svg {
        width: 31.667px !important;
        height: 31.667px !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
    }

    .about-slider-nav-btn svg path {
        fill: #241F20 !important;
    }

    .about-slider-nav-btn.prev {
        opacity: 0.75 !important;
    }

    .about-slider-nav-btn.next {
        opacity: 1 !important;
    }

    .about-slider-nav-btn:hover {
        background-color: transparent !important;
        opacity: 1 !important;
        transform: scale(1.08) !important;
    }

    .about-slider-nav-btn:focus-visible {
        outline: 2px solid #057A3A !important;
        outline-offset: 3px !important;
    }

    .about-slider-nav-btn.is-disabled,
    .about-slider-nav-btn[aria-disabled="true"] {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }

    /* Fix right-column overflow */


    .about-partners-grid {
        display: grid;
        grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
        width: 100%;
        max-width: 100%;
    }

    .about-partners-media-col,
    .about-partners-content-col {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .about-partners-content-col {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .about-partners-content-col img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent long headings/text from forcing the column wider */
    .about-partners-title,
    .about-partners-desc {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Partner logos should never exceed the content column */
    .about-partners-logos-wrapper {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
    }

    .about-partner-logo-item {
        min-width: 0;
        max-width: 100%;
    }

    .about-partner-logo-item img {
        display: block;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    /* --------------------------------------------------------------------------
    8. Comprehensive Responsive Breakpoints
    -------------------------------------------------------------------------- */
    @media (max-width: 1536px) {

        .about-hero-section .about-container.hero-fluid-container.container.about-hero-container,
        .about-container,
        .about-main .container,
        .about-main .hero-fluid-container {
            padding-inline: 7.5vw !important;

        }

        .about-container.hero-fluid-container.container.about-testimonials-container {
            padding-inline: 13vw !important;
        }

        .about-principle-card-desc {
            font-size: 16px;
        }

        .about-principle-card-title {
            font-size: 21px;
        }
    }

    @media (max-width: 1400px) {
        .about-container.hero-fluid-container.container.about-testimonials-container {
            padding-inline: 10.5vw !important;
        }
    }

    @media (max-width: 1200px) {
        .about-principles-grid.grid-cols-4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 991px) {
        .about-hero-main-title {
            font-size: 60px;
        }

        .about-hero-accent-title {
            font-size: 50px;
        }

        .about-principle-card {
            min-height: 100%;
        }

        .about-polaroid-viewport {
            padding-top: 0px !important;
            margin-top: 0px;
        }

        .about-polaroid-item:nth-child(4n + 1),
        .about-polaroid-item:nth-child(4n + 4) {
            margin-top: 0px !important;
        }

        .about-polaroid-track {
            gap: 28px;

        }

        .about-hero-overlay {
            background: #040824ab;

        }

        .about-partners-grid {
            grid-template-columns: 1fr;
            gap: 36px;
        }

        .about-partners-feature-img {
            height: 340px;
        }

        /* Timeline single vertical spine on left */
        .about-timeline-spine {
            left: 20px;
            transform: none;
        }

        .about-timeline-node-wrap {
            left: 10px;
            transform: none;
            flex-direction: row;
            align-items: center;
        }

        .about-timeline-milestone {
            justify-content: flex-start !important;
            padding-left: 56px;
        }

        .about-timeline-card,
        .milestone-right.no-media .about-timeline-card,
        .milestone-left.no-media .about-timeline-card {
            width: 100% !important;
        }

        .milestone-right .about-timeline-year,
        .milestone-left .about-timeline-year {
            position: static;
            font-size: 26px;
            font-weight: 800;
            color: #442293;
            margin-top: 4px;
            text-align: center;
            margin-left: 28px;
        }

        .about-principles-grid.grid-cols-3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {

        .about-jump-nav-list,
        .contact-jump-list {
            padding: 0 10px;
            justify-content: flex-start;
            gap: 20px;
        }

        .about-jump-nav-link,
        .contact-jump-link {
            padding: 14px 10px;
            font-size: 13px;
        }

        .about-timeline-card-inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .about-timeline-card-media {
            width: 100%;
            height: 140px;
        }

        .about-polaroid-track {
            padding-inline: 16px;
        }

        .about-principles-grid.grid-cols-4,
        .about-principles-grid.grid-cols-3,
        .about-principles-grid.grid-cols-2 {
            grid-template-columns: 1fr;
            max-width: 500px;
            margin: 0 auto;
        }

        .about-circle-vector-bg img {
            width: clamp(200px, 45vw, 320px);
            opacity: 0.75;
        }

        .about-circle-vector-bg.bg-top-left {
            top: -20px;
            left: -35px;
        }

        .about-circle-vector-bg.bg-bottom-right,
        .about-circle-vector-bg.bg-right-bottom {
            bottom: -30px;
            right: -35px;
        }
    }

    @media (max-width: 480px) {
        .about-hero-section {
            min-height: 340px;
            padding-block: 44px;
        }

        .about-hero-main-title {
            font-size: 28px;
            text-align: center;
        }

        .about-timeline-node {
            margin-left: -10px;
        }

        .section-animated-ticker,
        .about-marquee-section {
            background-color: transparent;
            padding: 30px 0 20px;
            overflow: hidden;
            position: relative;
            z-index: 6;
            width: 100%;
            border-bottom: none;
            border-top: none;
        }

        .partner-logos-wrapper.about-partners-logos-wrapper {
            margin: 15px auto;
            justify-content: center;
        }

        p.about-partners-desc,
        p.about-partners-desc {
            font-size: 14px;
        }

        .about-hero-accent-title {
            font-size: 26px;
            margin: 5px 0 -10px;
            text-align: center;
        }

        .about-hero-subheading {
            font-size: 14px;
            margin-top: 14px;
            text-align: center;
        }

        .about-jump-nav-list,
        .contact-jump-list {
            padding: 0 10px;
            justify-content: flex-start;
            gap: 10px !important;
        }

        .image-content-info h2,
        .about-partners-title,
        .heading-accent,
        .about-partners-accent-title,
        .about-title-main,
        .about-testimonials-header span.about-title-main {
            font-size: 22px !important;
        }

        .about-principle-card-title {
            font-size: 18px !important;
        }

        .about-principle-card-desc {
            font-size: 14px !important;
        }

        .about-testimonials-header .about-title-accent,
        .about-title-accent,
        .heading-accent,
        .about-partners-accent-title {
            font-style: normal !important;
            font-size: 22px !important;
        }

        .about-timeline-card-title {

            font-size: 16px !important;

        }

        .about-timeline-card-desc {
            font-size: 13px !important;

        }

        .about-timeline-card-inner.card-layout-right.with-media {
            flex-direction: column-reverse;
        }

        .about-testimonials-section {
            background-repeat: no-repeat;
            background-position: left;
            background-size: cover;
            position: relative;
            overflow: hidden;
            z-index: 4;
            padding-top: clamp(60px, 6vw, 90px) !important;
            padding-bottom: clamp(180px, 16vw, 250px) !important;
        }

        .about-testimonials-section {
            padding-top: 50px !important;
            padding-bottom: 110px !important;
        }

        section#history {
            padding-bottom: 0px;
        }

        .about-container.container.about-partners-principles-container.about-unified-container {
            padding-top: 40px;
        }

        .about-partners-logos-wrapper {
            gap: 16px;
        }

        .about-partner-logo-item img {
            max-height: 55px;
        }

        .about-partners-logo-divider {
            height: 36px;
        }

        .about-timeline-milestone {
            padding-left: 48px;
        }

        .about-timeline-spine,
        .about-timeline-node-wrap {
            left: 14px;
        }

        .about-polaroid-item {
            --mobile-w: var(--viewport-w, min(100cqw, calc(100vw - 40px)));
            flex: 0 0 var(--mobile-w) !important;
            width: var(--mobile-w) !important;
            min-width: var(--mobile-w) !important;
            max-width: var(--mobile-w) !important;
        }
    }

    /* ---------------------
    -----------------------------------------------------
    9. Accessibility: Reduced Motion (WCAG 2.2.2 & 2.3.3)
    -------------------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.001s !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001s !important;
        }

        .about-marquee-track {
            animation: none !important;
            transform: none !important;
        }

        .about-polaroid-item {
            transform: none !important;
        }

        .about-polaroid-item:hover,
        .about-polaroid-item:focus-within {
            transform: none !important;
        }

        .about-jump-nav-bar.is-sticky {
            animation: none !important;
        }
    }