.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: 100%;
    display: block;
    object-fit: cover;
}
.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;
    }
}
@media (max-width: 990px) {
    #IconProductId_All {
        display: none !important;
    }
}
.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;
}

/* ==========================================
   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 {
    border-top: 5px solid #0e7c7b;
    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));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 40%);
}

.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;
  }
}