.IconProductMid01 {
    opacity: 0.3;
}
.IconProductMid02 {
    opacity: 1;
    transform: scale(1.3);
    transition: all 0.5s;
}
.IconProductMid03 {
    display: none;
}

/* Blog AJAX Loading */
.blog-articles-grid {
    position: relative;
}
.blog-articles-grid.loading {
    opacity: 0.6;
    pointer-events: none;
}
.blog-articles-grid.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0FAEE8;
    border-radius: 50%;
    animation: blog-spin 1s linear infinite;
}
@keyframes blog-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.video-card {
    width: 100%;
    max-width: 700px;
    margin: 20px auto 0px auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
    padding-bottom: 0px;
}
.video-card video {
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 826;
    display: block;
    object-fit: cover;
}
@media (max-width: 760px) {
    .tp-silder-acive-3:not(.slick-initialized) {
        height: 180px;
        overflow: hidden;
    }
}
@media (min-width: 761px) and (max-width: 970px) {
    .tp-silder-acive-3:not(.slick-initialized) {
        height: 560px;
        overflow: hidden;
    }
}
@media (min-width: 971px) {
    .tp-silder-acive-3:not(.slick-initialized) {
        height: 510px;
        overflow: hidden;
    }
}
.Style_Header {
    transition: transform 0.3s ease;
}
.Style_Header:hover {
    text-shadow: 1px 1px #dcdcdc;
    color: dodgerblue;
}
.Style_Header_Product {
    transition: transform 0.3s ease;
}
.submenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0px;
    width: 102.65px;
    height: 10px;
    background: #171717;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.prd_short_descript{
    margin-left:10px;
}
.req_a_demo_btn{

}


.mobile-accordion.is-active .tp-ab-info{
    padding-left:0px !important;

}



@media (max-width: 800px) {
    #IconProductId_All {
        display: none !important;
    }
    .video-card{
        margin: 0px auto 0px auto;
        border-radius:0px;
        border-top-right-radius: 13px;
        border-top-left-radius: 13px;

    }
    .tp-ab-section {
        padding-top:0px !important;
        /*overflow: hidden;*/
        height: 90px;
        transition: max-height 0.9s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        border-radius: 14px;
        margin: 0 12px 35px 12px;
        background: linear-gradient(135deg, #f9fcff, #ffffff);
        box-shadow: 0 0px 5px rgba(23, 23, 23, 0.2);
        cursor: pointer;
    }
    .tp-ab-section.is-active {
        height:unset;
        max-height: 3000px;
        border-color: #171717;
        box-shadow: 0 0px 6px rgba(23, 23, 23, 0.4);
        background: linear-gradient(135deg, #f2f9ff, #ffffff);
    }
    .tp-ab-info{
        padding-top:10px;
        padding-left:14px;
    }
    .tp-ab-info > div:first-child {
        padding: 5px 0px;
        position: relative;
    }
    .tp-ab-subtitle span {
        font-size: 10px;
        font-weight: 500;
        color: #005790;
        text-transform: uppercase;
        letter-spacing: 0px;
    }
    .tp-ab-title {
        margin: -10px 0 10px 0;
        font-size: 27px;
        font-weight: 600;
        color: #005790;
    }
    .tp-ab-info > div:first-child::after {
        content: "+";
        position: absolute;
        right: 0px;
        top: 20px;
        /*transform: translateY(-50%);*/
        font-size: 24px;
        font-weight: 600;
        color: #171717;
        transition: transform 0.3s ease;
    }
    .tp-ab-info p {
        margin-bottom: 0;
    }
    .tp-ab-section.is-active .tp-ab-info > div:first-child::after {
        content: "";
        transform: translateY(-50%) rotate(180deg);
    }

    .tp-ab-section:not(.is-active) .prd_short_descript,
    .tp-ab-section:not(.is-active) .tp-btn,
    .tp-ab-section:not(.is-active) .req_a_demo_btn,
    .tp-ab-section:not(.is-active) .postbox__thumb {
        display: none !important;
    }

    .prd_short_descript {
        padding: 0; 
        font-size: 13.5px !important;
        color: #2b2b2b;
        line-height: 1.6;
        margin-left:0px;
    }
    .tp-btn{
        margin: 10px 0px 0px 0px;
        border-radius: 10px;
        font-size: 13px;
    }
    .req_a_demo_btn {
        padding:15px 20px;
        margin: 15px 0px 15px 0px;
        border-radius: 10px;
        font-size: 13px;
    }
}
.tp-ab-section:not(.is-active) > div:first-child {
    padding-bottom: 25px;
}
.tp-ab-section {
    padding-top: 30px;
}
.tp-ab-section:not(.is-active) .tp-ab-info > div:first-child {
    padding: 0px 40px 6px 80px;
}
.tp-ab-section:not(.is-active) .tp-ab-subtitle {
    margin-bottom: 0px;
}
.tp-ab-section:not(.is-active) .tp-ab-title {
    padding: 2px 0px 8px 80px;
    font-size: 17px;
}

.accordion-icon {
    width: 120px;
    height: auto;
    position: absolute;
    top: -8px;
    left: -5px;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.tp-ab-section:not(.is-active) > div:first-child {
    padding-bottom: 0;
    filter: brightness(0.97) contrast(1) saturate(2.5);
}
.tp-ab-section.is-active .accordion-icon {
    opacity: 0;
    pointer-events: none;
}

.mobile-accordion {
    display: none;
}

@media (max-width: 800px) {
    .mobile-accordion {
        display: block;
    }
}

.grid-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    justify-items: center;
    margin-top: 10px;
}

.grid-item {
    width: 140px;
    height: auto;
}
.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1100px) {
    .grid-team {
        grid-template-columns: repeat(auto-fit, 120px);
    }

    .grid-item {
        width: 140px;
    }
    .grid-item img {
        width: 80%;
        height: auto;
    }
    .tp-team__info {
        text-align: center;
        font-size: 13px;
    }
}
/* The desktop icon switcher must stay available for as long as the compact
   accordion is inactive. The accordion only takes over at max-width: 800px
   (see ".mobile-accordion" above), so hiding this grid at 990px left the
   801-990px range with a single visible product and no way to switch.
   The grid is therefore hidden only where the accordion is active. */
.my-style_Text {
    color: #000;
    font-size: 12px;
    text-align: center;
    padding: 20px 0px 0px 0px;
}
.my-hover-img {
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: brightness(0.97) contrast(1) saturate(1.4) drop-shadow(0 10px 16px rgba(0,0,0,0.2));
}
.my-hover-img:hover {
    transform: scale(1.1);
}
.my-hover_None {
}

.my-hover_None:hover {
    transform: scale(1);
}

[id^="contactSlide"] {
    display: block;
    height: 0;
    scroll-margin-top: 110px;
}

#contact.tp-contact-area {
    scroll-margin-top: 110px;
}

/* ==========================================
   PRICING TABLE - Fully Responsive
   ========================================== */
.pricing-section {
    width: 100%;
    padding: 45px 20px;
    box-sizing: border-box;
}

.pricing-container {
    max-width: 1180px;
    margin: 0 auto;
}

.pricing-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #263746;
    margin-bottom: 30px;
}

.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 476px;
    font-family: inherit;
}

.pricing-table th,
.pricing-table td {
    padding: 17px 20px;
    text-align: center;
    border-right: 1px solid #e6e9ec;
    border-bottom: 1px solid #e6e9ec;
    vertical-align: middle;
}

.pricing-table th:last-child,
.pricing-table td:last-child {
    border-right: none;
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table thead th {
    background: #d2d2d2;
    color: #273746;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-table tbody td {
    color: #687681;
    font-size: 20px;
}

.pricing-table tbody tr {
    transition: background 0.2s ease;
}

.pricing-table tbody tr:hover {
    background: #fafbfc;
}

.product-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
    font-weight: 500;
    color: #465560;
    justify-content: flex-start;
    padding-left: 16px;
}

.product-name-link {
    color: #273746;
    text-decoration: none;
    font-size: inherit;
    font-weight: 600;
    transition: color 0.2s ease;
}

.product-name-link:hover {
    color: #0064B8;
    text-decoration: underline;
}

.product-slogan {
    font-size: 13px;
    font-weight: 400;
    color: #8899a6;
    line-height: 1.4;
    margin-top: 2px;
}

/* Custom Checkbox */
.product-check {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #aab4bc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.product-check:hover {
    border-color: #55758d;
}

.product-check:checked {
    background: #344f63;
    border-color: #344f63;
    position: relative;
}

.product-check:checked::after {
    content: "✓";
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
}

.product-check:focus-visible {
    outline: 2px solid #0064B8;
    outline-offset: 2px;
}

/* Price checkbox (next to each price) */
.price-check {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #aab4bc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.price-check:hover {
    border-color: #55758d;
}

.price-check:checked {
    background: #344f63;
    border-color: #344f63;
}

