.elementor-1520 .elementor-element.elementor-element-ba2281b{--display:flex;}.elementor-1520 .elementor-element.elementor-element-ddee93a{--display:flex;}.elementor-1520 .elementor-element.elementor-element-c464d15{--display:flex;}.elementor-1520 .elementor-element.elementor-element-71eca22{--display:flex;}.elementor-1520 .elementor-element.elementor-element-810c0da{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2ef5999 */<style>
    /* 1. ANIMATION ENGINE */
    .animate-protocol-fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform, opacity;
    }
    .scroll-trigger-protocol.is-visible .animate-protocol-fade-up {
        opacity: 1;
        transform: translateY(0);
    }
    .style-delay-1 { transition-delay: 0.05s; }
    .style-delay-2 { transition-delay: 0.2s; }
    .style-delay-3 { transition-delay: 0.35s; }

    /* 2. STRUCTURAL LAYOUT */
    .protocol-section { background: #F5F1EC; padding: 120px 7%; border-bottom: 1px solid #CBBFB3; }
    .protocol-container { max-width: 1400px; margin: 0 auto; }
    
    .protocol-header { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: flex-end; margin-bottom: 70px; }
    .protocol-eyebrow { display: block; margin-bottom: 20px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; color: #BFA38F; font-weight: 600; }
    .protocol-main-heading { font-size: 2.6rem; font-weight: 300; line-height: 1.2; color: #5A4A42; margin: 0; }
    .protocol-intro-text { font-size: 1.1rem; line-height: 1.7; color: #6F625A; margin: 0; padding-bottom: 5px; }
    .protocol-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

    /* 3. CARD ARCHITECTURE */
    .product-card { background: #E8DFD6; border: 1px solid rgba(203, 191, 179, 0.4); padding: 35px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.4s ease; }
    .card-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(203, 191, 179, 0.5); }
    .phase-number { font-size: 0.85rem; letter-spacing: 0.2em; color: #5A4A42; font-weight: 600; }

    /* 4. DOT MARKER LOGIC */
    .c-marker { border-radius: 50% !important; background-color: #CBBFB3 !important; display: block !important; transform: scale(1) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease !important; }
    .c-size-l { width: 20px !important; height: 20px !important; }
    .c-size-m { width: 15px !important; height: 15px !important; }
    .c-size-s { width: 10px !important; height: 10px !important; }

    /* 5. IMAGE & HOVER INTERACTION */
    .product-image-box { width: 100%; position: relative; padding-bottom: 66%; overflow: hidden; margin-bottom: 30px; border: 1px solid rgba(203, 191, 179, 0.2); }
    .product-image-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .product-details h3 { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #5A4A42; margin: 0 0 15px 0; font-weight: 600; transition: color 0.3s ease; }
    .product-details p { font-size: 0.95rem; color: #6F625A; line-height: 1.6; font-weight: 300; margin: 0 0 45px 0; }
    .view-details-link { display: flex; justify-content: space-between; align-items: center; text-decoration: none !important; color: #5A4A42 !important; font-size: 0.8rem; letter-spacing: 0.15em; font-weight: 600; text-transform: uppercase; padding-top: 15px; border-top: 1px solid rgba(203, 191, 179, 0.4); }

    /* HOVER CHAIN */
    .product-card:hover { background-color: #fcfbfa; border-color: #5A4A42; box-shadow: 0 20px 40px rgba(90, 74, 66, 0.04); }
    .product-card:hover .c-marker { background-color: #5A4A42 !important; transform: scale(1.25) !important; }
    .product-card:hover .product-image-box img { transform: scale(1.04); }
    .product-card:hover .product-details h3 { color: #BFA38F; }
    .product-card:hover .view-details-link .arrow { transform: translateX(6px); }

    /* RESPONSIVE */
    @media (max-width: 900px) { .protocol-cards-grid { grid-template-columns: 1fr; } }
</style>/* End custom CSS */