.price-check::after {
    content: "✓";
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.price-check:checked::after {
    opacity: 1;
    transform: scale(1);
}

.price-check:focus-visible {
    outline: 2px solid #0064B8;
    outline-offset: 2px;
}

.price-check:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.price-disabled .price-wrapper {
    opacity: 0.5;
}

.price-disabled .price-current,
.price-disabled .price-original,
.price-disabled .price-arrow,
.price-disabled .price-special {
    color: #aab4bc !important;
}

/* Price cell */
.price-cell {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.price-wrapper {
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.price-original {
    font-size: 14px;
    color: #aab4bc;
    text-decoration: line-through;
    font-weight: 400;
}

.price-arrow {
    font-size: 14px;
    color: #8899a6;
    font-weight: 500;
}

.price-current {
    font-size: 18px;
    font-weight: 600;
    color: #273746;
}

.price-special {
    font-size: 10px;
    color: #e74c3c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Invoice / Summary Section */
.pricing-invoice {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    max-width: 500px;
    margin-right: auto;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.pricing-invoice.visible {
    opacity: 1;
    max-height: 500px;
    padding: 24px;
    margin-top: 24px;
}

.invoice-title {
    font-size: 20px;
    font-weight: 700;
    color: #273746;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e1e5e9;
}

.invoice-items {
    min-height: 60px;
    margin-bottom: 16px;
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #465560;
}

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

.invoice-item-name {
    font-weight: 500;
}

.invoice-item-price {
    font-weight: 600;
    color: #273746;
}

.invoice-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #58d6ca;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.btn-buy-invoice {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    background: #299713;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-buy-invoice:hover {
    background: #207a0f;
}

.btn-buy-invoice:focus-visible {
    outline: 2px solid #0064B8;
    outline-offset: 2px;
}

/* RESPONSIVE: Tablet (<= 1024px) */
@media (max-width: 1024px) {
    .pricing-section { padding: 40px 16px; }
    .pricing-title { font-size: 28px; }
    .pricing-table th,
    .pricing-table td { padding: 15px 16px; font-size: 13px; }
    .pricing-table thead th { font-size: 13px; }
    .product-cell { gap: 10px; }
    .pricing-invoice { padding: 20px; margin-top: 20px; }
    .invoice-title { font-size: 18px; }
    .invoice-item { font-size: 14px; padding: 8px 10px; }
    .invoice-total { font-size: 16px; padding: 12px 14px; }
    .btn-buy-invoice { padding: 12px 20px; font-size: 15px; }
}

/* RESPONSIVE: Mobile (<= 768px) - Card Layout */
@media (max-width: 768px) {
    .pricing-section { padding: 24px 12px; }
    .pricing-title { font-size: 22px; margin-bottom: 18px; }
    .pricing-container { padding: 0; }

    /* Hide table header on mobile */
    .pricing-table thead { display: none; }

    /* Convert table to card layout */
    .pricing-table-wrapper {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .pricing-table,
    .pricing-table tbody {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e1e5e9;
        border-radius: 12px;
        margin: 0 0 14px 0;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .pricing-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #f0f2f5;
        text-align: left;
        font-size: 14px;
        color: #465560;
    }

    .pricing-table td:last-child {
        border-bottom: none;
    }

    .pricing-table td::before {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #8899a6;
        margin: 0 0 2px 0;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Product cell - full width, prominent */
    .pricing-table td:first-child {
        padding: 0 0 14px 0;
        border-bottom: 2px solid #d2d2d2;
        margin-bottom: 6px;
    }

    .pricing-table td:first-child::before {
        display: none;
    }

    .product-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 20px;
        font-weight: 600;
        color: #273746;
        white-space: normal;
        justify-content: flex-start;
        padding-left: 16px;
    }

    .product-check {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        border-width: 2px;
    }

    .price-check {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Price cells - horizontal row: label left, checkbox+price right */
    .pricing-table td:nth-child(n+2)::before {
        content: attr(data-label);
        font-size: 11px;
        color: #8899a6;
        font-weight: 500;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        flex-shrink: 0;
        padding-right: 12px;
    }

    .pricing-table td:nth-child(n+2) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
    }

    .pricing-table td:nth-child(n+2) .price-cell {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-original {
        font-size: 12px;
    }

    .pricing-table td:nth-child(n+2) .price-arrow {
        font-size: 12px;
    }

    .pricing-table td:nth-child(n+2) .price-current {
        font-size: 15px;
        font-weight: 500;
        color: #273746;
    }

    .pricing-table td:nth-child(n+2) .price-special {
        font-size: 10px;
    }

    .pricing-table td:nth-child(n+2) > *:last-child {
        font-size: 14px;
        font-weight: 500;
        color: #273746;
        width: 100%;
        text-align: left;
    }

    .pricing-invoice { padding: 16px; margin-top: 16px; }
    .invoice-title { font-size: 18px; margin-bottom: 12px; }
    .invoice-item { font-size: 14px; padding: 8px 10px; }
    .invoice-total { font-size: 16px; padding: 12px 14px; }
    .btn-buy-invoice { padding: 12px 20px; font-size: 15px; }
}

/* RESPONSIVE: Small Mobile (<= 480px) */
@media (max-width: 480px) {
    .pricing-section { padding: 20px 10px; }
    .pricing-title { font-size: 20px; margin-bottom: 14px; }
    .pricing-container { padding: 0; }

    .pricing-table-wrapper {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing-table,
    .pricing-table tbody {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e1e5e9;
        border-radius: 10px;
        margin: 0 0 12px 0;
        padding: 14px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .pricing-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f2f5;
        text-align: left;
        font-size: 13px;
        color: #465560;
    }

    .pricing-table td:last-child {
        border-bottom: none;
    }

    .pricing-table td::before {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #8899a6;
        margin: 0 0 2px 0;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Product cell - full width, left aligned */
    .pricing-table td:first-child {
        padding: 0 0 12px 0;
        border-bottom: 2px solid #f0f2f5;
        margin-bottom: 4px;
    }

    .pricing-table td:first-child::before {
        display: none;
    }

    .product-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 14px;
        font-weight: 600;
        color: #273746;
        white-space: normal;
        justify-content: flex-start;
        padding-left: 14px;
    }

    .product-check {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-width: 2px;
    }

    .price-check {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Price cells - horizontal row: label left, checkbox+price right */
    .pricing-table td:nth-child(n+2)::before {
        content: attr(data-label);
        font-size: 10px;
        color: #8899a6;
        font-weight: 500;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        flex-shrink: 0;
        padding-right: 10px;
    }

    .pricing-table td:nth-child(n+2) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
    }

    .pricing-table td:nth-child(n+2) .price-cell {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-original {
        font-size: 11px;
    }

    .pricing-table td:nth-child(n+2) .price-arrow {
        font-size: 11px;
    }

    .pricing-table td:nth-child(n+2) .price-current {
        font-size: 14px;
        font-weight: 500;
        color: #273746;
    }

    .pricing-table td:nth-child(n+2) .price-special {
        font-size: 10px;
    }

    .pricing-table td:nth-child(n+2) > *:last-child {
        font-size: 13px;
        font-weight: 500;
        color: #273746;
        width: 100%;
        text-align: left;
    }

    .pricing-invoice { padding: 14px; margin-top: 14px; }
    .invoice-title { font-size: 16px; margin-bottom: 10px; }
    .invoice-item { font-size: 13px; padding: 6px 8px; }
    .invoice-total { font-size: 15px; padding: 10px 12px; }
    .btn-buy-invoice { padding: 11px 18px; font-size: 14px; }
}

/* RESPONSIVE: iPhone 13 / 390px viewport */
@media (max-width: 390px) {
    .pricing-section { padding: 16px 8px; }
    .pricing-title { font-size: 18px; margin-bottom: 12px; }
    .pricing-container { padding: 0; }

    .pricing-table-wrapper {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing-table,
    .pricing-table tbody {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e1e5e9;
        border-radius: 8px;
        margin: 0 0 10px 0;
        padding: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .pricing-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f2f5;
        text-align: left;
        font-size: 12px;
        color: #465560;
    }

    .pricing-table td:last-child {
        border-bottom: none;
    }

    .pricing-table td::before {
        display: block;
        font-size: 10px;
        font-weight: 600;
        color: #8899a6;
        margin: 0 0 2px 0;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Product cell - full width, left aligned */
    .pricing-table td:first-child {
        padding: 0 0 12px 0;
        border-bottom: 2px solid #f0f2f5;
        margin-bottom: 4px;
    }

    .pricing-table td:first-child::before {
        display: none;
    }

    .product-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 13px;
        font-weight: 600;
        color: #273746;
        white-space: normal;
        justify-content: flex-start;
        padding-left: 12px;
    }

    .product-check {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-width: 2px;
    }

    .price-check {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Price cells - horizontal row: label left, checkbox+price right */
    .pricing-table td:nth-child(n+2)::before {
        content: attr(data-label);
        font-size: 10px;
        color: #8899a6;
        font-weight: 500;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        flex-shrink: 0;
        padding-right: 8px;
    }

    .pricing-table td:nth-child(n+2) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 0;
    }

    .pricing-table td:nth-child(n+2) .price-cell {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
        width: auto;
    }

    .pricing-table td:nth-child(n+2) .price-original {
        font-size: 10px;
    }

    .pricing-table td:nth-child(n+2) .price-arrow {
        font-size: 10px;
    }

    .pricing-table td:nth-child(n+2) .price-current {
        font-size: 13px;
        font-weight: 500;
        color: #273746;
    }

    .pricing-table td:nth-child(n+2) .price-special {
        font-size: 10px;
    }

    .pricing-table td:nth-child(n+2) > *:last-child {
        font-size: 12px;
        font-weight: 500;
        color: #273746;
        width: 100%;
        text-align: left;
    }

    .pricing-invoice { padding: 12px; margin-top: 12px; }
    .invoice-title { font-size: 15px; margin-bottom: 8px; }
    .invoice-item { font-size: 12px; padding: 6px 8px; }
    .invoice-total { font-size: 14px; padding: 10px 12px; }
    .btn-buy-invoice { padding: 10px 16px; font-size: 13px; }
}

/* Accessibility */
@media (prefers-contrast: high) {
    .product-check { border-width: 3px; }
    .pricing-table th,
    .pricing-table td { border-color: #000; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-table tbody tr,
    .product-check { transition: none; }
    
}

/* Lazy Loading Styles - Manual (data-src) */
img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: #f5f5f5;
    min-height: 100px; /* Prevent layout shift */
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-error {
    opacity: 0.5;
    background-color: #ffeaea;
}

[data-bg-src] {
    background-image: none !important;
    min-height: 200px; /* Prevent layout shift for backgrounds */
}

[data-bg-src].bg-loaded {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bg-src].bg-error {
    background-color: #ffeaea;
}

/* Lazy Loading Styles - Automatic (global) */
img.lazy-auto {
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: #f5f5f5;
    min-height: 100px; /* Prevent layout shift */
}

img.lazy-auto.lazy-loaded {
    opacity: 1;
}

img.lazy-auto.lazy-error {
    opacity: 0.5;
    background-color: #ffeaea;
}

[data-bg-processed] {
    background-image: none !important;
    min-height: 200px; /* Prevent layout shift for backgrounds */
}

[data-bg-processed].bg-loaded {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bg-processed].bg-error {
    background-color: #ffeaea;
}

/* ==========================================
   BLOG PAGE - Compact Layout with Sidebar
   ========================================== */

/* Blog Layout Row */
.blog-layout-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* Sticky Sidebar */
.blog-sidebar-wrapper {
    position: sticky;
    top: 120px; /* Account for fixed header */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 15px;
}

@media (max-width: 991px) {
    .blog-sidebar-wrapper {
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .blog-sidebar-col {
        display: none;
    }
}

/* Category Widget */
.blog-category-widget {
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    padding: 25px;
}

@media (max-width: 767px) {
    .blog-category-widget {
        display: none;
    }
}

.blog-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-category-list li {
    margin-bottom: 8px;
}

.blog-category-list li:last-child {
    margin-bottom: 0;
}

.blog-category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 6px;
    color: var(--tp-heading-1);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-category-link:hover {
    background: var(--tp-grey-2);
    border-color: var(--tp-theme-1);
    color: var(--tp-theme-1);
}

.blog-category-link.active {
    background: #848484;
    border-color: var(--tp-theme-1);
    color: var(--tp-common-white);
}

.blog-category-link.active .cat-count {
    background: var(--tp-common-white);
    color: var(--tp-theme-1);
}

.cat-name {
    flex: 1;
    text-align: left;
    right: 70px !important;
}

.cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    background: var(--tp-grey-2);
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tp-text-body);
    transition: all 0.3s ease;
    margin-left: 12px;
}

.blog-category-link:hover .cat-count {
    background: var(--tp-theme-1);
    color: var(--tp-common-white);
}

.blog-category-link.active .cat-count {
    background: var(--tp-common-white);
    color: var(--tp-theme-1);
}

/* Sort Widget */
.blog-sort-widget {
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    padding: 25px;
}

@media (max-width: 767px) {
    .blog-sort-widget {
        padding: 20px 15px;
    }
}

.blog-sort-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--tp-border-1);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--tp-ff-body);
    color: var(--tp-text-body);
    background: var(--tp-common-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
    transition: all 0.3s ease;
}

.blog-sort-select:hover {
    border-color: var(--tp-theme-1);
}

.blog-sort-select:focus {
    outline: none;
    border-color: var(--tp-theme-1);
    box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.1);
}

/* Filter Info Bar */
.blog-filter-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--tp-grey-2);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tp-text-body);
}

.filter-label {
    font-weight: 500;
    color: var(--tp-heading-1);
}

.filter-category {
    color: var(--tp-theme-1);
    text-transform: capitalize;
}

.filter-clear {
    margin-left: auto;
    color: var(--tp-text-body);
    font-size: 13px;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.filter-clear:hover {
    color: var(--tp-theme-1);
}

/* Sort Bar - Top of Article Listing */
.blog-sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--tp-grey-2);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tp-text-body);
}

.sort-label {
    font-weight: 500;
    color: var(--tp-heading-1);
    white-space: nowrap;
}

.blog-sort-bar .blog-sort-select {
    width: auto;
    min-width: 200px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .blog-sort-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .blog-sort-bar .blog-sort-select {
        width: 100%;
        min-width: 0;
    }
}

/* Sticky Sort Bar */
.blog-sort-bar.sticky-sort {
    position: sticky;
    top: 120px;
    z-index: 100;
    background: #E5E5E5C9;
}

@media (max-width: 991px) {
    .blog-sort-bar.sticky-sort {
        position: relative;
        top: auto;
        z-index: auto;
    }
}

/* Filter Bar - Tag Filter + Sort */
.blog-filter-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    background: var(--tp-grey-2);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tp-text-body);
    flex-wrap: wrap;
}

.blog-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.blog-filter-group .sort-label {
    font-weight: 500;
    color: var(--tp-heading-1);
    white-space: nowrap;
    margin: 0;
}

.blog-filter-group .blog-sort-select {
    width: auto;
    min-width: 180px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .blog-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 10px;
    }
    .blog-filter-group {
        width: 100%;
        justify-content: space-between;
    }
    .blog-filter-group .blog-sort-select {
        width: 100%;
        min-width: 0;
        flex: 1;
    }
    /* Ensure mobile category dropdown is first in visual order */
    .blog-filter-group--mobile-category {
        order: -1;
    }
    /* Ensure dropdown options are visible and clickable */
    .blog-filter-group--mobile-category .blog-sort-select {
        min-height: 44px;
        -webkit-appearance: menulist;
        appearance: menulist;
    }
}

/* Mobile Category Dropdown - hidden on desktop */
.blog-filter-group--mobile-category {
    display: none;
}

@media (max-width: 767px) {
    .blog-filter-group--mobile-category {
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    .blog-filter-group--mobile-category .blog-sort-select {
        min-height: 44px;
        -webkit-appearance: menulist;
        appearance: menulist;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .blog-filter-group--mobile-category select option {
        display: block;
        visibility: visible;
    }
}

/* Filter Anchor for Category Click Scroll */
.blog-filter-anchor {
    scroll-margin-top: 120px; /* Account for sticky header */
}

/* Sticky Filter Bar */
.blog-filter-bar.sticky-sort {
    position: sticky;
    top: 120px;
    z-index: 50;
    background: #E5E5E5C9;
}

@media (max-width: 991px) {
    .blog-filter-bar.sticky-sort {
        position: relative;
        top: auto;
        z-index: auto;
    }
}

/* Filter Info Bar */
.blog-filter-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--tp-grey-2);
    border: 1px solid var(--tp-border-2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tp-text-body);
}

.filter-label {
    font-weight: 500;
    color: var(--tp-heading-1);
}

.filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
}

.filter-category,
.filter-tag {
    font-weight: 500;
    color: var(--tp-heading-1);
    font-size: 13px;
}

.filter-clear,
.filter-clear-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tp-border-2);
    color: var(--tp-text-body);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}

.filter-clear:hover,
.filter-clear-all:hover {
    background: var(--tp-theme-1);
    color: var(--tp-common-white);
}

.filter-clear-all {
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
}

/* Featured Article Card */
.blog-featured-card {
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.blog-featured-card__thumb {
    position: relative;
    overflow: hidden;
}

.blog-featured-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-featured-card:hover .blog-featured-card__thumb img {
    transform: scale(1.03);
}

.blog-featured-card__category {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 14px;
    background: var(--tp-theme-1);
    color: var(--tp-common-white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: var(--tp-ff-heading);
    z-index: 2;
}

.blog-featured-card__badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--tp-common-white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: var(--tp-ff-heading);
    z-index: 2;
}

.blog-featured-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 200px;
    overflow: hidden;
}

.blog-featured-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--tp-ff-heading);
    color: var(--tp-text-body);
}

.blog-featured-card__label {
    color: var(--tp-theme-1);
    font-weight: 600;
}

.blog-featured-card__meta .meta-separator {
    color: var(--tp-grey-4);
}

.blog-featured-card__date {
    color: var(--tp-text-body);
}

.blog-featured-card__title {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--tp-heading-1);
    font-family: var(--tp-ff-heading);
    max-width: 345px;
    display: inline-block;
}

.blog-featured-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--tp-theme-1), var(--tp-theme-1)), linear-gradient(var(--tp-theme-1), var(--tp-theme-1));
    display: inline-block;
    background-size: 0% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
    max-width: 100%;
}

.blog-featured-card__title a:hover {
    color: var(--tp-theme-1);
    background-size: 0 2px, 100% 2px;
}

.blog-featured-card__excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tp-text-body);
    margin-bottom: 16px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-featured-card__link {
    align-self: flex-start;
}

@media (max-width: 1199px) {
    .blog-featured-card {
        min-height: 380px;
    }
    .blog-featured-card__content {
        padding: 20px;
        max-height: 200px;
    }
    .blog-featured-card__title {
        font-size: 24px;
    }
    .blog-featured-card__excerpt {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .blog-featured-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .blog-featured-card__thumb {
        aspect-ratio: 16 / 9;
    }
    .blog-featured-card__content {
        padding: 20px;
        max-height: 200px;
    }
    .blog-featured-card__title {
        font-size: 22px;
    }
    .blog-featured-card__excerpt {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .blog-featured-card {
        border-radius: 12px;
    }
    .blog-featured-card__content {
        padding: 20px;
        max-height: 200px;
    }
    .blog-featured-card__title {
        font-size: 20px;
    }
    .blog-featured-card__excerpt {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .blog-featured-card__meta {
        margin-bottom: 6px;
        font-size: 10px;
    }
    .blog-featured-card__category,
    .blog-featured-card__badge {
        top: 12px;
        padding: 4px 10px;
        font-size: 10px;
    }
    .blog-featured-card__badge {
        right: 12px;
    }
}

/* Hero Card (Latest Post Banner) */
.blog-hero-card {
    display: flex;
    flex-direction: row;
    width: 1300px;
    margin: 0 auto 30px;
    height: 200px;
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 16px;
    overflow: hidden;
}

.blog-hero-card .blog-card__thumb {
    position: relative;
    width: 50%;
    min-width: 350px;
    flex-shrink: 0;
    overflow: hidden;
}

.blog-hero-card .blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-hero-card:hover .blog-card__thumb img {
    transform: scale(1.05);
}

.blog-hero-card .blog-card__category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--tp-theme-1);
    color: var(--tp-common-white);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.blog-hero-card .blog-card__content {
    width: 50%;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-hero-card .blog-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 12px;
}

.blog-hero-card .blog-card__title a {
    color: var(--tp-heading-1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-hero-card .blog-card__title a:hover {
    color: var(--tp-theme-1);
}

.blog-hero-card .blog-card__link {
    align-self: flex-start;
}

@media (max-width: 1399px) {
    .blog-hero-card {
        width: 100%;
        max-width: 1300px;
    }
}

@media (max-width: 991px) {
    .blog-hero-card {
        flex-direction: column;
        height: auto;
        min-height: 280px;
        margin-bottom: 24px;
        width: 100%;
    }
    .blog-hero-card .blog-card__thumb {
        width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 9;
    }
    .blog-hero-card .blog-card__content {
        width: 100%;
        padding: 20px 24px;
    }
    .blog-hero-card .blog-card__title {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

@media (max-width: 767px) {
    .blog-hero-card {
        border-radius: 12px;
        min-height: 260px;
        margin-bottom: 20px;
    }
    .blog-hero-card .blog-card__thumb {
        aspect-ratio: 16 / 9;
    }
    .blog-hero-card .blog-card__content {
        padding: 16px 20px;
    }
    .blog-hero-card .blog-card__title {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .blog-hero-card .blog-card__category {
        top: 12px;
        left: 12px;
        padding: 5px 12px;
        font-size: 11px;
    }
}

/* Articles Grid */
.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Smooth filter/sort transitions */
.blog-articles-grid.filtering {
    opacity: 0.4;
    pointer-events: none;
}

.blog-card.is-filtered-out {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.blog-card.is-filtered-in {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
}

.blog-card.is-filtered-in.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (max-width: 1399px) {
    .blog-articles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 991px) {
    .blog-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .blog-articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Blog Card - Compact */
.blog-card {
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--tp-border-1);
}

.blog-card__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 15 / 10;
}

.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card__thumb img {
    transform: scale(1.05);
}

.blog-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: #5F5F5FE5;
    color: var(--tp-common-white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: var(--tp-ff-heading);
}

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

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--tp-ff-heading);
    color: var(--tp-text-body);
}

.blog-card__label {
    color: var(--tp-theme-1);
    font-weight: 600;
}

.meta-separator {
    color: var(--tp-grey-4);
}

.blog-card__date {
    color: var(--tp-text-body);
}

.blog-card__title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--tp-heading-1);
    font-family: var(--tp-ff-heading);
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--tp-theme-1), var(--tp-theme-1)), linear-gradient(var(--tp-theme-1), var(--tp-theme-1));
    display: inline;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
}

.blog-card__title a:hover {
    color: var(--tp-theme-1);
    background-size: 0 1px, 100% 1px;
}

.blog-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tp-text-body);
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__link {
    align-self: flex-start;
    margin-top: auto;
}

/* No Articles State */
.blog-no-articles {
    grid-column: 1 / -1;
    padding: 60px 20px;
}

.blog-no-articles p {
    margin-bottom: 20px;
    color: var(--tp-text-body);
    font-size: 16px;
}

/* Responsive adjustments for sidebar on tablet */
@media (min-width: 992px) and (max-width: 1199px) {
    .blog-sidebar-wrapper {
        padding-right: 10px;
    }
    .blog-category-widget,
    .blog-sort-widget {
        padding: 20px;
    }
}

/* Print styles for blog cards */
@media print {
    .blog-sidebar-wrapper {
        display: none;
    }
    .blog-articles-grid {
        display: block;
    }
    .blog-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }
    .blog-card__thumb {
        display: none;
    }
}

/* Focus visible for accessibility */
.blog-category-link:focus-visible,
.blog-sort-select:focus-visible,
.blog-card__title a:focus-visible,
.blog-card__link:focus-visible {
    outline: 2px solid var(--tp-theme-1);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__thumb img,
    .blog-category-link,
    .blog-card__title a {
        transition: none;
    }
    .blog-card:hover {
        transform: none;
    }
    .blog-card:hover .blog-card__thumb img {
        transform: none;
    }
    .blog-category-link:hover {
        transform: none;
    }
}

/* ==========================================
   PROJECT SERVICES PAGE
   ========================================== */

/* ----------------------------------------
   1. Sections
   ---------------------------------------- */
.ps-section {
    padding: 20px 0;
    position: relative;
}

.ps-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #313131;
    margin-bottom: 0;
    /* Comfortable reading measure for lead paragraphs on wide screens */
    max-width: 760px;
}

/* ----------------------------------------
   2. Section headings
   ---------------------------------------- */
.ps-heading {
    margin-bottom: 30px;
}

.ps-heading__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--tp-ff-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #0064B8;
    margin-bottom: 16px;
}

.ps-heading__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 36px;
    height: 2px;
    background: #0064B8;
}

.ps-heading__title {
    font-family: var(--tp-ff-heading);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: #2d2d2d;
    margin: 0;
    max-width: 820px;
    /* Long section headings (e.g. the CTA) must never force overflow */
    overflow-wrap: break-word;
}

/* ----------------------------------------
   3. Image placeholders
   ---------------------------------------- */
.ps-media {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f0f2f5;
    background-image:
        linear-gradient(135deg, rgba(0, 100, 184, 0.07) 0%, rgba(39, 55, 70, 0.10) 100%),
        repeating-linear-gradient(0deg, rgba(39, 55, 70, 0.05) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(39, 55, 70, 0.05) 0 1px, transparent 1px 34px);
}

.ps-media i {
    font-size: 38px;
    color: #0064B8;
    opacity: 0.5;
    line-height: 1;
}

.ps-media__label {
    font-family: var(--tp-ff-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aab4bc;
    line-height: 1;
}

.ps-media--intro {
    aspect-ratio: 3 / 2;
}

.ps-media--card {
    aspect-ratio: 16 / 10;
}

.ps-media--disc {
    aspect-ratio: 4 / 3;
}

.ps-media--filled img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------
   4. Services grid
   ---------------------------------------- */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
}

.ps-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background:#eee;
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.ps-card--wide {
    grid-column: span 3;
}

.ps-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--tp-border-1);
}

.ps-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 35px;
}

.ps-card__num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tp-ff-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #0064B8;
    margin-bottom: 14px;
}

.ps-card__num::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    background: #e1e5e9;
}

.ps-card__title {
    font-family: var(--tp-ff-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tp-heading-1);
    margin-bottom: 14px;
}

.ps-card__text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--tp-text-body);
    margin-bottom: 0;
}

/* ----------------------------------------
   4b. Engineering Technology highlight card
   ---------------------------------------- */
.ps-tech {
    margin-top: 0;
    padding: 40px 45px;
    background: var(--tp-heading-1);
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}

.ps-tech__eyebrow {
    color: #7fb3e0;
}

.ps-tech__eyebrow::before {
    background: #7fb3e0;
}

.ps-tech__title {
    font-family: var(--tp-ff-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tp-common-white);
    margin: 0 0 14px;
}

.ps-tech__text {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    max-width: 800px;
    margin: 0 0 20px;
}

.ps-tech__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 40px;
    max-width: 800px;
}

.ps-tech__list li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.ps-tech__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 2px;
    background: #7fb3e0;
}

/* ----------------------------------------
   4c. Professional Engineering note callout
   ---------------------------------------- */
.ps-note {
    margin-top: 20px;
    padding: 18px 22px;
    background: #f8f9fa;
    border: 1px solid var(--tp-border-2);
    border-left: 3px solid #0064B8;
    border-radius: 8px;
}

.ps-note strong {
    display: block;
    font-family: var(--tp-ff-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-heading-1);
    margin-bottom: 6px;
}

.ps-note p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--tp-text-body);
}

/* Trust strip: centered card content */
.ps-trust .ps-card__body {
    text-align: center;
}

/* CTA section background */
.ps-cta {
    background: #9c9c9c;
}

/* ----------------------------------------
   5. Architecture / Structure / MEP
   ---------------------------------------- */
.ps-disc__title {
    font-family: var(--tp-ff-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--tp-heading-1);
    margin: 0 0 12px;
}

.ps-disc__text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--tp-text-body);
    margin-bottom: 0;
}

/* ----------------------------------------
   6. Project Showcase
   ---------------------------------------- */
.ps-showcase__intro {
    max-width: 430px;
    padding-top: 50px;
}

.ps-showcase__lead {
    position: relative;
    margin: 0;
    padding-left: 22px;
    font-family: var(--tp-ff-heading);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--tp-text-body);
}

.ps-showcase__lead::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 2px;
    background: #0064B8;
}

.ps-showcase__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0 0 0 22px;
}

.ps-showcase__tag {
    margin: 0;
    padding: 5px 13px;
    border: 1px solid var(--tp-border-2);
    border-radius: 999px;
    font-family: var(--tp-ff-heading);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-heading-1);
    background: #f6f8fa;
}

.ps-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
    align-items: stretch;
}

.ps-project {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background: var(--tp-common-white);
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.ps-project--lg {
    grid-column: span 1;
}

.ps-project--md {
    grid-column: span 1;
}

.ps-project--sm {
    grid-column: span 1;
}

.ps-project__media {
    flex: 1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    transition: opacity 0.35s ease;
}

.ps-project:hover .ps-project__media {
    opacity: 0.82;
}

.ps-project:focus-visible {
    outline: 2px solid #0064B8;
    outline-offset: 6px;
}

.ps-project__media.ps-media--filled {
    display: block;
}

/* Card caption typography (restored: these rules were missing) */
.ps-project__caption {
    padding: 20px 22px 24px;
}

.ps-project__cat {
    display: inline-block;
    font-family: var(--tp-ff-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0064B8;
    margin-bottom: 8px;
}

.ps-project__title {
    font-family: var(--tp-ff-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tp-heading-1);
    margin: 0;
    overflow-wrap: break-word;
}

/* ----------------------------------------
   6b. Project modal - gallery (level 1)
   ---------------------------------------- */
.ps-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ps-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.ps-lightbox__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 22, 28, 0.86);
}

.ps-lightbox__dialog {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 78vh;
    overflow-y: auto;
    /* Reserve the scrollbar gutter on BOTH edges so the content box stays
       centred inside the dialog and the image never shifts left. */
    scrollbar-gutter: stable both-edges;
    padding: 32px 34px 28px;
    background: var(--tp-common-white);
    border-radius: 12px;
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.ps-lightbox.is-open .ps-lightbox__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ps-lightbox__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f0f2f5;
    color: #171717;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.ps-lightbox__close:hover {
    background: #0064B8;
    color: #fff;
}

.ps-lightbox__body {
    padding-right: 56px;
    margin-bottom: 20px;
}

.ps-lightbox__cat {
    display: block;
    font-family: var(--tp-ff-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0064B8;
    margin-bottom: 10px;
}

.ps-lightbox__title {
    font-family: var(--tp-ff-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tp-heading-1);
    margin: 0;
}

.ps-lightbox__text {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--tp-border-2);
    font-size: 15px;
    line-height: 1.85;
    color: var(--tp-text-body);
}

/* ---- Carousel: one image visible at a time ---- */
.ps-slides {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    max-height: 46vh;
    background-color: #f0f2f5;
    background-image:
        linear-gradient(135deg, rgba(0, 100, 184, 0.07) 0%, rgba(39, 55, 70, 0.10) 100%),
        repeating-linear-gradient(0deg, rgba(39, 55, 70, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(39, 55, 70, 0.05) 0 1px, transparent 1px 32px);
}

/* Absolutely positioned so the track always fills the frame exactly,
   without relying on percentage-height resolution (which is fragile
   when the frame height comes from aspect-ratio + max-height). */
.ps-slides__track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ps-slides__item {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}
/* The image element itself is sized to the picture (auto + max constraints)
   and centred by the slide's flex rules. Because the element box IS the
   displayed image, it stays exactly centred horizontally at every viewport
   width - no dependence on object-fit letterboxing, scrollbar gutters or
   subpixel rounding. Aspect ratio and source are untouched. */
.ps-slides__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center center;
}

/* Invisible left / right click areas for Previous / Next.
   Sits below the nav buttons and dots so those stay clickable. */
.ps-slides__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    background: transparent;
    border: 0;
    padding: 0;
}

.ps-slides__zone--prev {
    left: 0;
    cursor: pointer;
}

.ps-slides__zone--next {
    right: 0;
    cursor: pointer;
}

.ps-slides__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #171717;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 22, 28, 0.18);
    transition: background 0.25s ease, color 0.25s ease;
}

.ps-slides__nav:hover {
    background: #0064B8;
    color: #fff;
}

.ps-slides__nav--prev {
    left: 12px;
}

.ps-slides__nav--next {
    right: 12px;
}

.ps-slides__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.ps-slides__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(15, 22, 28, 0.18);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ps-slides__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* [hidden] must win over display:flex */
.ps-slides__nav[hidden],
.ps-slides__dots[hidden] {
    display: none;
}

/* ----------------------------------------
   7. Responsive
   ---------------------------------------- */
@media (max-width: 1199px) {
    .ps-heading__title {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .ps-section {
        padding: 70px 0;
    }
    .ps-heading {
        margin-bottom: 40px;
    }
    .ps-heading__title {
        font-size: 34px;
    }
    .ps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ps-card,
    .ps-card--wide {
        grid-column: span 1;
    }
    .ps-showcase__intro {
        padding-top: 0;
        margin-top: 22px;
        margin-bottom: 10px;
    }
    .ps-projects {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 18px;
    }
    .ps-project,
    .ps-project--lg,
    .ps-project--md,
    .ps-project--sm {
        grid-column: span 1;
    }
    .ps-lightbox {
        padding: 26px 18px;
    }    .ps-lightbox__dialog {
        padding: 28px 26px 24px;
    }
    .ps-lightbox__body {
        padding-right: 50px;
    }
    .ps-lightbox__title {
        font-size: 22px;
    }
    .ps-lightbox__text {
        font-size: 14.5px;
    }
    .ps-slides {
        aspect-ratio: 16 / 9;
        max-height: 42vh;
    }
    .ps-slides__nav {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
    .ps-slides__nav--prev {
        left: 8px;
    }
    .ps-slides__nav--next {
        right: 8px;
    }
    /* Tablet lead/body sizing */
    .ps-lead {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .ps-section {
        padding: 20px 0;
    }
    .ps-heading {
        margin-bottom: 34px;
    }
    .ps-heading__eyebrow {
        font-size: 11px;
        letter-spacing: 0.16em;
        margin-bottom: 14px;
    }
    .ps-heading__eyebrow::before {
        width: 26px;
    }
    .ps-heading__title {
        font-size: 27px;
        line-height: 1.2;
    }
    .ps-grid {
        grid-template-columns: 1fr;
    }
    .ps-card__body {
        padding: 24px 24px 28px;
    }
    .ps-card__title {
        font-size: 18px;
    }
    .ps-projects {
        grid-template-columns: 1fr;
        gap: 22px 14px;
    }
    .ps-project,
    .ps-project--lg,
    .ps-project--md,
    .ps-project--sm {
        grid-column: span 1;
    }
    .ps-tech {
        margin-top: 0;
        padding: 28px 24px;
    }
    .ps-tech__title {
        font-size: 21px;
    }
    .ps-tech__list {
        grid-template-columns: 1fr;
    }
    .ps-lightbox {
        padding: 18px 12px;
    }
    .ps-lightbox__dialog {
        padding: 30px 20px 26px;
    }
    .ps-lightbox__close {
        width: 38px;
        height: 38px;
        font-size: 14px;
        top: 12px;
        right: 12px;
    }
    .ps-lightbox__body {
        padding-right: 44px;
        margin-bottom: 18px;
    }
    .ps-lightbox__title {
        font-size: 19px;
    }
    .ps-lightbox__text {
        font-size: 14px;
        margin-top: 18px;
        padding-top: 18px;
    }
    .ps-slides {
        aspect-ratio: 4 / 3;
        max-height: 40vh;
    }
    .ps-slides__nav {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .ps-slides__nav--prev {
        left: 6px;
    }
    .ps-slides__nav--next {
        right: 6px;
    }
    .ps-slides__dots {
        bottom: 8px;
    }
    /* Mobile typography: intentionally different scale, not a proportional shrink */
    .ps-lead {
        font-size: 15.5px;
        line-height: 1.75;
        margin-bottom: 10px;
    }
    .ps-card__text,
    .ps-disc__text {
        font-size: 14.5px;
        line-height: 1.75;
    }
    .ps-disc__title {
        font-size: 20px;
    }
    .ps-showcase__lead {
        font-size: 15px;
        line-height: 1.7;
    }
    .ps-project__cat {
        font-size: 10.5px;
    }
    .ps-project__caption {
        padding-top: 16px;
    }
    .ps-project__title {
        font-size: 17px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ps-card:hover {
        transform: none;
    }
}

/* Product Showcase (Homepage Section 4)
   One wide SIDA Pro card with the 6 product cards as a row
   at the bottom inside that same card. Card visuals reuse the
   existing blog card classes. */
/* subtle elevation for the main SIDA Pro card; reuses the same shadow
   value the site already applies to elevated cards elsewhere */
.product-showcase-card {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* SIDA Pro card content: balanced typography and spacing.
   The base .blog-featured-card__content caps itself at max-height 200px
   with overflow hidden, which clips the description, and the excerpt is
   clamped to 3 lines. Both are relaxed here so the full text fits. */
.product-showcase-card .blog-featured-card__content {
    max-height: none;
    overflow: visible;
    padding: 22px 20px;
}

.product-showcase-card .blog-featured-card__title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
    max-width: 100%;
}

.product-showcase-card .blog-featured-card__excerpt {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 14px;
    /* show the full description, no line clamp */
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    flex: 0 0 auto;
}

/* Desktop only: larger SIDA Pro title and description.
   The first breakpoint boundary in this stylesheet is 1199px, so
   1200px and up is desktop. Below that the base sizes above apply,
   so phone and tablet typography is unchanged. */
@media (min-width: 1200px) {
    .product-showcase-card .blog-featured-card__title {
        font-size: 40px;
    }

    .product-showcase-card .blog-featured-card__excerpt {
        font-size: 16px;
    }
}

/* View More: smaller and hugging its content instead of stretching.
   The span keeps its inline-block/absolute-svg structure, so the two
   arrows still overlap exactly as the button animation expects. */
.product-showcase-card .blog-featured-card__content .tp-btn-sm-black {
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.product-showcase-card .blog-featured-card__content .tp-btn-sm-black span {
    line-height: 20px;
    margin-right: 12px;
}

.product-showcase-card .blog-featured-card__content .tp-btn-sm-black span svg {
    width: 30px;
    height: 7px;
}

.product-showcase-card .blog-featured-card__content .tp-btn-sm-black span::before {
    width: 22px;
    height: 22px;
    top: -1px;
    right: -6px;
}

/* SIDA Pro image width on desktop. Scoped to this card only and kept above
   the 991px breakpoint so the existing single-column tablet/mobile layout
   is unaffected. */
@media (min-width: 992px) {
    .product-showcase-card {
        grid-template-columns: 500px 1fr;
    }
}

/* SIDA Pro image: round all four corners to match the card radius, so the
   image is clipped by its own rounded box and cannot overflow it. */
.product-showcase-card .blog-featured-card__thumb,
.product-showcase-card .blog-featured-card__thumb img {
    border-radius: 16px;
}

.product-showcase-card .product-showcase-grid {
    /* span both columns of the featured card grid */
    grid-column: 1 / -1;
    display: grid;
    /* auto-fit collapses the empty track when fewer than six products are
       active, so the cards fill the row evenly instead of sitting left with
       a gap on the right. The floor is a fraction of the grid width rather
       than a fixed px value, so the count stays at 6 across both desktop
       container widths (1140px and 1320px) and does not tip to 5 when a
       vertical scrollbar narrows the viewport. */
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 84px) / 6), 1fr));
    gap: 12px;
    /* keeps the row of small cards clear of the SIDA Pro image/content */
    margin-top: 20px;
    padding: 0 20px 20px;
}

/* sub cards sit on the white featured card, so tint them */
.product-showcase-card .blog-card {
    background: var(--tp-grey-2);
    border-color: #e7ebf2;
}

.product-showcase-card .blog-card:hover {
    border-color: #d8dfe9;
}

.product-showcase-card .blog-card__content {
    padding: 14px 12px 16px;
}

.product-showcase-card .blog-card__title {
    font-size: 13px;
    margin-bottom: 8px;
}

.product-showcase-card .blog-card__excerpt {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.product-showcase-card .tp-btn-sm-black {
    font-size: 11px;
    letter-spacing: 0.12em;
}

@media (max-width: 1199px) {
    .product-showcase-card .product-showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 991px) {
    .product-showcase-card .product-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 16px;
        padding: 0 16px 16px;
    }

    /* two cards per row have room again, restore the normal card size */
    .product-showcase-card .blog-card__content {
        padding: 20px;
    }

    .product-showcase-card .blog-card__title {
        font-size: 14px;
    }

    .product-showcase-card .blog-card__excerpt {
        font-size: 14px;
        line-height: 1.6;
    }

    .product-showcase-card .tp-btn-sm-black {
        font-size: 12px;
        letter-spacing: 0.18em;
    }
}

@media (max-width: 767px) {
    .product-showcase-card .product-showcase-grid {
        /* phones: the 6 cards form 3 rows of 2 */
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0 12px 12px;
    }

    /* Two cards share a phone row, so their internals are tightened
       again to stay readable at roughly half the previous width. */
    .product-showcase-card .blog-card__content {
        padding: 14px 12px 16px;
    }

    .product-showcase-card .blog-card__title {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .product-showcase-card .blog-card__excerpt {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .product-showcase-card .blog-card .tp-btn-sm-black {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .product-showcase-card .blog-card .tp-btn-sm-black span {
        margin-right: 8px;
    }

    .product-showcase-card .blog-card .tp-btn-sm-black span svg {
        width: 24px;
        height: 6px;
    }

    .product-showcase-card .blog-card .tp-btn-sm-black span::before {
        width: 18px;
        height: 18px;
        top: 0;
        right: -4px;
    }
}

/* ==========================================
   PROJECT SERVICES PAGE - Local Fixes
   ========================================== */

/* Unique wrapper class for page-scoped styles */
.ps-page {
  /* No base styles - just a scoping hook */
}

/* ----------------------------------------
   Task 1: CTA Button Fixes
   ---------------------------------------- */

/* Introduction section buttons */
.ps-page .ps-intro__cta .tp-slider-btn {
  background: #1a1a2e;
  color: #ffffff !important;
  border: none;
  padding: 16px 32px;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ps-page .ps-intro__cta .tp-slider-btn:hover,
.ps-page .ps-intro__cta .tp-slider-btn:focus {
  background: #0064B8;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 100, 184, 0.3);
  text-decoration: none;
}

.ps-page .ps-intro__cta .tp-slider-btn:active {
  background: #004a8c;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 100, 184, 0.3);
}

.ps-page .ps-intro__cta .tp-slider-btn:focus-visible {
  outline: 3px solid #0064B8;
  outline-offset: 3px;
}

/* Engineering Technology CTA button (same style as intro buttons) */
.ps-page .ps-tech__cta .tp-slider-btn {
  background: #1a1a2e;
  color: #ffffff !important;
  border: none;
  padding: 16px 32px;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ps-page .ps-tech__cta .tp-slider-btn:hover,
.ps-page .ps-tech__cta .tp-slider-btn:focus {
  background: #0064B8;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 100, 184, 0.3);
  text-decoration: none;
}

.ps-page .ps-tech__cta .tp-slider-btn:active {
  background: #004a8c;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 100, 184, 0.3);
}

.ps-page .ps-tech__cta .tp-slider-btn:focus-visible {
  outline: 3px solid #0064B8;
  outline-offset: 3px;
}

/*** Disable default slider button pseudo-elements for ps-tech__cta ***/
.ps-page .ps-tech__cta .tp-slider-btn span::before {
  display: none;
}

.ps-page .ps-tech__cta .tp-slider-btn span {
  margin-right: 0;
  position: static;
  color: #ffffff !important;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  display: inline-block;
}

.ps-page .ps-tech__cta .tp-slider-btn span svg,
.ps-page .ps-tech__cta .tp-slider-btn span i {
  display: none;
}

/* Engineering Technology flex layout - content and CTA side by side */
.ps-page .ps-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.ps-page .ps-tech__content {
  flex: 1 1 300px;
  min-width: 0;
}

.ps-page .ps-tech__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.ps-page .ps-tech__cta .tp-slider-btn {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ps-page .ps-tech {
    flex-direction: column;
    gap: 24px;
  }
  
  .ps-page .ps-tech__cta {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ----------------------------------------
   Task 2: Mobile CTA Button Layout Fix
   ---------------------------------------- */
/* Make intro CTA buttons side by side on all screen sizes */
.ps-page .ps-intro__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ps-page .ps-intro__cta .tp-slider-btn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  margin-right: 0 !important; /* Override mr-15 */
}

@media (max-width: 575px) {
  .ps-page .ps-intro__cta {
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .ps-page .ps-intro__cta .tp-slider-btn {
    padding: 14px 20px;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0.15em;
  }
}

@media (max-width: 430px) {
  .ps-page .ps-intro__cta .tp-slider-btn {
    padding: 12px 16px;
    font-size: 10.5px;
    line-height: 18px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 320px) {
  .ps-page .ps-intro__cta .tp-slider-btn {
    padding: 10px 12px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.1em;
  }
}

/*** Disable default slider button pseudo-elements ***/
.ps-page .ps-intro__cta .tp-slider-btn span::before {
  display: none;
}

.ps-page .ps-intro__cta .tp-slider-btn span {
  margin-right: 0;
  position: static;
  color: #ffffff !important;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  display: inline-block;
}

.ps-page .ps-intro__cta .tp-slider-btn span svg,
.ps-page .ps-intro__cta .tp-slider-btn span i {
  display: none;
}

/* CTA section button (on gray background #9c9c9c) */
.ps-page .ps-cta__btn .tp-slider-btn {
  background: #ffffff;
  color: #1a1a2e !important;
  border: 2px solid #ffffff;
  padding: 16px 32px;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ps-page .ps-cta__btn .tp-slider-btn:hover,
.ps-page .ps-cta__btn .tp-slider-btn:focus {
  background: transparent;
  color: #ffffff !important;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.ps-page .ps-cta__btn .tp-slider-btn:active {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

.ps-page .ps-cta__btn .tp-slider-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.ps-page .ps-cta__btn .tp-slider-btn span::before {
  display: none;
}

.ps-page .ps-cta__btn .tp-slider-btn span {
  margin-right: 0;
  position: static;
  color: inherit !important;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  display: inline-block;
}

.ps-page .ps-cta__btn .tp-slider-btn span svg,
.ps-page .ps-cta__btn .tp-slider-btn span i {
  display: none;
}

/* ----------------------------------------
   Task 2: Paragraph Styling - Services Overview lead paragraph
   ---------------------------------------- */
.ps-page .ps-services__lead {
  font-size: 18px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #2d2d2d;
  max-width: 720px;
  margin-top: 16px;
  margin-bottom: 10px;
  text-align: left;
}

@media (max-width: 991px) {
  .ps-page .ps-services__lead {
    font-size: 17px;
    line-height: 1.8;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .ps-page .ps-services__lead {
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.005em;
  }
}

/* ----------------------------------------
   Project Inquiry Modal (Request Demo method)
   Structure/styling reuse .demo_request_* classes from sida.css.
   New isolated classes below cover only what Demo has no equivalent for:
   side-panel title, textarea, background image, mobile height and sticky
   submit, LTR alignment, loading overlay.
   ---------------------------------------- */
#overlay_projinquiry {
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    right: 0;
    background-color: rgba(240, 249, 255, 0.90);
    z-index: 2;
    vertical-align: middle;
    text-align: center;
    backdrop-filter: grayscale(100%) blur(1px);
    border-radius: 15px;
}

.project_inquiry_modal {
    background-image: url('../images/request_demo_bg2.jpg');
    background-size: cover;
    background-position: center;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
}

.jconfirm .project_inquiry_modal div.jconfirm-content-pane {
    min-height: 0;
}

.jconfirm .project_inquiry_modal div.jconfirm-content-pane > div.jconfirm-content {
    overflow: visible;
}

#modal1_body_projinquiry1 {
    direction: ltr;
    text-align: left;
}

#modal1_body_projinquiry1 input,
#modal1_body_projinquiry1 textarea {
    text-align: left;
}

#modal1_body_projinquiry1 #projinquiry_msg {
    text-align: left;
}

.ps-project-inquiry-sticky {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.ps-project-inquiry-side__title {
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.ps-project-inquiry-desc {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

.ps-project-inquiry-sticky:focus-visible {
    outline: 3px solid #0e7c7b;
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .project_inquiry_modal {
        background-position: top center;
    }

    .project_inquiry_modal .ps-project-inquiry-side__title {
        display: none;
    }

    .ps-project-inquiry-desc {
        min-height: 90px;
    }
}

/* ----------------------------------------
   Engineering Technology CTA alignment + button match
   Positions the Discuss Your Project button on the right side,
   vertically centered with the card content (same behaviour as
   the Start a Conversation row which uses align-items-center),
   and guarantees the button is identical to the Start a
   Conversation button. Existing rules above are untouched; these
   later, higher-specificity rules win the cascade.
   ---------------------------------------- */
.ps-page .ps-tech {
  align-items: center;
}

.ps-page .ps-tech__cta {
  align-items: center;
  justify-content: flex-end;
}

/* Identical styling to the Start a Conversation button
   (mirrors .ps-page .ps-cta__btn .tp-slider-btn values) */
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn {
  background: #ffffff;
  color: #1a1a2e !important;
  border: 2px solid #ffffff;
  padding: 16px 32px;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:hover,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:focus {
  background: transparent;
  color: #ffffff !important;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:active {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Stack content and button on tablet and mobile (same lg
   breakpoint where the Start a Conversation columns stack) */
@media (max-width: 991px) {
  .ps-page .ps-tech {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .ps-page .ps-tech__cta {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ----------------------------------------
   Project Inquiry modal side image (matches Request Demo)
   Same placement (first in .demo_request_1st side panel),
   same dimensions (277px, scaling down on narrow screens),
   and same responsive behaviour inherited from the shared
   .demo_request_* classes (side text/logo hide on mobile,
   hero image stays visible). Isolated classes only; the
   original Request Demo markup and CSS are untouched.
   ---------------------------------------- */
.ps-project-inquiry-side__img img {
  width: 277px;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------
   Project Inquiry modal background (matches Request Demo)
   The jconfirm base rule (.jconfirm .jconfirm-box) sets
   `background: white`, which overrides the modal's own
   background-image on specificity. Request Demo counters
   this with !important; here a higher-specificity isolated
   selector re-asserts the same background image so both
   modals display it identically. Existing rules untouched.
   ---------------------------------------- */
.jconfirm .jconfirm-box.project_inquiry_modal {
  background-image: url('../images/request_demo_bg2.jpg');
  background-size: cover;
  background-position: center;
}

/* ----------------------------------------
   Project gallery image counter (e.g. "1 / 3")
   Top-right pill inside the slide frame, clear of the
   centred bottom dots at any slide count or viewport.
   ---------------------------------------- */
.ps-slides__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15, 22, 28, 0.55);
  color: #ffffff;
  font-family: var(--tp-ff-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  white-space: nowrap;
}

/* [hidden] must win for the counter and click zones */
.ps-slides__count[hidden],
.ps-slides__zone[hidden] {
  display: none;
}

/* ----------------------------------------
   Gallery stability: no shifting between slides
   1. Slide images fill the frame (element box is always
      exactly the frame size, even before load) while
      object-fit: cover fills the frame, cropping overflow
      evenly around the centre. Nothing reflows.
   2. Counter keeps a fixed width (tabular numerals).
   3. Lightbox uses dynamic viewport height so mobile
      browser chrome cannot move the centred dialog.
   4. Mobile safe-area insets respected.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-slides__item img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}

.ps-slides__count {
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: center;
}

.ps-lightbox {
  height: 100vh;
  height: 100dvh;
}

@media (max-width: 767px) {
  .ps-lightbox {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* ----------------------------------------
   Caption over image + bottom shadow overlay
   The caption is absolutely positioned over the lower
   part of the slide frame, above a gradient shadow that
   keeps text readable on any image. It reserves bottom
   clearance for the dots row and never affects layout
   (absolute, pointer-events none so zone clicks pass).
   Moving the caption inside the frame also lets the whole
   slider fit inside the dialog without extra height.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-slides::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  max-height: 190px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 17, 23, 0.75) 0%, rgba(10, 17, 23, 0) 100%);
}

.ps-slides .ps-lightbox__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  border: 0;
  padding: 12px 18px 36px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767px) {
  .ps-slides .ps-lightbox__text {
    font-size: 13px;
    padding: 10px 12px 34px;
  }
}

/* ----------------------------------------
   Darker bottom shadow + left-aligned caption
   Strengthens the gradient overlay for visibility on
   bright images and aligns caption text to the left.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-slides::after {
  height: 55%;
  max-height: 240px;
  background: linear-gradient(to top, rgba(8, 14, 19, 0.92) 0%, rgba(8, 14, 19, 0.45) 45%, rgba(8, 14, 19, 0) 100%);
}

.ps-slides .ps-lightbox__text {
  text-align: left;
}

/* ----------------------------------------
   True-size slider: no crop, no backdrop, no gaps
   The frame shrink-wraps the active image (shrink-to-fit
   table, centred in the dialog) instead of forcing a fixed
   aspect ratio, so there is no visible background, coloured
   area or empty container around any photo. Images render
   at their natural ratio capped only by the viewport.
   Only the active slide displays (toggled by JS); the old
   translateX carousel is neutralised, replaced by a soft
   fade. Nav, dots, counter, caption and zones all anchor
   to the actual image and stay fixed when switching.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-slides {
  display: table;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: auto;
  max-height: none;
  background: none;
}

.ps-slides__track {
  position: static;
  display: block;
  transform: none !important;
}

.ps-slides__item {
  display: none;
}

.ps-slides__item.is-active {
  display: block;
  animation: ps-slide-fade 0.35s ease;
}

.ps-slides__item img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 140px);
  max-height: 66vh;
  max-height: 66dvh;
  object-fit: contain;
}

@keyframes ps-slide-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 991px) {
  .ps-slides__item img {
    max-width: calc(100vw - 110px);
    max-height: 60vh;
    max-height: 60dvh;
  }
}

@media (max-width: 767px) {
  .ps-slides__item img {
    max-width: calc(100vw - 60px);
    max-height: 56vh;
    max-height: 56dvh;
  }
}

/* ----------------------------------------
   Gallery polish: icons, modal size, centering
   - Larger, crisper prev/next + close targets with
     zeroed padding so glyphs stay optically centred,
     stronger shadows for visibility on any image.
   - Roomier dialog (still capped to the viewport) and
     taller slide frame for a better viewing area.
   - margin:auto keeps the dialog centred even when it
     reaches max-height; frame stays content-independent
     so switching aspect ratios never shifts layout.
   - Tablet/mobile overrides re-assert compact sizes so
     nothing overflows or clips on small screens.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-lightbox__dialog {
  max-width: 920px;
  max-height: 86vh;
  max-height: 86dvh;
  margin: auto;
}

.ps-slides {
  max-height: 54vh;
}

.ps-slides__nav {
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(15, 22, 28, 0.28);
}

.ps-lightbox__close {
  width: 44px;
  height: 44px;
  padding: 0;
  z-index: 5;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(15, 22, 28, 0.18);
}

.ps-slides__nav:focus-visible,
.ps-lightbox__close:focus-visible {
  outline: 3px solid #0064B8;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .ps-lightbox__dialog {
    max-width: 94vw;
    max-height: 86vh;
    max-height: 86dvh;
  }

  .ps-slides {
    max-height: 48vh;
  }

  .ps-slides__nav {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .ps-lightbox__close {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 767px) {
  .ps-lightbox__dialog {
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
  }

  .ps-slides {
    max-height: 40vh;
  }

  .ps-slides__nav {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .ps-slides__nav--prev {
    left: 8px;
  }

  .ps-slides__nav--next {
    right: 8px;
  }

  .ps-lightbox__close {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

/* True-size frame must not be capped: the earlier polish
   max-height values (54/48/40vh) predate shrink-to-fit and
   would clip uncropped images. Re-assert uncapped frame. */
.ps-slides {
  max-height: none;
}

@media (max-width: 991px) {
  .ps-slides {
    max-height: none;
  }
}

@media (max-width: 767px) {
  .ps-slides {
    max-height: none;
  }
}

/* ----------------------------------------
   Gallery corners, stronger gradient, uniform cards
   1. display:table does not reliably clip children to
      border-radius, which left the bottom corners square
      under the gradient. fit-content block shrink-wraps
      the image AND clips all four corners consistently.
   2. Darker, taller bottom gradient for readability;
      caption stays over the image, left-aligned.
   3. Uniform cards: media locked to its 4/3 ratio (no
      flex stretch variance), caption absorbs the slack,
      title reserves two lines so card sizes never depend
      on image dimensions or title length.
   Appended overrides only; existing rules untouched.
   ---------------------------------------- */
.ps-slides {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.ps-slides::after {
  height: 60%;
  max-height: 260px;
  background: linear-gradient(to top, rgba(5, 10, 15, 0.95) 0%, rgba(5, 10, 15, 0.6) 50%, rgba(5, 10, 15, 0) 100%);
}

.ps-project__media {
  flex: 0 0 auto;
}

.ps-project__caption {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.ps-project__title {
  min-height: 2.8em;
}

/* ----------------------------------------
   Mobile-only: center the intro eyebrow
   ("Structural Design Support - BIM + Technology").
   Scoped to this page's intro; desktop and tablet
   (and all other eyebrows) are untouched.
   ---------------------------------------- */
@media (max-width: 767px) {
  .ps-page .ps-intro .ps-heading__eyebrow {
    justify-content: center;
    text-align: center;
  }
}

/* ----------------------------------------
   Project Services refinements (modal + Discuss CTAs)
   Appended overrides only; existing rules above are untouched.
   All selectors are scoped to .ps-page / .project_inquiry_modal.
   ---------------------------------------- */

/* Modal submit area: horizontal modal tones with a vertical fade.
   The left-to-right colors live on a ::before backdrop layer, while a
   vertical mask-image fades that layer from fully transparent at the top
   to fully visible at the bottom. Masking the layer (not the bar itself)
   keeps the Submit button crisp and fully opaque. No diagonal gradients.
   position:sticky (base rule above) keeps the bar in normal flow: the
   backdrop only reads once modal content scrolls beneath it. */
.ps-project-inquiry-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right, rgb(173, 199, 218) 0%, rgba(162, 193, 209, 0.9) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}

/* Discuss Your Project buttons: inline icon that swaps on hover.
   Higher specificity than the .ps-page span resets above, so the
   icon shows here only; the global circle ::before stays off. */
.ps-page .tp-slider-btn.ps-discuss {
  cursor: pointer;
}

.ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon {
  display: inline-flex;
  position: relative;
  width: 1.5em;
  height: 1.2em;
  margin-right: 12px;
  vertical-align: -0.2em;
  overflow: hidden;
}

.ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon::before {
  content: none;
  display: none;
}

.ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon i:first-child {
  opacity: 1;
  transform: translateX(0);
}

.ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon i:last-child {
  opacity: 0;
  transform: translateX(-14px);
}

.ps-page .tp-slider-btn.ps-discuss:hover span.ps-discuss__icon i:first-child,
.ps-page .tp-slider-btn.ps-discuss:focus span.ps-discuss__icon i:first-child {
  opacity: 0;
  transform: translateX(14px);
}

.ps-page .tp-slider-btn.ps-discuss:hover span.ps-discuss__icon i:last-child,
.ps-page .tp-slider-btn.ps-discuss:focus span.ps-discuss__icon i:last-child {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .ps-page .tp-slider-btn.ps-discuss span.ps-discuss__icon i {
    transition: none;
  }
}

/* Featured intro CTA: larger, prominent professional red. */
.ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured {
  background: #c8102e;
  color: #ffffff !important;
  border: none;
  padding: 20px 44px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.28);
}

.ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured:hover,
.ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured:focus {
  background: #9e0c24;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(200, 16, 46, 0.38);
}

.ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured:active {
  background: #7a091c;
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.3);
}

.ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 3px;
}

@media (max-width: 575px) {
  .ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured {
    padding: 16px 28px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .ps-page .ps-intro__cta .tp-slider-btn.ps-discuss-featured {
    padding: 14px 22px;
    font-size: 11px;
  }
}

/* Header responsive: at 1600px and above the original layout is untouched.
   All rules below only apply under 1600px and tighten progressively. */
@media (max-width: 1599px) {
  header .header__area-2.pl-90.pr-90 {
    
  }
  header .header__area .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  header .sida-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100% !important;
  }
  header .sida-header-logo {
    display: block !important;
    flex: 0 0 auto;
  }
  header .sida-header-menu {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  header .sida-header-actions {
    display: block !important;
    flex: 0 0 auto;
  }
  header .main-menu.normal-menu {
    width: 100%;
  }
  header #mobile-menu > ul {
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .normal-menu ul li {
    margin: 0 12px !important;
    float: none !important;
    vertical-align: middle;
  }
  header .normal-menu ul li a {
    white-space: nowrap;
  }
  header .header__main_right {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  header .header-sticky-active.header-sticky {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
@media (max-width: 1450px) {
  header .header__area-2.pl-90.pr-90 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  header .sida-header-row {
    gap: 10px;
  }
  header .normal-menu ul li {
    margin: 0 9px !important;
  }
  header .normal-menu ul li a {
    font-size: 14px !important;
  }
  header .header-sticky-active.header-sticky {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 1300px) {
  header .header__area-2.pl-90.pr-90 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  header .normal-menu ul li {
    margin: 0 7px !important;
  }
  header .normal-menu ul li a {
    font-size: 13px !important;
  }
  header .header_signup,
  header .header_login {
    font-size: 10pt !important;
  }
  header .header-sticky-active.header-sticky {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 1199px) {
  header .sida-header-row {
    gap: 12px;
  }
  header .sida-header-menu {
    display: none !important;
  }
  header .sida-header-actions {
    margin-left: auto;
  }
  header .header__area-2.pl-90.pr-90 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  header .header-sticky-active.header-sticky {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Project Services: unify secondary Discuss buttons with the featured
   red reference (.ps-intro__cta .ps-discuss-featured). Only the red
   color system is unified; each button keeps its own padding,
   font-size, positioning and responsive rules. Later in the file so
   these win over the earlier navy/white rules at equal specificity. */
.ps-page .ps-tech__cta .tp-slider-btn,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn,
.ps-page .ps-cta__btn .tp-slider-btn {
  background: #c8102e;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.28);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.ps-page .ps-tech__cta .tp-slider-btn:hover,
.ps-page .ps-tech__cta .tp-slider-btn:focus,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:hover,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:focus,
.ps-page .ps-cta__btn .tp-slider-btn:hover,
.ps-page .ps-cta__btn .tp-slider-btn:focus {
  background: #9e0c24;
  color: #ffffff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(200, 16, 46, 0.38);
  text-decoration: none;
}
.ps-page .ps-tech__cta .tp-slider-btn:active,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:active,
.ps-page .ps-cta__btn .tp-slider-btn:active {
  background: #7a091c;
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.3);
}
.ps-page .ps-tech__cta .tp-slider-btn:focus-visible,
.ps-page .ps-tech__cta.ps-cta__btn .tp-slider-btn:focus-visible,
.ps-page .ps-cta__btn .tp-slider-btn:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 3px;
}

.sida2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tp-section-subtitle,
.tp-ab-subtitle,
.tp-blog__meta,
.tp-blog__meta span,
.blog-featured-card__excerpt,
.blog-card__excerpt,
.product-showcase-card .blog-featured-card__excerpt,
.product-showcase-card .blog-card__excerpt {
    color: #6f6f6f;
}

@media (min-width: 801px) {
    .prd_short_descript {
        color: #6f6f6f;
    }
}

.IconProductMid01 {
    opacity: 1;
}
.IconProductMid01 .my-hover-img {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
.IconProductMid02 .my-hover-img {
    opacity: 1;
}

.tp-bar-icon .offcanvas-toggle-btn {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    display: inline;
}
.offcanvas__close-btn .offcanvas-close-btn {
    background: none;
    border: 0;
    margin: 0;
    padding: 20px;
    position: relative;
    top: -20px;
    color: var(--tp-text-body);
    font-family: inherit;
    font-size: 30px;
    line-height: 26px;
    cursor: pointer;
    display: inline;
}
.offcanvas__close-btn .offcanvas-close-btn:hover {
    opacity: 0.5;
}

/* The side menu is the only scrolling container while it is open.
   The page scrollbar is hidden so the menu never shows two scrollbars. */
.offcanvas__area {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
html.side-menu-open,
html.side-menu-open body {
    overflow: hidden;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/fa-light-300.eot);
    src: url(../fonts/fa-light-300.eot?#iefix) format("embedded-opentype"),
         url(../fonts/fa-light-300.woff2) format("woff2"),
         url(../fonts/fa-light-300.woff) format("woff"),
         url(../fonts/fa-light-300.ttf) format("truetype"),
         url(../fonts/fa-light-300.svg#fontawesome) format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/fa-regular-400.eot);
    src: url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
         url(../fonts/fa-regular-400.woff2) format("woff2"),
         url(../fonts/fa-regular-400.woff) format("woff"),
         url(../fonts/fa-regular-400.ttf) format("truetype"),
         url(../fonts/fa-regular-400.svg#fontawesome) format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/fa-solid-900.eot);
    src: url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
         url(../fonts/fa-solid-900.woff2) format("woff2"),
         url(../fonts/fa-solid-900.woff) format("woff"),
         url(../fonts/fa-solid-900.ttf) format("truetype"),
         url(../fonts/fa-solid-900.svg#fontawesome) format("svg");
}

/* ----------------------------------------
   Lighthouse audit fixes (contrast, layout stability)
   ---------------------------------------- */

/* Body text: #878787 measured 3.59:1 on white and 3.10:1 on #eeeeee.
   #666666 gives 5.74:1 on white and 4.95:1 on #eeeeee. */
:root {
    --tp-text-body: #666666;
}

/* Pricing table product slogan: #8899a6 measured 2.93:1 on the white cell.
   #5f6b75 gives 5.46:1. */
.product-slogan {
    color: #5f6b75;
}

/* Project services CTA eyebrow: #0064b8 on the #9c9c9c CTA band measured
   2.17:1. #12243d gives 5.69:1 and keeps the eyebrow quieter than the CTA
   button and heading. */
.ps-cta .ps-heading__eyebrow {
    color: #12243d;
}

.ps-cta .ps-heading__eyebrow::before {
    background: #12243d;
}

/* Reserve the header logo box before the logo image arrives. The max-width
   rules in sida.css still cap the width at every breakpoint (190/160/140 px
   and 170 px for the sticky header). */
.sida_logo_top {
    width: 210px;
}

/* Text that is only exposed to assistive technology. */
.sida-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Blog category list: the site-wide ".sidebar__widget ul li a" rule colours
   these links #adadad (2.24:1 on white) and outranks .blog-category-link.
   Restoring the heading colour, and darkening the active chip so that its
   white label reaches 5.33:1 instead of 3.74:1. */
.sidebar__widget .blog-category-list li a.blog-category-link {
    color: var(--tp-heading-1);
}

.sidebar__widget .blog-category-list li a.blog-category-link.active {
    background: #6b6b6b;
    color: var(--tp-common-white);
}

/* Sticky header: main.js adds ".header-sticky" (position: fixed) once the page
   is scrolled past 100px. A fixed header leaves the document flow, so the
   header block collapsed from its natural height to 0 and every section below
   it jumped upwards (0.074 CLS on "/#contact", caused by the fragment scroll).
   Reserving the natural header height while the sticky state is active keeps
   the layout stable; the values are the measured header heights of the
   ".sida_logo_top" breakpoints (98.75 / 82.58 / 73.33 / 67.16 px). */
header:has(.header-sticky) {
    min-height: 98.75px;
}

@media (max-width: 1260px) {
    header:has(.header-sticky) {
        min-height: 82.58px;
    }
}

@media (max-width: 740px) {
    header:has(.header-sticky) {
        min-height: 73.33px;
    }
}

@media (max-width: 570px) {
    header:has(.header-sticky) {
        min-height: 67.16px;
    }
}

/* ----------------------------------------
   Responsive image sizing
   The width/height attributes added for layout stability only
   describe the intrinsic aspect ratio. The rules below keep the
   rendered size under CSS control, so these images scale inside
   their containers, keep their aspect ratio and never overflow.
   ---------------------------------------- */
.about-page-img img,
.team-hero-img img,
.pj-details-hero-img img,
.postbox__thumb img,
.my-hover-img img {
    max-width: 100%;
    height: auto;
}

/* Blog "Other Posts" thumbnails: style.css pins the box to a 95px
   minimum width and a fixed 80px height, which crops the 97x78 source.
   Use the intrinsic size instead and let the box shrink with the
   sidebar on narrow viewports. */
.rc__post-thumb {
    flex: 0 0 auto;
    max-width: 100%;
}

.rc__post-thumb img {
    width: 97px;
    max-width: 100%;
    height: auto;
    min-width: 0;
    object-fit: cover;
}

/* ============================================================
   SIDE MENU / OFFCANVAS
   Right side slide-out menu.
   - 1200px and up: promotional panel (logo, intro, SIDA Pro and
     Project Services cards, get in touch).
   - Under 1200px: compact navigation panel built on the supplied
     dark structural background image.
   ============================================================ */
.offcanvas__area.sida-menu {
    right: 0;
    width: min(600px, 100%);
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: #06111c;
    box-shadow: -40px 0 70px rgba(0, 0, 0, 0.45);
    visibility: hidden;
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
}
.offcanvas__area.sida-menu.opened {
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

/* The meanmenu copy of the header navigation is replaced by the
   custom navigation inside the panel. */
.sida-menu .tp-mobile-menu {
    display: none !important;
}

.sida-menu__panel {
    position: relative;
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    overflow: hidden;
}
.sida-menu__panel a {
    text-decoration: none;
}
.sida-menu__panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- shared header ---------- */
.sida-menu__head {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 16px;
}
.sida-menu__logo {
    display: block;
    line-height: 0;
}
.sida-menu__logo img {
    display: block;
    width: 178px;
    max-width: 100%;
    height: auto;
}
.sida-menu__close {
    -ms-flex-negative: 0;
    flex: 0 0 auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 6px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #eaf4fb;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: color 0.2s ease, -webkit-transform 0.25s ease;
    transition: color 0.2s ease, transform 0.25s ease;
}
.sida-menu__close:hover,
.sida-menu__close:focus-visible {
    color: #24c6ef;
    opacity: 1;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sida-menu__close:focus-visible {
    outline: 2px solid #24c6ef;
    outline-offset: 2px;
}

/* ---------- desktop promotional panel ---------- */
.sida-menu__desktop {
    padding: 24px 34px 28px;
    background-color: #06111c;
    background-image:
        radial-gradient(115% 58% at 94% -8%, rgba(23, 122, 201, 0.34) 0%, rgba(6, 17, 28, 0) 62%),
        radial-gradient(90% 42% at 104% 76%, rgba(14, 92, 152, 0.22) 0%, rgba(6, 17, 28, 0) 70%),
        linear-gradient(168deg, #0a1c2b 0%, #071624 46%, #040d16 100%);
}
/* Soft diagonal shape, echoing the angled brand mark. */
.sida-menu__desktop::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -170px;
    width: 440px;
    height: 440px;
    border-radius: 70px;
    background-image: linear-gradient(140deg, rgba(88, 178, 235, 0.16) 0%, rgba(88, 178, 235, 0) 68%);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    pointer-events: none;
}
.sida-menu__intro {
    position: relative;
    z-index: 1;
    padding-top: 22px;
}
.sida-menu__tagline {
    display: block;
    font-family: var(--tp-ff-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8ea9bd;
}
.sida-menu__title {
    margin: 9px 0 10px;
    font-family: var(--tp-ff-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.005em;
    color: #ffffff;
}
.sida-menu__lead {
    margin: 0;
    font-family: var(--tp-ff-body);
    font-size: 13.8px;
    line-height: 1.66;
    color: #a5b8c8;
}
.sida-menu__cards {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    padding-top: 26px;
}
.sida-menu__card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background-image: linear-gradient(180deg, #17283c 0%, #0b1a28 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.sida-menu__card--outline {
    border-color: rgba(36, 198, 239, 0.42);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(36, 198, 239, 0.1), 0 0 34px rgba(36, 198, 239, 0.14);
}
.sida-menu__media {
    position: relative;
    width: 100%;
    aspect-ratio: 168 / 172;
    border-radius: 10px;
    overflow: hidden;
    background-color: #333333;
}
.sida-menu__media--pro img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fade the flat image background into the card so the render floats. */
.sida-menu__media--pro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(125% 105% at 50% 46%, rgba(13, 27, 42, 0) 42%, rgba(13, 27, 42, 0.8) 82%, rgba(13, 27, 42, 1) 100%);
}
.sida-menu__media--services {
    background-color: #06131f;
}
.sida-menu__media-shape {
    position: absolute;
    inset: 0;
    background-color: #06131f;
    background-repeat: no-repeat;
    background-size: 250% auto;
    background-position: 74% 92%;
}
.sida-menu__media--services::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(125% 105% at 52% 50%, rgba(11, 26, 40, 0) 50%, rgba(11, 26, 40, 0.85) 92%, rgba(11, 26, 40, 1) 100%);
}
.sida-menu__card-title {
    margin: 0;
    font-family: var(--tp-ff-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}
.sida-menu__card-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 7px;
    border-radius: 2px;
    background-color: #2e8ee8;
}
.sida-menu__card--outline .sida-menu__card-title::after {
    background-color: #24c6ef;
}
.sida-menu__card-text {
    margin: 12px 0 16px;
    font-family: var(--tp-ff-body);
    font-size: 13.2px;
    line-height: 1.62;
    color: #a8bac9;
}
.sida-menu__btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 6px;
    font-family: var(--tp-ff-heading);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-transition: background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    transition: background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.sida-menu__btn i {
    font-size: 12px;
    -webkit-transition: -webkit-transform 0.22s ease;
    transition: transform 0.22s ease;
}
.sida-menu__btn--solid {
    color: #ffffff;
    background-image: linear-gradient(135deg, #1f8bf7 0%, #0a5ed2 100%);
    box-shadow: 0 10px 22px rgba(15, 93, 210, 0.32);
}
.sida-menu__btn--solid:hover,
.sida-menu__btn--solid:focus-visible {
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(15, 93, 210, 0.44);
}
.sida-menu__btn--outline {
    color: #e9f6fc;
    border: 1px solid rgba(36, 198, 239, 0.75);
    background-color: rgba(9, 48, 70, 0.28);
}
.sida-menu__btn--outline:hover,
.sida-menu__btn--outline:focus-visible {
    color: #ffffff;
    border-color: #4fd6f6;
    background-color: rgba(36, 198, 239, 0.16);
}
.sida-menu__btn:hover i,
.sida-menu__btn:focus-visible i {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}
.sida-menu__btn:focus-visible {
    outline: 2px solid #4fd6f6;
    outline-offset: 2px;
}
.sida-menu__foot {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
    font-family: var(--tp-ff-heading);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
}
.sida-menu__foot-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 31px;
    line-height: 1;
    color: #e6f1f8;
}
.sida-menu__foot-label {
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
.sida-menu__foot:hover .sida-menu__foot-label,
.sida-menu__foot:hover .sida-menu__foot-icon,
.sida-menu__foot:focus-visible .sida-menu__foot-label,
.sida-menu__foot:focus-visible .sida-menu__foot-icon {
    color: #4fd6f6;
}
.sida-menu__foot:focus-visible {
    outline: 2px solid #4fd6f6;
    outline-offset: 4px;
}

/* ---------- mobile navigation panel ---------- */
.sida-menu__mobile {
    padding: 14px 20px 18px;
    background-color: #050f18;
}
/* The structural artwork sits in the lower third of the panel: the image
   is scaled so the wireframe spans the panel width without distortion. */
.sida-menu__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #050f18;
    background-repeat: no-repeat;
    background-size: 130% auto;
    background-position: 100% 100%;
    pointer-events: none;
}
/* Keeps the menu readable while the structural artwork stays visible. */
.sida-menu__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(4, 13, 21, 0.96) 0%, rgba(4, 13, 21, 0.92) 45%, rgba(4, 13, 21, 0.82) 68%, rgba(4, 13, 21, 0.5) 88%, rgba(4, 13, 21, 0.28) 100%),
        radial-gradient(120% 70% at 100% 0%, rgba(20, 118, 180, 0.28) 0%, rgba(4, 13, 21, 0) 62%);
}
.sida-menu__head--mobile {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
}
.sida-menu__head--mobile .sida-menu__logo img {
    width: 136px;
}
.sida-menu__head--mobile .sida-menu__close {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 26px;
}
.sida-menu__head--mobile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background-image: linear-gradient(90deg, #2ad0f4 0%, #1592bb 46%, rgba(21, 146, 187, 0) 100%);
}
.sida-menu__nav {
    position: relative;
    z-index: 1;
    padding: 18px 0 14px;
}
.sida-menu__item {
    list-style: none;
}
.sida-menu__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    font-family: var(--tp-ff-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f2f8fc;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
.sida-menu__panel .sida-menu__link:hover,
.sida-menu__panel .sida-menu__link:focus-visible {
    color: #4fd6f6;
}
.sida-menu__link:focus-visible {
    outline: 2px solid #4fd6f6;
    outline-offset: -2px;
}
.sida-menu__link > i {
    -ms-flex-negative: 0;
    flex: 0 0 auto;
    width: 24px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    color: #e9f4fb;
}
.sida-menu__link:hover > i,
.sida-menu__link:focus-visible > i {
    color: #4fd6f6;
}
.sida-menu__link > span {
    min-width: 0;
}
.sida-menu__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.sida-menu__row .sida-menu__link {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    border-bottom: 0;
}
.sida-menu__plus {
    -ms-flex-negative: 0;
    flex: 0 0 auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(96, 158, 194, 0.6);
    border-radius: 8px;
    background-color: rgba(9, 30, 46, 0.55);
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.25s ease;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.sida-menu__plus:hover,
.sida-menu__plus:focus-visible {
    border-color: #4fd6f6;
    background-color: rgba(36, 198, 239, 0.18);
}
.sida-menu__plus:focus-visible {
    outline: 2px solid #4fd6f6;
    outline-offset: 2px;
}
.sida-menu__plus i {
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}
.sida-menu__item--sub.is-open > .sida-menu__row .sida-menu__plus i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sida-menu__sub {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease;
    transition: max-height 0.35s ease;
}
.sida-menu__item--sub.is-open > .sida-menu__sub {
    max-height: 640px;
}
.sida-menu__link--child {
    padding: 8px 0 8px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #eef6fb;
}
.sida-menu__link--child > i {
    font-size: 17px;
}
.sida-menu__badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-negative: 0;
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background-image: linear-gradient(135deg, #1e8db6 0%, #11617f 100%);
    color: #ffffff;
    font-family: var(--tp-ff-body);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
}
.sida-menu__cta {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 0;
    padding: 12px 16px;
    border: 2px solid #1fbfe8;
    border-radius: 12px;
    background-color: rgba(5, 20, 32, 0.55);
    box-shadow: 0 0 22px rgba(31, 191, 232, 0.18), inset 0 0 22px rgba(31, 191, 232, 0.06);
    font-family: var(--tp-ff-heading);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.sida-menu__cta > i {
    color: #1fbfe8;
    line-height: 1;
}
.sida-menu__cta > i:first-child {
    font-size: 20px;
    -ms-flex-negative: 0;
    flex: 0 0 auto;
}
.sida-menu__cta > span {
    -ms-flex-negative: 0;
    flex: 0 0 auto;
    text-align: center;
}
.sida-menu__cta:hover,
.sida-menu__cta:focus-visible {
    color: #ffffff;
    border-color: #5fdcf8;
    background-color: rgba(31, 191, 232, 0.14);
    box-shadow: 0 0 30px rgba(31, 191, 232, 0.3), inset 0 0 22px rgba(31, 191, 232, 0.1);
}
.sida-menu__cta:focus-visible {
    outline: 2px solid #5fdcf8;
    outline-offset: 3px;
}

/* Dimmed page behind the open menu. */
.body-overlay.opened {
    background-color: rgba(3, 10, 17, 0.62);
}

/* ---------- breakpoints ---------- */
@media (min-width: 1200px) {
    .offcanvas__area.sida-menu {
        width: clamp(520px, 35vw, 620px);
        max-width: 100vw;
    }
    .sida-menu__desktop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .sida-menu__mobile {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .offcanvas__area.sida-menu {
        width: min(380px, 86vw);
        max-width: 100vw;
    }
    .sida-menu__mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media (max-width: 1400px) and (min-width: 1200px) {
    .sida-menu__desktop {
        padding: 22px 28px 26px;
    }
    .sida-menu__card {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 16px;
        padding: 14px;
    }
    .sida-menu__card-text {
        font-size: 12.4px;
    }
}

@media (max-width: 380px) {
    .offcanvas__area.sida-menu {
        width: min(380px, 92vw);
    }
    .sida-menu__mobile {
        padding: 12px 16px 14px;
    }
    .sida-menu__link {
        gap: 10px;
        font-size: 12px;
        letter-spacing: 0.03em;
        padding: 9px 0;
    }
    .sida-menu__link > i {
        width: 22px;
        font-size: 18px;
    }
    .sida-menu__head--mobile .sida-menu__logo img {
        width: 124px;
    }
    .sida-menu__badge {
        padding: 3px 8px;
        font-size: 9.5px;
    }
    .sida-menu__cta {
        gap: 10px;
        padding: 11px 14px;
        font-size: 12.5px;
    }
}

/* Short viewports: tighten the tablet and phone panel so every menu item
   still fits without scrolling. Scrolling only stays as a last resort. */
@media (max-width: 1199.98px) and (max-height: 720px) {
    .sida-menu__mobile {
        padding: 10px 16px 12px;
    }
    .sida-menu__head--mobile .sida-menu__logo img {
        width: 116px;
    }
    .sida-menu__nav {
        padding: 12px 0 10px;
    }
    .sida-menu__link {
        padding: 7px 0;
    }
    .sida-menu__link--child {
        padding: 6px 0 6px 18px;
    }
    .sida-menu__link > i {
        font-size: 18px;
    }
    .sida-menu__cta {
        padding: 9px 14px;
    }
}

/* Short viewports: keep the desktop panel scrollable but tighter. */
@media (min-width: 1200px) and (max-height: 800px) {
    .sida-menu__desktop {
        padding-top: 18px;
    }
    .sida-menu__intro {
        padding-top: 16px;
    }
    .sida-menu__cards {
        padding-top: 18px;
    }
    .sida-menu__lead {
        font-size: 12.8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas__area.sida-menu,
    .offcanvas__area.sida-menu.opened {
        -webkit-transition: visibility 0s linear 0s;
        transition: visibility 0s linear 0s;
    }
    .sida-menu__sub,
    .sida-menu__plus i,
    .sida-menu__btn i,
    .sida-menu__close {
        -webkit-transition: none;
        transition: none;
    }
}

/* ============================================================
   HOME HERO (SIDA Pro) + PRODUCT CARDS
   Blueprint backdrop with a translucent panel, the SIDA Pro hero
   and the product card row. Every selector is prefixed with
   sida- so the blog cards that share the older classes are
   untouched.
   ============================================================ */
.sida-home {
    position: relative;
    padding: clamp(16px, 3vh, 40px) 0;
    background-color: #eef7fe;
    isolation: isolate;
}

.sida-home__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #eef7fe;
    background-image: url("../../images_static/HomeContent/home-blueprint-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* The panel keeps the reference proportion (about 89% of the viewport),
   so the blueprint artwork stays visible as a frame around it. */
.sida-home__inner {
    width: 89%;
    max-width: 1480px;
    margin: 0 auto;
}

.sida-hero {
    padding: clamp(16px, 2.2vh, 30px);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 18px 45px rgba(13, 52, 97, 0.1);
}

.sida-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 566fr) minmax(0, 810fr);
    gap: 44px;
    align-items: center;
}

.sida-hero__media {
    aspect-ratio: 600 / 371;
    border-radius: 12px;
    overflow: hidden;
    background: #333;
}


.sida-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sida-hero__body {
    max-width: 700px;
}

.sida-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(10px, 1.5vh, 16px);
    font-family: var(--tp-ff-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1268be;
}

.sida-hero__eyebrow-text {
    padding: 7px 16px;
    border-radius: 999px;
    background: #dcf2fe;
}

.sida-hero__eyebrow-line {
    display: block;
    width: 62px;
    height: 2px;
    border-radius: 2px;
    background: #b6dcf7;
}

.sida-hero__title {
    margin: 0 0 clamp(10px, 1.6vh, 16px);
    font-family: var(--tp-ff-heading);
    font-size: clamp(38px, 7.2vh, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #0b1f3f;
}

.sida-hero__title span {
    color: #0061ca;
}

.sida-hero__text {
    margin: 0 0 clamp(16px, 2.4vh, 30px);
    font-family: var(--tp-ff-body);
    font-size: clamp(15px, 1.8vh, 18px);
    line-height: 1.6;
    color: #3b4b6e;
}

.sida-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.sida-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: clamp(42px, 5vh, 48px);
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--tp-ff-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
        border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sida-btn__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 8px;
    transition: transform 0.25s ease;
}

.sida-btn:hover .sida-btn__icon {
    transform: translateX(3px);
}

.sida-btn--primary {
    color: #ffffff;
    background: linear-gradient(180deg, #0b74d6 0%, #005ec4 100%);
    box-shadow: 0 8px 18px rgba(0, 94, 196, 0.22);
}

.sida-btn--primary:hover,
.sida-btn--primary:focus-visible {
    color: #ffffff;
    background: linear-gradient(180deg, #0a6ac6 0%, #0051ab 100%);
    box-shadow: 0 10px 22px rgba(0, 94, 196, 0.28);
}

.sida-btn--ghost {
    color: #005ec4;
    background: #ffffff;
    border-color: #005ec4;
}

.sida-btn--ghost:hover,
.sida-btn--ghost:focus-visible {
    color: #ffffff;
    background: #005ec4;
}

/* ---------------------------- product cards */
.sida-home__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.sida-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid #e4ecf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 50, 90, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sida-card:hover {
    border-color: #d3e2f2;
    box-shadow: 0 14px 28px rgba(15, 50, 90, 0.12);
    transform: translateY(-3px);
}

.sida-card__media {
    aspect-ratio: 640 / 396;
    border-radius: 11px;
    overflow: hidden;
    background: #333;
}

/* The Cut Optimizer shot is a data table on a darker window; matching its
   own backdrop keeps the few letterboxed pixels invisible. */
.sida-card__media--data {
    background: #212830;
}

.sida-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.sida-card:hover .sida-card__media img {
    filter: brightness(1.06);
}

.sida-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px 12px 6px;
}

.sida-card__title {
    margin: 0 0 10px;
    font-family: var(--tp-ff-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: #0b2143;
}

.sida-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sida-card__title a:hover {
    color: #005ec4;
}

.sida-card__text {
    margin: 0 0 14px;
    font-family: var(--tp-ff-body);
    font-size: 14px;
    line-height: 1.6;
    color: #546583;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sida-card__link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--tp-ff-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #005ec4;
}

.sida-card__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #005ec4;
    background: #e2f1fd;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sida-card__link:hover .sida-card__link-icon,
.sida-card__link:focus-visible .sida-card__link-icon {
    color: #ffffff;
    background: #005ec4;
    transform: translateX(3px);
}

/* Desktop: size the hero and card artwork from the viewport height so the
   whole panel (hero + five cards) always fits on one screen. Both keep
   object-fit: cover, so the artwork is cropped, never stretched. */
@media (min-width: 992px) {
    /* The hero row is a flex line so the artwork keeps its own proportions
       (width follows the height) instead of being cropped to the column. */
    .sida-hero__grid {
        display: flex;
        gap: clamp(28px, 3vw, 44px);
        align-items: center;
    }

    .sida-hero__media {
        flex: 0 0 auto;
        aspect-ratio: 600 / 371;
        height: clamp(200px, 31vh, 360px);
    }

    .sida-hero__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The card artwork keeps its native 640x396 frame, so the media box is
       sized by the grid column and is never stretched, cropped or squashed. */
    .sida-card__media {
        max-height: clamp(120px, 18vh, 200px);
    }

    .sida-card__text {
        font-size: clamp(13px, 1.5vh, 14px);
        -webkit-line-clamp: 3;
    }
}

/* ---------------------------- responsive */
@media (max-width: 1399px) {
    .sida-hero__title {
        font-size: 62px;
    }

    .sida-hero__grid {
        gap: 36px;
    }
}

@media (max-width: 1199px) {
    .sida-hero__title {
        font-size: 50px;
    }

    .sida-hero__text {
        font-size: 16px;
    }

    .sida-home__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .sida-hero {
        padding: 22px;
    }

    .sida-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .sida-hero__body {
        max-width: 100%;
    }

    .sida-hero__title {
        font-size: 44px;
    }

    .sida-home__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px;
    }

    .sida-card__title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .sida-home {
        padding: 16px 0 30px;
    }

    .sida-home__bg {
        background-image: url("../../images_static/HomeContent/home-blueprint-bg-900.jpg");
    }

    .sida-home__inner {
        width: 94%;
    }

    .sida-hero {
        padding: 16px;
        border-radius: 14px;
    }

    .sida-hero__eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .sida-hero__eyebrow-text {
        padding: 6px 12px;
    }

    .sida-hero__eyebrow-line {
        width: 40px;
    }

    .sida-hero__title {
        margin-bottom: 12px;
        font-size: 34px;
        letter-spacing: -0.01em;
    }

    .sida-hero__text {
        margin-bottom: 22px;
        font-size: 15px;
        line-height: 1.6;
    }

    .sida-hero__actions {
        gap: 12px;
    }

    .sida-btn {
        min-height: 44px;
        gap: 14px;
        padding: 0 18px;
        font-size: 11px;
        letter-spacing: 0.14em;
    }

    .sida-home__cards {
        gap: 12px;
        margin-top: 20px;
    }

    .sida-card {
        padding: 6px;
        border-radius: 14px;
    }

    .sida-card__media {
        border-radius: 10px;
    }

    .sida-card__body {
        padding: 12px 8px 6px;
    }

    .sida-card__title {
        margin-bottom: 8px;
        font-size: 16px;
    }

    .sida-card__text {
        margin-bottom: 14px;
        font-size: 13px;
        -webkit-line-clamp: 5;
    }

    .sida-card__link {
        gap: 10px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .sida-card__link-icon {
        width: 34px;
        height: 34px;
    }

    .sida-card__link-icon svg {
        width: 14px;
        height: 7px;
    }
}

@media (max-width: 575px) {
    .sida-home__inner {
        width: 95%;
    }

    .sida-hero {
        padding: 12px;
        border-radius: 12px;
    }

    /* one card per row: full width card, comfortable text size */
    .sida-home__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sida-card {
        padding: 7px;
    }

    .sida-card__body {
        padding: 14px 10px 8px;
    }

    .sida-card__title {
        font-size: 18px;
    }

    .sida-card__text {
        display: block;
        overflow: visible;
        font-size: 14px;
        -webkit-line-clamp: unset;
    }

    .sida-card__link {
        font-size: 11px;
    }

    .sida-card__link-icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 400px) {
    .sida-hero__title {
        font-size: 30px;
    }

    /* stack the hero buttons so both stay comfortably tappable */
    .sida-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sida-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sida-card,
    .sida-card__media img,
    .sida-btn,
    .sida-btn__icon,
    .sida-card__link-icon {
        transition: none;
    }

    .sida-card:hover,
    .sida-btn:hover .sida-btn__icon,
    .sida-card__link:hover .sida-card__link-icon {
        transform: none;
    }
}

/* Narrow phones (320-380px): the header row is a fixed-width flex row whose
   logo, SIGNUP, LOGIN and menu toggle together are wider than the viewport,
   which produced a horizontal scrollbar. Everything below only shrinks the
   existing header at these widths. */
@media (max-width: 380px) {
    header .header__area-2.pl-90.pr-90 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    header .header-sticky-active.header-sticky {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    header .sida-header-row {
        gap: 8px;
    }

    header .sida_logo_top,
    header .header-sticky-active.header-sticky .sida_logo_top {
        max-width: 112px !important;
    }

    header .header_signup,
    header .header_login {
        margin-right: 8px !important;
        font-size: 12px !important;
        letter-spacing: 0.04em;
    }

    header .header_login {
        padding: 4px 6px !important;
    }

    header .header_login i {
        margin-right: 4px !important;
        font-size: 1em !important;
    }
}