/* --- Right Column: Query Form --- */
.contact-form h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 28px;
    border-bottom: 2px solid #0056b3;
    display: inline-block;
    padding-bottom: 5px;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #444;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
    }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #0056b3;
            outline: none;
        }

    .form-group textarea {
        height: 150px;
        resize: vertical;
    }

.submit-btn {
    background-color: #0056b3;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

    .submit-btn:hover {
        background-color: #004494;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        padding: 20px;
    }
}

.form-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.form-header {
    text-align: left;
    margin-bottom: 30px;
}

    .form-header h2 {
        color: #333;
        font-weight: 700;
    }

.form-group {
    margin-bottom: 20px;
}

.control-label {
    font-weight: 600;
    color: #555;
}

.form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 12px;
    transition: border-color 0.3s;
}

    .form-control:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

.btn-primary {
    background-color: #4e73df;
    border-color: #4e73df;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.3s;
}

    .btn-primary:hover {
        background-color: #000;
        border-color: #2653d4;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Notification Popup Styles */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

    .notification-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.notification-popup {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.7);
    transition: transform 0.3s;
}

.notification-overlay.show .notification-popup {
    transform: scale(1);
}

.notification-icon {
    font-size: 60px;
    color: #28a745;
    margin-bottom: 20px;
}

.notification-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.notification-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

.close-notification {
    background-color: #4e73df;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

    .close-notification:hover {
        background-color: #2e59d9;
    }

.loading-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.required-field {
    color: #e74a3b;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.additional-info {
    margin-top: 30px;
}

.info-item {
    margin-bottom: 10px;
    color: #000;
}/* ---------- Section ---------- */
.press-room {
    padding: 90px 20px;
}

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

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

.section-subtitle {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.section-title {
    font-size: clamp(2rem,4vw,2.8rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
}

.title-bar {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg,var(--primary),var(--accent));
    margin: 16px auto 0;
    border-radius: 2px;
}

/* ---------- Cards ---------- */
.press-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .press-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

.card-img {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--primary-light);
}

    .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }

.press-card:hover .card-img img {
    transform: scale(1.08);
}

.card-date {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(10,43,77,.85);
    color: #fff;
    font-size: .72rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.card-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff;
}

.tag-exhibition {
    background: #1b5a99;
}

.tag-award {
    background: #c9971c;
}

.tag-funding {
    background: #2e7d5b;
}

.tag-event {
    background: #7c4dbe;
}

.tag-news {
    background: #b3403a;
}

.tag-featured {
    background: var(--accent);
    color: var(--primary-dark);
}

.card-body {
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    line-height: 1.45;
}

.card-text {
    font-size: .92rem;
    color: var(--text-gray);
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-details {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #000;
    font-size: .85rem;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: var(--transition);
}

    .btn-details:hover {
        background: var(--accent);
        color: var(--primary-dark);
    }

    .btn-details .arrow {
        transition: transform .3s ease;
    }

    .btn-details:hover .arrow {
        transform: translateX(5px);
    }

/* ---------- Featured card ---------- */
.featured-wrap {
    margin-bottom: 40px;
}

.featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}

    .featured .card-img {
        height: 100%;
        min-height: 320px;
    }

    .featured .card-title {
        font-size: 1.5rem;
    }

    .featured .card-text {
        -webkit-line-clamp: 5;
    }

/* ---------- Grid ---------- */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
    gap: 32px;
}

    .press-grid > .reveal {
        display: flex;
    }

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease,transform .7s ease;
    width: 100%;
}

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

.press-grid .reveal:nth-child(3n+2) {
    transition-delay: .12s;
}

.press-grid .reveal:nth-child(3n+3) {
    transition-delay: .24s;
}

/* ---------- Responsive ---------- */
@media(max-width:900px) {
    .featured {
        grid-template-columns: 1fr;
    }

        .featured .card-img {
            min-height: 230px;
            height: 230px;
        }
}

@media(max-width:520px) {
    .press-room {
        padding: 60px 15px;
    }

    .press-grid {
        grid-template-columns: 1fr;
    }

    .card-body {
        padding: 22px 20px 26px;
    }
}/* ============ INDUSTRIAL NC COATINGS PAGE STYLES ============ */
.indnc-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.ncc-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .ncc-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.ncc-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 25px;
}

    .ncc-section.reverse {
        flex-direction: row-reverse;
    }

.ncc-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ncc-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .ncc-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .ncc-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.ncc-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ncc-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ncc-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.ncc-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .ncc-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – colour ranges / highlights */
        .ncc-pills span.ncc-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
        }

/* ---- Action buttons ---- */
.ncc-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ncc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ncc-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .ncc-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (industrial steel family) ---- */
/* NC Coatings intro – dark graphite */
.theme-ncc-intro {
    background: linear-gradient(135deg, #262d35, #37424d);
}

    .theme-ncc-intro h2 {
        border-color: #ff9e40;
    }

/* Primers – steel */
.theme-ncc-primers {
    background: linear-gradient(135deg, #2f3a44, #46545f);
}

    .theme-ncc-primers h2 {
        border-color: #ff8a65;
    }

/* Top Coats – deep charcoal with strongest accent */
.theme-ncc-topcoat {
    background: linear-gradient(135deg, #1f252b, #313b45);
}

    .theme-ncc-topcoat h2 {
        border-color: #ff6f00;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ncc-section, .ncc-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ncc-image {
        min-height: 300px;
    }

        .ncc-image::after, .ncc-image::before {
            display: none;
        }

    .ncc-content {
        padding: 30px 25px;
    }

    .ncc-banner h1 {
        font-size: 20px;
    }
}
/* ============ INDUSTRIAL PLASTIC COATINGS PAGE STYLES ============ */
.plastic-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.pl-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .pl-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single split section (image + content) ---- */
.pl-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
}

.pl-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .pl-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .pl-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .pl-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.pl-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #262d35, #37424d);
}

    /* ---- Typography ---- */
    .pl-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .pl-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .pl-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- The Challenge callout ---- */
.pl-challenge {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .pl-challenge strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.pl-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .pl-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – plastic types */
        .pl-pills span.pl-type {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
            font-weight: 700;
        }

/* ---- Action buttons ---- */
.pl-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.pl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .pl-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .pl-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .pl-section {
        flex-direction: column;
        min-height: auto;
    }

    .pl-image {
        min-height: 300px;
    }

        .pl-image::after, .pl-image::before {
            display: none;
        }

    .pl-content {
        padding: 30px 25px;
    }

    .pl-banner h1 {
        font-size: 20px;
    }
}
/* ============ INDUSTRIAL SPECIAL COATINGS PAGE STYLES ============ */
.specialcoatings-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.sp-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .sp-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.sp-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 25px;
}

    .sp-section.reverse {
        flex-direction: row-reverse;
    }

.sp-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .sp-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .sp-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .sp-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.sp-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .sp-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .sp-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Temperature stat highlight ---- */
.sp-temp {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,111,0,.15);
    border: 1px solid rgba(255,111,0,.5);
    border-left: 5px solid #ff6f00;
    border-radius: 0 8px 8px 0;
    padding: 16px 22px;
    margin: 5px 0 20px;
}

    .sp-temp .sp-temp-value {
        font-size: 42px;
        font-weight: 700;
        color: #ff9e40;
        line-height: 1;
        white-space: nowrap;
    }

        .sp-temp .sp-temp-value small {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            margin-top: 4px;
        }

    .sp-temp .sp-temp-text {
        font-size: 14.5px;
        line-height: 1.55;
    }

/* ---- Handling guidance callout ---- */
.sp-note {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .sp-note strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.sp-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .sp-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – ranges / application highlights */
        .sp-pills span.sp-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
        }

/* ---- Action buttons ---- */
.sp-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .sp-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .sp-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (industrial steel family) ---- */
/* Special Purpose intro – dark graphite */
.theme-sp-intro {
    background: linear-gradient(135deg, #262d35, #37424d);
}

    .theme-sp-intro h2 {
        border-color: #ff9e40;
    }

/* Etch Primer – steel */
.theme-sp-etch {
    background: linear-gradient(135deg, #2f3a44, #46545f);
}

    .theme-sp-etch h2 {
        border-color: #ff8a65;
    }

/* Heat Resistant – warm ember-toned graphite */
.theme-sp-heat {
    background: linear-gradient(135deg, #2b2320, #45362e);
}

    .theme-sp-heat h2 {
        border-color: #ffab40;
    }

/* Chlorinated Rubber – deep charcoal */
.theme-sp-cr {
    background: linear-gradient(135deg, #1f252b, #313b45);
}

    .theme-sp-cr h2 {
        border-color: #ff6f00;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .sp-section, .sp-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .sp-image {
        min-height: 300px;
    }

        .sp-image::after, .sp-image::before {
            display: none;
        }

    .sp-content {
        padding: 30px 25px;
    }

    .sp-banner h1 {
        font-size: 20px;
    }

    .sp-temp .sp-temp-value {
        font-size: 32px;
    }
}
/* ============ INDUSTRIAL THINNER PAGE STYLES ============ */
.idthinner-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.it-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .it-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single split section (image + content) ---- */
.it-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
}

.it-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .it-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .it-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .it-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.it-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #262d35, #37424d);
}

    /* ---- Typography ---- */
    .it-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .it-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Key importance callout ---- */
.it-note {
    background: rgba(255,213,79,.15);
    border: 1px solid rgba(255,213,79,.5);
    border-left: 5px solid #ffd54f;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .it-note strong {
        color: #ffd54f;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

/* ---- Safety callout ---- */
.it-safety {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .it-safety strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.it-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .it-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – product ranges */
        .it-pills span.it-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
            font-weight: 700;
        }

/* ---- Action buttons ---- */
.it-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.it-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .it-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .it-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .it-section {
        flex-direction: column;
        min-height: auto;
    }

    .it-image {
        min-height: 300px;
    }

        .it-image::after, .it-image::before {
            display: none;
        }

    .it-content {
        padding: 30px 25px;
    }

    .it-banner h1 {
        font-size: 20px;
    }
}/* ============ INDUSTRIAL SYNTHETIC ENAMEL PAGE STYLES ============ */
.synenamel-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.sy-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .sy-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.sy-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 25px;
}

    .sy-section.reverse {
        flex-direction: row-reverse;
    }

.sy-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .sy-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .sy-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .sy-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.sy-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .sy-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .sy-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .sy-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.sy-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .sy-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – product ranges / highlights */
        .sy-pills span.sy-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
        }

/* ---- Action buttons ---- */
.sy-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .sy-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .sy-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (industrial steel family) ---- */
/* Synthetic Enamel intro – dark graphite */
.theme-sy-intro {
    background: linear-gradient(135deg, #262d35, #37424d);
}

    .theme-sy-intro h2 {
        border-color: #ff9e40;
    }

/* Primers – steel */
.theme-sy-primers {
    background: linear-gradient(135deg, #2f3a44, #46545f);
}

    .theme-sy-primers h2 {
        border-color: #ff8a65;
    }

/* Top Coats – deep charcoal with strongest accent (main product) */
.theme-sy-topcoat {
    background: linear-gradient(135deg, #1f252b, #313b45);
}

    .theme-sy-topcoat h2 {
        border-color: #ff6f00;
    }

/* Stoving Enamel – heat theme: dark with ember accent */
.theme-sy-stoving {
    background: linear-gradient(135deg, #2b2320, #45362e);
}

    .theme-sy-stoving h2 {
        border-color: #ffab40;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .sy-section, .sy-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .sy-image {
        min-height: 300px;
    }

        .sy-image::after, .sy-image::before {
            display: none;
        }

    .sy-content {
        padding: 30px 25px;
    }

    .sy-banner h1 {
        font-size: 20px;
    }
}/* ============ INDUSTRIAL EPOXY COATINGS PAGE STYLES ============ */
.ind epoxy-page-wrapper {
    display: none;
}
/* safety reset */
.epoxy-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.ep-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .ep-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.ep-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .ep-section.reverse {
        flex-direction: row-reverse;
    }

.ep-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ep-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .ep-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .ep-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.ep-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ep-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ep-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .ep-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Application guidance callout ---- */
.ep-note {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .ep-note strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.ep-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .ep-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – high-performance / range highlights */
        .ep-pills span.ep-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
        }

/* ---- Action buttons ---- */
.ep-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ep-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .ep-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (industrial steel family) ---- */
/* Epoxy intro – dark graphite */
.theme-ep-intro {
    background: linear-gradient(135deg, #262d35, #37424d);
}

    .theme-ep-intro h2 {
        border-color: #ff9e40;
    }

/* Primers – steel with heavy anti-corrosion focus */
.theme-ep-primers {
    background: linear-gradient(135deg, #2f3a44, #46545f);
}

    .theme-ep-primers h2 {
        border-color: #ff8a65;
    }

/* Top Coats – deep charcoal */
.theme-ep-topcoat {
    background: linear-gradient(135deg, #1f252b, #313b45);
}

    .theme-ep-topcoat h2 {
        border-color: #ff6f00;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ep-section, .ep-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ep-image {
        min-height: 300px;
    }

        .ep-image::after, .ep-image::before {
            display: none;
        }

    .ep-content {
        padding: 30px 25px;
    }

    .ep-banner h1 {
        font-size: 20px;
    }
}/* ============ INDUSTRIAL PU COATINGS PAGE STYLES ============ */
.indpu-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (graphite + orange = industrial identity) ---- */
.ind-banner {
    background: linear-gradient(90deg, #21272e, #2c343d 55%, #37424d);
    border-bottom: 4px solid #ff6f00;
    padding: 18px 5%;
}

    .ind-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.ind-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 25px;
}

    .ind-section.reverse {
        flex-direction: row-reverse;
    }

.ind-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ind-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative graphite angle with orange edge at bottom of image */
    .ind-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1a1f25;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

    .ind-image::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 6px;
        background: #ff6f00;
        z-index: 2;
    }

.ind-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ind-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ind-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .ind-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.ind-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .ind-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* orange variant pill – colour/effect ranges */
        .ind-pills span.ind-range {
            background: rgba(255,111,0,.2);
            border-color: #ff9e40;
        }

/* ---- Action buttons ---- */
.ind-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ind-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ind-btn:hover {
        background: #ff6f00;
        border-color: #ff6f00;
        color: #fff;
    }

    .ind-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (industrial steel family) ---- */
/* PU Coatings intro – dark graphite */
.theme-ind-intro {
    background: linear-gradient(135deg, #262d35, #37424d);
}

    .theme-ind-intro h2 {
        border-color: #ff9e40;
    }

/* Primers – steel with warm oxide tone */
.theme-ind-primers {
    background: linear-gradient(135deg, #2f3a44, #46545f);
}

    .theme-ind-primers h2 {
        border-color: #ff8a65;
    }

/* Top Coats – deep charcoal with orange accent (flagship) */
.theme-ind-topcoat {
    background: linear-gradient(135deg, #1f252b, #313b45);
}

    .theme-ind-topcoat h2 {
        border-color: #ff6f00;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ind-section, .ind-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ind-image {
        min-height: 300px;
    }

        .ind-image::after, .ind-image::before {
            display: none;
        }

    .ind-content {
        padding: 30px 25px;
    }

    .ind-banner h1 {
        font-size: 20px;
    }
}/* ============ THINNER PAGE STYLES ============ */
.thinner-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (neutral slate = technical support identity) ---- */
.th-banner {
    background: linear-gradient(90deg, #37474f, #455a64 55%, #607d8b);
    padding: 18px 5%;
}

    .th-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single split section (image + content) ---- */
.th-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
}

.th-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .th-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative slate angle at bottom of image */
    .th-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #263238;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.th-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #455a64, #607d8b);
}

    /* ---- Typography ---- */
    .th-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .th-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Important guidance callout ---- */
.th-note {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ffd54f;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .th-note strong {
        color: #ffd54f;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

/* feature pills */
.th-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .th-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.th-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.th-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .th-btn:hover {
        background: #fff;
        color: #333;
    }

    .th-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .th-section {
        flex-direction: column;
        min-height: auto;
    }

    .th-image {
        min-height: 300px;
    }

        .th-image::after {
            display: none;
        }

    .th-content {
        padding: 30px 25px;
    }

    .th-banner h1 {
        font-size: 20px;
    }
}/* ============ GLASS COATING PAGE STYLES ============ */
.glasscoating-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (steel blue = glass identity) ---- */
.gc-banner {
    background: linear-gradient(90deg, #263238, #37474f 55%, #546e7a);
    padding: 18px 5%;
}

    .gc-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single split section (image + content) ---- */
.gc-section {
    display: flex;
    align-items: stretch;
    min-height: 520px;
}

.gc-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .gc-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative steel angle at bottom of image */
    .gc-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #1c262b;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.gc-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #37474f, #546e7a);
}

    /* ---- Typography ---- */
    .gc-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .gc-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.gc-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .gc-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* effect pill variant – icy highlight */
        .gc-pills span.gc-effect {
            background: rgba(179,229,252,.25);
            border-color: #81d4fa;
        }

/* ---- Action buttons ---- */
.gc-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .gc-btn:hover {
        background: #fff;
        color: #333;
    }

    .gc-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .gc-section {
        flex-direction: column;
        min-height: auto;
    }

    .gc-image {
        min-height: 300px;
    }

        .gc-image::after {
            display: none;
        }

    .gc-content {
        padding: 30px 25px;
    }

    .gc-banner h1 {
        font-size: 20px;
    }
}
/* ============ FIRE RETARDANT COATING PAGE STYLES ============ */
.fr-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (deep red = fire protection identity) ---- */
.fr-banner {
    background: linear-gradient(90deg, #b71c1c, #c62828 55%, #d84315);
    padding: 18px 5%;
}

    .fr-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.fr-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 25px;
}

    .fr-section.reverse {
        flex-direction: row-reverse;
    }

.fr-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .fr-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-red angle at bottom of image */
    .fr-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #7f1414;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.fr-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .fr-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .fr-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .fr-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Fire rating certification callout ---- */
.fr-ratings {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,112,67,.6);
    border-left: 5px solid #ff7043;
    padding: 16px 20px;
    margin: 5px 0 20px;
    border-radius: 0 4px 4px 0;
}

    .fr-ratings .fr-ratings-title {
        display: block;
        color: #ffab91;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .fr-ratings .fr-rating-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .fr-ratings .fr-rating {
        background: rgba(255,112,67,.2);
        border: 1px solid #ff7043;
        border-radius: 6px;
        padding: 10px 18px;
        text-align: center;
        flex: 1 1 130px;
    }

        .fr-ratings .fr-rating .fr-class {
            display: block;
            font-size: 20px;
            font-weight: 700;
            color: #ffcc80;
            line-height: 1.3;
        }

        .fr-ratings .fr-rating .fr-time {
            display: block;
            font-size: 12.5px;
            text-transform: uppercase;
            letter-spacing: .5px;
            opacity: .9;
        }

/* feature pills */
.fr-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .fr-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.fr-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.fr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .fr-btn:hover {
        background: #fff;
        color: #333;
    }

    .fr-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (fire family) ---- */
/* Wood intro – warm brown (wood substrate) */
.theme-fr-wood {
    background: linear-gradient(135deg, #4e342e, #6d4c41);
}

/* FR Coatings intro – deep fire red */
.theme-fr-intro {
    background: linear-gradient(135deg, #b71c1c, #c62828);
}

    .theme-fr-intro h2 {
        border-color: #ffcc80;
    }

/* 2K Clear – ember red-orange with gold accent */
.theme-fr-clear {
    background: linear-gradient(135deg, #bf360c, #d84315);
}

    .theme-fr-clear h2 {
        border-color: #ffd54f;
    }

/* 2K Pigmented – deep dark crimson (strongest protection) */
.theme-fr-pigmented {
    background: linear-gradient(135deg, #7f1414, #a31515);
}

    .theme-fr-pigmented h2 {
        border-color: #ffab91;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .fr-section, .fr-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .fr-image {
        min-height: 300px;
    }

        .fr-image::after {
            display: none;
        }

    .fr-content {
        padding: 30px 25px;
    }

    .fr-banner h1 {
        font-size: 20px;
    }
}
/* ============ SPECIAL EFFECTS (WOOD) PAGE STYLES ============ */
.sfx-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (deep purple = creative effects identity) ---- */
.se-banner {
    background: linear-gradient(90deg, #4a148c, #6a1b9a 55%, #8e24aa);
    padding: 18px 5%;
}

    .se-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.se-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .se-section.reverse {
        flex-direction: row-reverse;
    }

.se-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .se-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative purple angle at bottom of image */
    .se-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #38065e;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.se-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .se-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .se-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- 1000+ finishes highlight ---- */
.se-count {
    background: rgba(255,213,79,.15);
    border: 1px solid rgba(255,213,79,.5);
    border-left: 5px solid #ffd54f;
    padding: 14px 18px;
    margin: 5px 0 20px;
    border-radius: 0 4px 4px 0;
    font-size: 15px;
}

    .se-count strong {
        color: #ffd54f;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

/* ---- Metallic effect cards ---- */
.se-metal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 15px 0 10px;
}

.se-metal-card {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 20px 20px 16px;
    border-top: 4px solid #999;
}

    .se-metal-card h4 {
        margin: 0 0 10px;
        font-size: 15.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .se-metal-card p {
        font-size: 13.5px;
        margin: 0 0 10px;
        line-height: 1.6;
    }
/* per-metal accents */
.metal-silver {
    border-top-color: #eceff1;
}

    .metal-silver h4 {
        color: #eceff1;
    }

.metal-gold {
    border-top-color: #ffd54f;
}

    .metal-gold h4 {
        color: #ffd54f;
    }

.metal-bronze {
    border-top-color: #d2915c;
}

    .metal-bronze h4 {
        color: #d2915c;
    }

.metal-pearl {
    border-top-color: #e1bee7;
}

    .metal-pearl h4 {
        color: #e1bee7;
    }

.metal-steel {
    border-top-color: #90a4ae;
}

    .metal-steel h4 {
        color: #b0bec5;
    }

/* small particle-size pills inside cards */
.se-mini-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .se-mini-pills span {
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 20px;
        padding: 2px 10px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Effect cards grid (effects 2–9) ---- */
.se-effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.se-effect-card {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 22px 22px 18px;
    position: relative;
}

.se-effect-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffd54f;
    color: #4a148c;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}

.se-effect-card h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.se-effect-card p {
    font-size: 13.5px;
    margin: 0 0 10px;
    line-height: 1.6;
}

.se-mini-pills.se-dark span {
    background: rgba(255,213,79,.15);
    border-color: rgba(255,213,79,.45);
}

/* ---- Action buttons ---- */
.se-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.se-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .se-btn:hover {
        background: #fff;
        color: #333;
    }

    .se-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
.theme-se-intro {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

.theme-se-metallic {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
}

    .theme-se-metallic h2 {
        border-color: #ffd54f;
    }

.theme-se-range {
    background: linear-gradient(135deg, #5e1a8c, #7b1fa2);
}

    .theme-se-range h2 {
        border-color: #e1bee7;
    }

/* ---- Responsive ---- */
@media (max-width: 1092px) {
    .se-section, .se-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .se-image {
        min-height: 300px; width:500px;
    }

        .se-image::after {
            display: none;
        }

    .se-content {
        padding: 30px 25px;
    }

    .se-banner h1 {
        font-size: 20px;
    }
}/* ============ WATER BASED EXTERIOR COATINGS PAGE STYLES ============ */
.wbext-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (green = eco waterborne identity) ---- */
.wbe-banner {
    background: linear-gradient(90deg, #1b5e20, #2e7d32 55%, #00695c);
    padding: 18px 5%;
}

    .wbe-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.wbe-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .wbe-section.reverse {
        flex-direction: row-reverse;
    }

.wbe-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .wbe-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-green angle at bottom of image */
    .wbe-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #0f3d1e;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.wbe-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- System step tag (Part 1 / 2 / 3 of the system) ---- */
.wbe-series-tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,0,0,.25);
    border-left: 4px solid #a5d6a7;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 15px;
}

/* ---- Warranty highlight callout ---- */
.wbe-warranty {
    background: rgba(255,213,79,.15);
    border: 1px solid rgba(255,213,79,.5);
    border-left: 5px solid #ffd54f;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 15px;
    border-radius: 0 4px 4px 0;
}

    .wbe-warranty strong {
        color: #ffd54f;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 16px;
    }

/* ---- Typography ---- */
.wbe-content h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,.6);
}

.wbe-content p {
    margin: 0 0 15px;
    font-size: 15px;
}

/* feature pills */
.wbe-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .wbe-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.wbe-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.wbe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .wbe-btn:hover {
        background: #fff;
        color: #333;
    }

    .wbe-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (green eco family) ---- */
/* Intro – deep eco green */
.theme-wbe-intro {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

/* Isolator – forest green */
.theme-wbe-isolator {
    background: linear-gradient(135deg, #2e7d32, #388e3c);
}

    .theme-wbe-isolator h2 {
        border-color: #b9f6ca;
    }

/* Base Coat – fresh mid green */
.theme-wbe-base {
    background: linear-gradient(135deg, #00695c, #00796b);
}

    .theme-wbe-base h2 {
        border-color: #a7ffeb;
    }

/* Top Coat – deep premium teal with aqua accent */
.theme-wbe-top {
    background: linear-gradient(135deg, #004d40, #00695c);
}

    .theme-wbe-top h2 {
        border-color: #80deea;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .wbe-section, .wbe-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .wbe-image {
        min-height: 300px;
    }

        .wbe-image::after {
            display: none;
        }

    .wbe-content {
        padding: 30px 25px;
    }

    .wbe-banner h1 {
        font-size: 20px;
    }
}/* ============ WATERBORNE COATINGS PAGE STYLES ============ */
.waterborne-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner (green = eco waterborne identity) ---- */
.wb-banner {
    background: linear-gradient(90deg, #1b5e20, #2e7d32 55%, #00695c);
    padding: 18px 5%;
}

    .wb-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.wb-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .wb-section.reverse {
        flex-direction: row-reverse;
    }

.wb-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .wb-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-green angle at bottom of image */
    .wb-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #0f3d1e;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.wb-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Series tag (Water Based Interior Wood Coatings) ---- */
.wb-series-tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,0,0,.25);
    border-left: 4px solid #a5d6a7;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 15px;
}

/* ---- Typography ---- */
.wb-content h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,.6);
}

.wb-content p {
    margin: 0 0 15px;
    font-size: 15px;
}

/* feature pills */
.wb-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .wb-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.wb-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.wb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .wb-btn:hover {
        background: #fff;
        color: #333;
    }

    .wb-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (green eco family) ---- */
/* Intro – deep eco green */
.theme-wb-intro {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

/* 1K – fresh light green with mint accent */
.theme-1k {
    background: linear-gradient(135deg, #2e7d32, #43a047);
}

    .theme-1k h2 {
        border-color: #b9f6ca;
    }

/* 2K – deep premium green with bright mint accent */
.theme-2k {
    background: linear-gradient(135deg, #00695c, #00796b);
}

    .theme-2k h2 {
        border-color: #a7ffeb;
    }

/* Parquet – teal-green with aqua accent */
.theme-parquet {
    background: linear-gradient(135deg, #004d40, #00695c);
}

    .theme-parquet h2 {
        border-color: #80deea;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .wb-section, .wb-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .wb-image {
        min-height: 300px;
    }

        .wb-image::after {
            display: none;
        }

    .wb-content {
        padding: 30px 25px;
    }

    .wb-banner h1 {
        font-size: 20px;
    }
}/* ============ NITROCELLULOSE PAGE STYLES ============ */
.nc-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.nc-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .nc-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.nc-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .nc-section.reverse {
        flex-direction: row-reverse;
    }

.nc-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .nc-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .nc-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.nc-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Series tag (Clear Coatings / Pigmented Coatings) ---- */
.nc-series-tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,0,0,.25);
    border-left: 4px solid #ffcc80;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 15px;
}

/* ---- Typography ---- */
.nc-content h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,.6);
}

.nc-content p {
    margin: 0 0 15px;
    font-size: 15px;
}

/* ---- Application guidance callout ---- */
.nc-warning {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .nc-warning strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.nc-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .nc-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.nc-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.nc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .nc-btn:hover {
        background: #fff;
        color: #333;
    }

    .nc-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (wood family) ---- */
/* Intro – brand brown */
.theme-nc-intro {
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

/* Sanding Sealer – walnut */
.theme-nc-sealer {
    background: linear-gradient(135deg, #4e342e, #6d4c41);
}

    .theme-nc-sealer h2 {
        border-color: #d7ccc8;
    }

/* NC Lacquer – deep mahogany with gold accent */
.theme-nc-lacquer {
    background: linear-gradient(135deg, #3e2723, #5d4037);
}

    .theme-nc-lacquer h2 {
        border-color: #ffd54f;
    }

/* NC Primer – espresso */
.theme-nc-primer {
    background: linear-gradient(135deg, #4a332c, #63463c);
}

    .theme-nc-primer h2 {
        border-color: #ffe0b2;
    }

/* Pigmented Top Coat – golden teak with gold accent */
.theme-nc-ptopcoat {
    background: linear-gradient(135deg, #6d4c41, #8d6e63);
}

    .theme-nc-ptopcoat h2 {
        border-color: #ffcc80;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .nc-section, .nc-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .nc-image {
        min-height: 300px;
    }

        .nc-image::after {
            display: none;
        }

    .nc-content {
        padding: 30px 25px;
    }

    .nc-banner h1 {
        font-size: 20px;
    }
}/* ============ MELAMINE PAGE STYLES ============ */
.melamine-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.me-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .me-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.me-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .me-section.reverse {
        flex-direction: row-reverse;
    }

.me-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .me-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .me-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.me-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .me-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .me-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .me-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Application guidance callout ---- */
.me-warning {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .me-warning strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.me-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .me-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.me-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.me-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .me-btn:hover {
        background: #fff;
        color: #333;
    }

    .me-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
/* Intro – brand brown */
.theme-me-intro {
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

/* Sealer – medium walnut */
.theme-me-sealer {
    background: linear-gradient(135deg, #4e342e, #6d4c41);
}

    .theme-me-sealer h2 {
        border-color: #d7ccc8;
    }

/* Top Coat Matt to Satin – warm chestnut */
.theme-me-matt {
    background: linear-gradient(135deg, #6d4c41, #8d6e63);
}

    .theme-me-matt h2 {
        border-color: #ffe0b2;
    }

/* Top Coat Gloss & Super Gloss – deep mahogany with gold accent */
.theme-me-gloss {
    background: linear-gradient(135deg, #3e2723, #5d4037);
}

    .theme-me-gloss h2 {
        border-color: #ffd54f;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .me-section, .me-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .me-image {
        min-height: 300px;
    }

        .me-image::after {
            display: none;
        }

    .me-content {
        padding: 30px 25px;
    }

    .me-banner h1 {
        font-size: 20px;
    }
}/* ============ ACRYLIC PU PAGE STYLES ============ */
.acrylicpu-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.ap-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .ap-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.ap-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .ap-section.reverse {
        flex-direction: row-reverse;
    }

.ap-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ap-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .ap-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.ap-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ap-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ap-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .ap-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.ap-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .ap-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* variant pill for characteristics / limitations */
        .ap-pills span.ap-alt {
            background: rgba(0,0,0,.25);
            border-style: dashed;
        }

/* ---- Action buttons ---- */
.ap-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ap-btn:hover {
        background: #fff;
        color: #333;
    }

    .ap-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ----
   Lighter / cooler wood tones than Alkyd PU,
   with teal-green accents signalling water-clear chemistry */

/* Intro – greige wood */
.theme-ap-intro {
    background: linear-gradient(135deg, #6d5b52, #8d7a6f);
}

/* Acrylic PU Coating – light oak with teal accent */
.theme-ap-coating {
    background: linear-gradient(135deg, #7d6b5d, #9c8a7a);
}

    .theme-ap-coating h2 {
        border-color: #80cbc4;
    }

/* Clear Sealer – pale washed wood */
.theme-ap-sealer {
    background: linear-gradient(135deg, #8d7a6f, #b0a099);
}

    .theme-ap-sealer h2 {
        border-color: #b2dfdb;
    }

/* Clear Top Coat – light beech with aqua accent */
.theme-ap-topcoat {
    background: linear-gradient(135deg, #8d7a6f, #a89188);
}

    .theme-ap-topcoat h2 {
        border-color: #4db6ac;
    }

/* Pigmented Primer – deeper taupe */
.theme-ap-primer {
    background: linear-gradient(135deg, #5f4f47, #7d6b5d);
}

    .theme-ap-primer h2 {
        border-color: #c8e6c9;
    }

/* Pigmented Top Coat – golden grey-wood with green accent */
.theme-ap-ptopcoat {
    background: linear-gradient(135deg, #75655a, #93816f);
}

    .theme-ap-ptopcoat h2 {
        border-color: #a5d6a7;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ap-section, .ap-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ap-image {
        min-height: 300px;
    }

        .ap-image::after {
            display: none;
        }

    .ap-content {
        padding: 30px 25px;
    }

    .ap-banner h1 {
        font-size: 20px;
    }
}
/* ============ POLYESTER PAGE STYLES ============ */
.polyester-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.pe-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .pe-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.pe-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .pe-section.reverse {
        flex-direction: row-reverse;
    }

.pe-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .pe-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .pe-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.pe-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .pe-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .pe-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .pe-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Safety warning callout ---- */
.pe-warning {
    background: rgba(0,0,0,.3);
    border-left: 4px solid #ef6c00;
    padding: 14px 18px;
    margin: 5px 0 20px;
    font-size: 14.5px;
    border-radius: 0 4px 4px 0;
}

    .pe-warning strong {
        color: #ffcc80;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* feature pills */
.pe-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .pe-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.pe-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .pe-btn:hover {
        background: #fff;
        color: #333;
    }

    .pe-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
/* Intro – brand brown */
.theme-pe-intro {
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

/* Paraffinic – deep polished mahogany with gold accent (premium mirror-gloss) */
.theme-paraffinic {
    background: linear-gradient(135deg, #3e2723, #4e342e);
}

    .theme-paraffinic h2 {
        border-color: #ffd54f;
    }

/* Non-Paraffinic – warm medium wood with amber accent */
.theme-nonparaffinic {
    background: linear-gradient(135deg, #5d4037, #795548);
}

    .theme-nonparaffinic h2 {
        border-color: #ffe0b2;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .pe-section, .pe-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .pe-image {
        min-height: 300px;
    }

        .pe-image::after {
            display: none;
        }

    .pe-content {
        padding: 30px 25px;
    }

    .pe-banner h1 {
        font-size: 20px;
    }
}/* ============ ISOLATOR PAGE STYLES ============ */
.isolator-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.iso-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .iso-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single split section (image + content) ---- */
.iso-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
}

.iso-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .iso-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .iso-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.iso-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

    /* ---- Typography ---- */
    .iso-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .iso-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

        .iso-content p strong {
            color: #ffcc80;
        }

/* benefit pills */
.iso-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 25px;
}

    .iso-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Product Code Table ---- */
.iso-table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0 25px;
    background: rgba(0,0,0,.18);
    border-radius: 6px;
    overflow: hidden;
}

    .iso-table th {
        background: rgba(0,0,0,.38);
        text-align: left;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .iso-table td {
        padding: 14px 16px;
        font-size: 14.5px;
        border-top: 1px solid rgba(255,255,255,.2);
        vertical-align: top;
    }

    .iso-table .iso-code {
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
        color: #ffcc80;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.iso-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.iso-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .iso-btn:hover {
        background: #fff;
        color: #333;
    }

    .iso-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .iso-section {
        flex-direction: column;
        min-height: auto;
    }

    .iso-image {
        min-height: 300px;
    }

        .iso-image::after {
            display: none;
        }

    .iso-content {
        padding: 30px 25px;
    }

    .iso-banner h1 {
        font-size: 20px;
    }
}
/* ============ ALKYD PU PAGE STYLES ============ */
.alkydpu-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.pu-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .pu-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.pu-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .pu-section.reverse {
        flex-direction: row-reverse;
    }

.pu-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .pu-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .pu-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.pu-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .pu-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .pu-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .pu-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* feature pills */
.pu-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .pu-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
        /* variant pill for characteristics / limitations */
        .pu-pills span.pu-alt {
            background: rgba(0,0,0,.25);
            border-style: dashed;
        }

/* ---- Action buttons ---- */
.pu-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .pu-btn:hover {
        background: #fff;
        color: #333;
    }

    .pu-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (wood family) ---- */
/* Intro – brand brown */
.theme-pu-intro {
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

/* Alkyd PU Coating – rich mid brown with gold accent */
.theme-alkyd {
    background: linear-gradient(135deg, #4e342e, #6d4c41);
}

    .theme-alkyd h2 {
        border-color: #ffcc80;
    }

/* Clear Sealer – walnut brown */
.theme-sealer {
    background: linear-gradient(135deg, #5d4037, #8d6e63);
}

/* Clear Top Coats – warm chestnut */
.theme-topcoat {
    background: linear-gradient(135deg, #6d4c41, #a1887f);
}

    .theme-topcoat h2 {
        border-color: #ffe0b2;
    }

/* Pigmented Primers – deep espresso */
.theme-primer {
    background: linear-gradient(135deg, #3e2723, #5d4037);
}

    .theme-primer h2 {
        border-color: #d7ccc8;
    }

/* 2K Pigmented Top Coats – golden teak with gold accent */
.theme-2k {
    background: linear-gradient(135deg, #795548, #8d6e63);
}

    .theme-2k h2 {
        border-color: #ffcc80;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .pu-section, .pu-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .pu-image {
        min-height: 300px;
    }

        .pu-image::after {
            display: none;
        }

    .pu-content {
        padding: 30px 25px;
    }

    .pu-banner h1 {
        font-size: 20px;
    }
}/* ============================================================
   TEKNOVACE — vm.css  (Vision & Mission page styles only)
   Depends on styles.css for tokens, base, .sec, .container,
   .tag, .title, .lead, .btn, .reveal, .nano
   ============================================================ */

/* ---------- VM PANELS ---------- */
.vm-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: stretch
}

.vm-panel {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(1.8rem,3.5vw,2.6rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .4s
}

    .vm-panel:hover {
        transform: translateY(-8px);
        box-shadow: var(--sh)
    }

    .vm-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: var(--c)
    }

    .vm-panel::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -70px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: var(--ct);
        transition: .45s
    }

    .vm-panel:hover::after {
        transform: scale(1.35)
    }

.vm-ghost {
    position: absolute;
    right: 1.1rem;
    top: .4rem;
    font-family: 'Outfit';
    font-weight: 800;
    font-size: clamp(4.5rem,8vw,7rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c);
    opacity: .28;
    transition: .35s;
    z-index: 1
}

.vm-panel:hover .vm-ghost {
    opacity: .75
}

.vm-ic {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 22px -8px rgba(25,28,43,.35)
}

    .vm-ic .lucide {
        width: 26px;
        height: 26px
    }

.vm-kick {
    position: relative;
    z-index: 2;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c);
    margin-bottom: .3rem
}

.vm-panel h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(1.5rem,2.6vw,2rem);
    margin-bottom: .9rem
}

.vm-panel > p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: .97rem;
    margin-bottom: 1.3rem
}

.vm-points {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .6rem;
    margin-top: auto
}

    .vm-points li {
        display: flex;
        gap: .7rem;
        align-items: flex-start;
        font-weight: 500;
        font-size: .9rem;
        line-height: 1.5
    }

    .vm-points .lucide {
        width: 20px;
        height: 20px;
        color: var(--c);
        background: var(--ct);
        border-radius: 50%;
        padding: 4px;
        flex: none;
        margin-top: .1rem
    }

/* ---------- DRIVE PILLARS ---------- */
#drive {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.pillars {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem;
    margin-top: 2.5rem
}

.pillar {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.6rem 1.3rem;
    overflow: hidden;
    transition: .35s
}

    .pillar:hover {
        transform: translateY(-7px);
        box-shadow: var(--sh)
    }

    .pillar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--c);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s
    }

    .pillar:hover::before {
        transform: scaleY(1)
    }

    .pillar i.pi {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--ct);
        display: grid;
        place-items: center;
        margin-bottom: 1rem
    }

        .pillar i.pi .lucide {
            width: 21px;
            height: 21px;
            color: var(--c)
        }

    .pillar h3 {
        font-size: 1.05rem;
        margin-bottom: .4rem
    }

    .pillar p {
        color: var(--muted);
        font-size: .86rem
    }

/* ---------- PLEDGE / CTA ---------- */
.pledge {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    text-align: center;
    color: #fff;
    padding: clamp(2.6rem,6vw,4.2rem) 1.5rem;
    background: linear-gradient(120deg,var(--red),#B93320 55%,var(--ink))
}

    .pledge::before, .pledge::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.18)
    }

    .pledge::before {
        width: 190px;
        height: 190px;
        top: -70px;
        left: -70px
    }

    .pledge::after {
        width: 250px;
        height: 250px;
        bottom: -110px;
        right: -90px
    }

    .pledge h2 {
        font-size: clamp(1.7rem,3.4vw,2.6rem);
        font-weight: 800;
        max-width: 24ch;
        margin: 0 auto;
        position: relative;
        z-index: 1
    }

        .pledge h2 em {
            font-style: normal;
            color: var(--yellow)
        }

    .pledge p {
        color: rgba(255,255,255,.86);
        max-width: 56ch;
        margin: 1rem auto 1.9rem;
        position: relative;
        z-index: 1
    }

.pledge-btns {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn-wht {
    background: #fff;
    color: var(--ink)
}

    .btn-wht:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

.btn-out {
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff
}

    .btn-out:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-3px)
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
    .vm-panels {
        grid-template-columns: 1fr
    }

    .pillars {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:560px) {
    .pillars {
        grid-template-columns: 1fr
    }

    .vm-ghost {
        font-size: 4.2rem
    }
}
/* ============================================================
   TEKNOVACE — team.css  (Leadership page styles only)
   Depends on styles.css for tokens, base, .sec, .container,
   .tag, .title, .lead, .btn, .reveal
   + about.css for .page-hero / .crumbs / .ph-* 
   ============================================================ */

/* ---------- FILTER BAR ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    margin: 2.2rem 0 2.4rem
}

.f-chip {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .82rem;
    padding: .6rem 1.15rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    transition: .3s
}

    .f-chip:hover {
        border-color: var(--ink);
        color: var(--ink);
        transform: translateY(-2px)
    }

    .f-chip.on {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff
    }

.f-count {
    margin-left: auto;
    font-weight: 500;
    font-size: .84rem;
    color: var(--muted)
}

    .f-count b {
        color: var(--red);
        font-family: 'Outfit'
    }

/* ---------- TEAM GRID ---------- */
.tm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 1.4rem
}

.tm-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem 1.4rem 1.6rem;
    text-align: center;
    overflow: hidden;
    transition: .4s
}

    .tm-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--sh)
    }

    .tm-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--c);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .45s
    }

    .tm-card:hover::before {
        transform: scaleX(1)
    }

    .tm-card.hide {
        display: none
    }

/* photo slot — real photo on top, monogram fallback beneath */
.tm-photo {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    background: var(--ct);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff,0 0 0 5px var(--ct)
}

.tm-mono {
    font-family: 'Outfit';
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--c);
    letter-spacing: .02em;
    user-select: none;
    grid-area: 1/1
}

.tm-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: 1/1;
    transition: transform .6s
}

.tm-card:hover .tm-photo img {
    transform: scale(1.08)
}

.tm-name {
    font-size: 1.14rem;
    margin-bottom: .25rem
}

.tm-role {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
    margin-bottom: 1rem
}

.tm-cat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .63rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .36rem .72rem;
    border-radius: 999px;
    background: var(--ct);
    color: var(--c)
}

    .tm-cat::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c)
    }

/* ---------- JOIN CTA ---------- */
.join {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    text-align: center;
    color: #fff;
    padding: clamp(2.4rem,5vw,3.8rem) 1.5rem;
    background: linear-gradient(120deg,var(--red),#B93320 55%,var(--ink))
}

    .join::before, .join::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.18)
    }

    .join::before {
        width: 180px;
        height: 180px;
        top: -70px;
        left: -70px
    }

    .join::after {
        width: 240px;
        height: 240px;
        bottom: -110px;
        right: -90px
    }

    .join h2 {
        font-size: clamp(1.7rem,3.2vw,2.5rem);
        font-weight: 800;
        max-width: 24ch;
        margin: 0 auto;
        position: relative;
        z-index: 1
    }

        .join h2 em {
            font-style: normal;
            color: var(--yellow)
        }

    .join p {
        color: rgba(255,255,255,.86);
        max-width: 54ch;
        margin: 1rem auto 1.9rem;
        position: relative;
        z-index: 1
    }

.join-btns {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn-wht {
    background: #fff;
    color: var(--ink)
}

    .btn-wht:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

.btn-out {
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff
}

    .btn-out:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-3px)
    }
/* ============================================================
   TEKNOVACE — infra.css  (Infrastructure page styles only)
   Depends on styles.css for tokens, base, .sec, .container,
   .tag, .title, .lead, .btn, .reveal, .nano, .hl, .blob-card
   + about.css for .page-hero / .crumbs / .ph-*
   ============================================================ */

/* ---------- OVERVIEW: COPY + STATS ---------- */
.ov-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(2.4rem,6vw,4.6rem);
    align-items: start
}

.ov-copy p {
    color: var(--muted);
    margin-bottom: 1.15rem;
    font-size: .99rem
}

    .ov-copy p b {
        color: var(--ink)
    }

.in-stats {
    position: sticky;
    top: 100px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.1rem
}

.in-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.5rem 1.1rem;
    text-align: center;
    transition: .3s
}

    .in-stat:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
    }

    .in-stat b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: clamp(1.6rem,2.6vw,2.2rem);
        display: block;
        line-height: 1.1;
        color: var(--c)
    }

    .in-stat span {
        color: var(--muted);
        font-weight: 500;
        font-size: .84rem
    }

/* ---------- FACTORY CARDS ---------- */
#factories {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.fact-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem
}

.fact-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: .35s
}

    .fact-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
    }

.fact-media {
    position: relative;
    min-height: 250px;
    background: var(--ct)
}

    .fact-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s
    }

.fact-card:hover .fact-media img {
    transform: scale(1.06)
}

.fact-ic {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px -6px rgba(25,28,43,.4)
}

    .fact-ic .lucide {
        width: 21px;
        height: 21px
    }

.fact-status {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    background: rgba(255,255,255,.94);
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .42rem .8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

    .fact-status i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--c);
        flex: none
    }

    .fact-status.up {
        background: var(--yellow-t);
        color: #8A6400
    }

        .fact-status.up i {
            background: #C9940A
        }

.fact-body {
    padding: 1.7rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column
}

.fact-kick {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--c);
    margin-bottom: .35rem
}

.fact-body h3 {
    font-size: 1.35rem;
    margin-bottom: .55rem
}

.fact-body > p {
    color: var(--muted);
    font-size: .93rem;
    margin-bottom: 1.2rem
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .8rem;
    margin-bottom: 1.2rem
}

.spec {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: .8rem .9rem
}

    .spec small {
        display: block;
        font-weight: 700;
        font-size: .62rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .2rem
    }

    .spec b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: 1.02rem;
        line-height: 1.25;
        color: var(--ink)
    }

.fact-note {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .86rem;
    color: var(--c)
}

    .fact-note .lucide {
        width: 17px;
        height: 17px;
        flex: none
    }

/* ---------- AUTOMATION PANEL ---------- */
.auto-panel {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    color: #fff;
    padding: clamp(2.4rem,5vw,4rem) clamp(1.5rem,4vw,3.2rem);
    background: linear-gradient(120deg,#1B1F33,var(--ink))
}

    .auto-panel::before, .auto-panel::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.12)
    }

    .auto-panel::before {
        width: 200px;
        height: 200px;
        top: -80px;
        right: -70px
    }

    .auto-panel::after {
        width: 260px;
        height: 260px;
        bottom: -120px;
        left: -100px
    }

.auto-kick {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    padding: .42rem 1rem;
    border-radius: 999px;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase
}

    .auto-kick i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--yellow)
    }

.auto-panel h2 {
    font-size: clamp(1.7rem,3.2vw,2.4rem);
    font-weight: 800;
    margin: 1.1rem 0 .7rem;
    position: relative;
    z-index: 1;
    max-width: 24ch
}

    .auto-panel h2 em {
        font-style: normal;
        color: var(--yellow)
    }

.auto-panel > p {
    color: rgba(255,255,255,.82);
    max-width: 64ch;
    position: relative;
    z-index: 1;
    font-size: .97rem
}

.flow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.1rem;
    margin: 2.2rem 0 1.6rem;
    position: relative;
    z-index: 1
}

.f-step {
    position: relative;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 1.35rem 1.15rem;
    backdrop-filter: blur(6px);
    transition: .3s
}

    .f-step:hover {
        background: rgba(255,255,255,.15);
        transform: translateY(-5px)
    }

    .f-step b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: .68rem;
        letter-spacing: .16em;
        color: var(--yellow);
        display: block;
        margin-bottom: .45rem
    }

    .f-step h4 {
        font-size: 1.02rem;
        margin-bottom: .3rem;
        display: flex;
        align-items: center;
        gap: .5rem
    }

        .f-step h4 .lucide {
            width: 19px;
            height: 19px;
            color: var(--yellow);
            flex: none
        }

    .f-step p {
        font-size: .83rem;
        color: rgba(255,255,255,.78)
    }

    .f-step:not(:last-child)::after {
        content: "→";
        position: absolute;
        right: -.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--yellow);
        font-weight: 700;
        z-index: 2
    }

.auto-note {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(242,183,5,.14);
    border: 1px dashed rgba(242,183,5,.55);
    color: #FFE9A8;
    padding: .75rem 1.15rem;
    border-radius: 14px;
    font-weight: 600;
    font-size: .88rem;
    position: relative;
    z-index: 1
}

    .auto-note .lucide {
        width: 18px;
        height: 18px;
        color: var(--yellow);
        flex: none
    }

/* ---------- NETWORK ---------- */
#network {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.net-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.3rem;
    margin-top: 2.5rem
}

.net-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.7rem 1.6rem;
    overflow: hidden;
    transition: .35s
}

    .net-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--sh)
    }

    .net-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--c);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .45s
    }

    .net-card:hover::before {
        transform: scaleX(1)
    }

.net-big {
    font-family: 'Outfit';
    font-weight: 800;
    font-size: clamp(2.4rem,4vw,3.2rem);
    line-height: 1;
    color: var(--c);
    margin-bottom: .5rem
}

    .net-big small {
        font-size: .45em;
        font-weight: 800;
        letter-spacing: .06em
    }

.net-card h3 {
    font-size: 1.12rem;
    margin-bottom: .45rem
}

.net-card p {
    color: var(--muted);
    font-size: .89rem;
    margin-bottom: 1rem
}

.net-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

    .net-chips span {
        font-size: .72rem;
        font-weight: 600;
        padding: .36rem .68rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        transition: .3s
    }

.net-card:hover .net-chips span {
    background: var(--ct);
    border-color: var(--ct);
    color: var(--ink)
}

/* ---------- R&D ---------- */
.rd-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.4rem,5vw,4.2rem);
    align-items: center
}

.rd-copy p {
    color: var(--muted);
    margin-bottom: 1.15rem;
    font-size: .99rem
}

    .rd-copy p b {
        color: var(--ink)
    }

.rd-side {
    display: grid;
    gap: 1.1rem
}

/* ---------- CTA ---------- */
.infra-cta {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    text-align: center;
    color: #fff;
    padding: clamp(2.4rem,5vw,3.8rem) 1.5rem;
    background: linear-gradient(120deg,var(--red),#B93320 55%,var(--ink))
}

    .infra-cta::before, .infra-cta::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.18)
    }

    .infra-cta::before {
        width: 180px;
        height: 180px;
        top: -70px;
        left: -70px
    }

    .infra-cta::after {
        width: 240px;
        height: 240px;
        bottom: -110px;
        right: -90px
    }

    .infra-cta h2 {
        font-size: clamp(1.7rem,3.2vw,2.5rem);
        font-weight: 800;
        max-width: 24ch;
        margin: 0 auto;
        position: relative;
        z-index: 1
    }

        .infra-cta h2 em {
            font-style: normal;
            color: var(--yellow)
        }

    .infra-cta p {
        color: rgba(255,255,255,.86);
        max-width: 54ch;
        margin: 1rem auto 1.9rem;
        position: relative;
        z-index: 1
    }

.infra-cta-btns {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn-wht {
    background: #fff;
    color: var(--ink)
}

    .btn-wht:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

.btn-out {
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff
}

    .btn-out:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-3px)
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
    .spec-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:900px) {
    .ov-grid, .rd-grid {
        grid-template-columns: 1fr
    }

    .in-stats {
        position: static
    }

    .fact-card {
        grid-template-columns: 1fr
    }

    .fact-media {
        min-height: 220px
    }

    .net-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto
    }

    .flow {
        grid-template-columns: repeat(2,1fr)
    }

    .f-step:not(:last-child)::after {
        display: none
    }
}

@media (max-width:560px) {
    .flow {
        grid-template-columns: 1fr
    }

    .in-stats {
        grid-template-columns: repeat(2,1fr)
    }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
    .fest-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto
    }

    .prod-cols {
        grid-template-columns: 1fr
    }

    .look-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:900px) {
    .seg-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto
    }

    .primer-grid {
        grid-template-columns: 1fr
    }

    .prod-wrap {
        grid-template-columns: 1fr
    }

    .prod-media {
        min-height: 210px
    }

    .variant {
        grid-template-columns: auto 1fr
    }

        .variant .v-fin {
            display: none
        }

    .shade-wrap {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .look-grid {
        grid-template-columns: 1fr
    }

    .look-card {
        height: 230px
    }
}
/* ============ INTERIOR WALLS PAGE STYLES ============ */
.interior-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.iw-banner {
    background: linear-gradient(90deg, #c2185b, #8e24aa 55%, #6a1b9a);
    padding: 18px 5%;
}

    .iw-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
/* ============ EXTERIOR WALLS PAGE STYLES ============ */
.exterior-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.ex-banner {
    background: linear-gradient(90deg, #0d47a1, #1565c0 55%, #0277bd);
    padding: 18px 5%;
}

    .ex-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.ex-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .ex-section.reverse {
        flex-direction: row-reverse;
    }

.ex-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ex-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative navy angle at bottom of image */
    .ex-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #0a2a52;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.ex-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ex-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ex-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .ex-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* dash-style bullet list */
.ex-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .ex-list li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 7px;
        font-size: 15px;
    }

        .ex-list li::before {
            content: "-";
            position: absolute;
            left: 4px;
            font-weight: 700;
        }

/* coverage highlight */
.ex-coverage {
    background: rgba(255,255,255,.15);
    border-left: 4px solid #fff;
    padding: 10px 15px;
    font-size: 14.5px;
    margin: 15px 0;
}

    .ex-coverage strong {
        text-transform: uppercase;
    }

/* ---- Action buttons ---- */
.ex-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ex-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ex-btn:hover {
        background: #fff;
        color: #333;
    }

    .ex-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
.theme-ex-intro {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
}

/* Empera – flagship deep navy with gold accent */
.theme-empera {
    background: linear-gradient(135deg, #0a2a52, #123a6b);
}

    .theme-empera h2 {
        border-color: #ffd54f;
    }

/* Glano – sky blue premium */
.theme-glano {
    background: linear-gradient(135deg, #0277bd, #29b6f6);
}

/* Washguard – economy amber */
.theme-washguard {
    background: linear-gradient(135deg, #e65100, #f59331);
}

/* Dhaal Premium primer – rose red */
.theme-dhaal {
    background: linear-gradient(135deg, #ad1457, #d81b60);
}

/* Dhaal Eco primer – warm orange */
.theme-dhaal-eco {
    background: linear-gradient(135deg, #e67e22, #e8890f);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ex-section, .ex-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ex-image {
        min-height: 300px;
    }

        .ex-image::after {
            display: none;
        }

    .ex-content {
        padding: 30px 25px;
    }

    .ex-banner h1 {
        font-size: 20px;
    }
}
/* ============ INTERIOR SPECIAL EFFECTS PAGE STYLES ============ */
.effects-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.ef-banner {
    background: linear-gradient(90deg, #c2185b, #8e24aa 55%, #6a1b9a);
    padding: 18px 5%;
}

    .ef-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
.etexture-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.et-banner {
    background: linear-gradient(90deg, #0d47a1, #1565c0 55%, #0277bd);
    padding: 18px 5%;
}

    .et-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Single section: sticky image + all content ---- */
.et-section {
    display: flex;
    align-items: stretch;
}

.et-image {
    flex: 1 1 42%;
    position: relative;
}
/* sticky wrapper keeps image in view while content scrolls */
.et-image-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.et-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* decorative navy angle at bottom of image */
.et-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42%;
    height: 55px;
    background: #0a2a52;
    clip-path: polygon(0 100%, 0 30%, 100% 100%);
    z-index: 2;
}

.et-content {
    flex: 1 1 58%;
    padding: 55px 60px;
    background: linear-gradient(135deg, #1565c0, #1e88e5);
}

    /* ---- Typography ---- */
    .et-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .et-content h3 {
        font-size: 19px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 12px;
        position: relative;
        padding-left: 16px;
    }
        /* coloured accent bar per product */
        .et-content h3::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 5px;
            border-radius: 2px;
        }

.accent-marble::before {
    background: #cfd8dc;
}

.accent-stone::before {
    background: #ffcc80;
}

.accent-italica::before {
    background: #ff7043;
}

.et-content p {
    margin: 0 0 15px;
    font-size: 15px;
}

/* separator between products */
.et-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.3);
    margin: 35px 0;
}

/* ---- Action buttons ---- */
.et-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.et-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .et-btn:hover {
        background: #fff;
        color: #333;
    }

    .et-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .et-section {
        flex-direction: column;
    }

    .et-image-sticky {
        position: static;
        height: auto;
        min-height: 300px;
    }

    .et-image::after {
        display: none;
    }

    .et-content {
        padding: 30px 25px;
    }

    .et-banner h1 {
        font-size: 20px;
    }
}
/* ============ ENAMELS PAGE STYLES ============ */
.enamel-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.en-banner {
    background: linear-gradient(90deg, #c2185b, #8e24aa 55%, #6a1b9a);
    padding: 18px 5%;
}

    .en-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.en-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .en-section.reverse {
        flex-direction: row-reverse;
    }

.en-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .en-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative purple angle at bottom of image */
    .en-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3d1470;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.en-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .en-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .en-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .en-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* dash-style bullet list */
.en-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .en-list li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 7px;
        font-size: 15px;
    }

        .en-list li::before {
            content: "-";
            position: absolute;
            left: 4px;
            font-weight: 700;
        }

/* coverage highlight */
.en-coverage {
    background: rgba(255,255,255,.15);
    border-left: 4px solid #fff;
    padding: 10px 15px;
    font-size: 14.5px;
    margin: 15px 0;
}

    .en-coverage strong {
        text-transform: uppercase;
    }

/* substrate / finish pills */
.en-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .en-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.en-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.en-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .en-btn:hover {
        background: #fff;
        color: #333;
    }

    .en-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
/* Intro – brand purple */
.theme-en-intro {
    background: linear-gradient(135deg, #8e24aa, #a021c0);
}

/* High Gloss – deep violet with gold accent for shine */
.theme-gloss {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
}

    .theme-gloss h2 {
        border-color: #ffd54f;
    }

/* Satin – softer mauve for mild sheen */
.theme-satin {
    background: linear-gradient(135deg, #7b1fa2, #ab47bc);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .en-section, .en-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .en-image {
        min-height: 300px;
    }

        .en-image::after {
            display: none;
        }

    .en-content {
        padding: 30px 25px;
    }

    .en-banner h1 {
        font-size: 20px;
    }
}
/* ============ WOOD STAINS PAGE STYLES ============ */
.woodstain-page {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    line-height: 1.7;
}

/* ---- Page Title Banner ---- */
.wd-banner {
    background: linear-gradient(90deg, #4e342e, #6d4c41 55%, #795548);
    padding: 18px 5%;
}

    .wd-banner h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/* ---- Generic split section (image + content side by side) ---- */
.wd-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .wd-section.reverse {
        flex-direction: row-reverse;
    }

.wd-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .wd-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative dark-wood angle at bottom of image */
    .wd-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3e2723;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.wd-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Series tag (shows which series the product belongs to) ---- */
.wd-series-tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,0,0,.25);
    border-left: 4px solid #ffcc80;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 15px;
}

/* ---- Typography ---- */
.wd-content h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,.6);
}

.wd-content h3 {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 25px 0 10px;
}

.wd-content p {
    margin: 0 0 15px;
    font-size: 15px;
}

/* colour-count info pills */
.wd-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .wd-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.wd-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .wd-btn:hover {
        background: #fff;
        color: #333;
    }

    .wd-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes (wood family) ---- */
/* Intro – brand brown */
.theme-wd-intro {
    background: linear-gradient(135deg, #5d4037, #6d4c41);
}

/* Universal JU – warm amber wood */
.theme-ju {
    background: linear-gradient(135deg, #6d4c41, #8d6e63);
}

    .theme-ju h2 {
        border-color: #ffcc80;
    }

/* Standard JS – classic medium brown */
.theme-js {
    background: linear-gradient(135deg, #4e342e, #6d4c41);
}

/* Pigmented JP – deep dark tone */
.theme-jp {
    background: linear-gradient(135deg, #3e2723, #5d4037);
}

    .theme-jp h2 {
        border-color: #d7ccc8;
    }

/* Glazers JR – golden honey tone */
.theme-jr {
    background: linear-gradient(135deg, #795548, #a1887f);
}

/* Interior Water Based JWI – lighter warm neutral */
.theme-jwi {
    background: linear-gradient(135deg, #8d6e63, #bcaaa4);
}

    .theme-jwi h2 {
        border-color: #c8e6c9;
    }

/* Exterior Water Based JWE – teak/olive tone */
.theme-jwe {
    background: linear-gradient(135deg, #5d4037, #795548);
}

    .theme-jwe h2 {
        border-color: #b2dfdb;
    }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .wd-section, .wd-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .wd-image {
        min-height: 300px;
    }

        .wd-image::after {
            display: none;
        }

    .wd-content {
        padding: 30px 25px;
    }

    .wd-banner h1 {
        font-size: 20px;
    }
}
/* ---- Generic split section (image + content side by side) ---- */
.ef-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .ef-section.reverse {
        flex-direction: row-reverse;
    }

.ef-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .ef-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative purple angle at bottom of image */
    .ef-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3d1470;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.ef-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .ef-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .ef-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .ef-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* ---- Effect pills (Gold / Silver / Bronze, Fine / Medium / Large) ---- */
.ef-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .ef-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* ---- Action buttons ---- */
.ef-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ef-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .ef-btn:hover {
        background: #fff;
        color: #333;
    }

    .ef-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
.theme-ef-intro {
    background: linear-gradient(135deg, #8e24aa, #a021c0);
}

/* Metallic – dramatic charcoal with gold accent */
.theme-metallic {
    background: linear-gradient(135deg, #263238, #455a64);
}

    .theme-metallic h2 {
        border-color: #ffd54f;
    }

/* Pearl – soft luxurious lavender */
.theme-pearl {
    background: linear-gradient(135deg, #7e57c2, #b39ddb);
}

/* Marble – light stone look with dark text */
.theme-marble {
    background: linear-gradient(135deg, #eceff1, #cfd8dc);
    color: #37474f;
}

    .theme-marble h2 {
        border-color: rgba(0,0,0,.4);
    }

    .theme-marble .ef-btn {
        color: #37474f;
        border-color: rgba(0,0,0,.5);
        background: rgba(0,0,0,.05);
    }

        .theme-marble .ef-btn:hover {
            background: #37474f;
            color: #fff;
        }

/* Texture – deep teal */
.theme-texture {
    background: linear-gradient(135deg, #00695c, #00897b);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .ef-section, .ef-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .ef-image {
        min-height: 300px;
    }

        .ef-image::after {
            display: none;
        }

    .ef-content {
        padding: 30px 25px;
    }

    .ef-banner h1 {
        font-size: 20px;
    }
}
/* ---- Generic split section (image + content side by side) ---- */
.iw-section {
    display: flex;
    align-items: stretch;
    min-height: 480px;
    margin-bottom: 0px;
}

    .iw-section.reverse {
        flex-direction: row-reverse;
    }

.iw-image {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
}

    .iw-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* decorative purple angle at bottom of image (like reference) */
    .iw-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 42%;
        height: 55px;
        background: #3d1470;
        clip-path: polygon(0 100%, 0 30%, 100% 100%);
    }

.iw-content {
    flex: 1 1 50%;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* ---- Typography ---- */
    .iw-content h2 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(255,255,255,.6);
    }

    .iw-content h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 25px 0 10px;
    }

    .iw-content p {
        margin: 0 0 15px;
        font-size: 15px;
    }

/* dash-style bullet list */
.iw-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .iw-list li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 7px;
        font-size: 15px;
    }

        .iw-list li::before {
            content: "-";
            position: absolute;
            left: 4px;
            font-weight: 700;
        }

    .iw-list .sub-list {
        list-style: none;
        margin-top: 7px;
    }

/* coverage highlight */
.iw-coverage {
    background: rgba(255,255,255,.15);
    border-left: 4px solid #fff;
    padding: 10px 15px;
    font-size: 14.5px;
    margin: 15px 0;
}

    .iw-coverage strong {
        text-transform: uppercase;
    }

/* finish pills (Matt / Glaze / Satin) */
.iw-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}

    .iw-pills span {
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 30px;
        padding: 4px 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

/* action buttons */
.iw-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.iw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 22px;
    border-radius: 4px;
    transition: all .3s ease;
}

    .iw-btn:hover {
        background: #fff;
        color: #333;
    }

    .iw-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---- Section colour themes ---- */
.theme-intro {
    background: linear-gradient(135deg, #8e24aa, #a021c0);
}

.theme-luxino {
    background: linear-gradient(135deg, #7b2fd4, #9333d6);
}

.theme-tnf {
    background: linear-gradient(135deg, #57c785, #b9d84e);
}

.theme-festiva {
    background: linear-gradient(135deg, #00695c, #00838f);
}

.theme-primer {
    background: linear-gradient(135deg, #c2185b, #d94f63);
}

.theme-eco {
    background: linear-gradient(135deg, #e67e22, #e8890f);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .iw-section, .iw-section.reverse {
        flex-direction: column;
        min-height: auto;
    }

    .iw-image {
        min-height: 300px;
    }

        .iw-image::after {
            display: none;
        }

    .iw-content {
        padding: 30px 25px;
    }

    .iw-banner h1 {
        font-size: 20px;
    }
}/* ============================================================
   TEKNOVACE — styles.css
   ============================================================ */

/* ================= TOKENS ================= */
:root {
    --bg: #FBFAF6;
    --card: #FFFFFF;
    --ink: #191C2B;
    --muted: #646B80;
    --line: #E8E4DA;
    --red: #E8442E;
    --amber: #C97A1A;
    --teal: #0E9E8A;
    --yellow: #F2B705;
    --red-t: #FCE9E5;
    --amber-t: #F8EEDF;
    --teal-t: #E4F4F1;
    --yellow-t: #FCF3D8;
    --r: 20px;
    --sh: 0 18px 44px -18px rgba(25,28,43,.22);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px
}

body {
    font: 400 16px/1.7 'DM Sans',sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden
}

img {
    display: block;
    max-width: 100%;
    user-select: none;
    -webkit-user-drag: none
}

a {
    color: inherit;
    text-decoration: none
}

ul {
    list-style: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

h1, h2, h3, h4 {
    font-family: 'Outfit',sans-serif;
    letter-spacing: -.015em
}

::selection {
    background: var(--red);
    color: #fff
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 6px
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: #CFC9BB;
    border-radius: 8px;
    border: 2px solid var(--bg)
}

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

.sec {
    padding: clamp(68px,9vw,110px) 24px
}

/* ================= BUTTONS ================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.55rem;
    border-radius: 999px;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .9rem;
    transition: .3s;
    white-space: nowrap
}

    .btn .lucide {
        width: 17px;
        height: 17px;
        transition: transform .3s
    }

    .btn:hover .lucide {
        transform: translateX(4px)
    }

.btn-red {
    background: #000;
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(232,68,46,.55)
}

    .btn-red:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 34px -10px rgba(232,68,46,.6)
    }

.btn-ink {
    background: var(--ink);
    color: #fff
}

    .btn-ink:hover {
        background: var(--red);
        transform: translateY(-3px)
    }

.btn-soft {
    border: 1.5px solid var(--ink)
}

    .btn-soft:hover {
        background: var(--ink);
        color: #fff;
        transform: translateY(-3px)
    }

/* ================= HEADER ================= */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #E8442E;
    backdrop-filter: blur(12px);
    transition: box-shadow .3s
}

    header.scrolled {
        box-shadow: 0 10px 30px -16px rgba(25,28,43,.25)
    }

.hdr-in {
    max-width: 1280px;
    margin: auto;
    height: 80px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem
}

.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: none
}

    .logo svg {
        width: 30px;
        height: 30px;
        color: var(--red);
        transition: transform .5s
    }

    .logo:hover svg {
        transform: rotate(14deg) scale(1.1)
    }

    .logo b {
        font-family: 'Outfit';
        font-size: 1.28rem
    }

    .logo small {
        display: block;
        font-size: .53rem;
        font-weight: 700;
        letter-spacing: .32em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 1px
    }

nav > ul {
    display: flex;
    gap: 2px
}

    nav > ul > li {
        position: relative
    }

.nav-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .62rem 1rem;
    border-radius: 10px;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: .92rem;
    transition: .25s; color: #fff;
}

    .nav-link .lucide {
        width: 15px;
        height: 15px;
        transition: transform .3s
    }

    .nav-link:hover {
        background: #F0EDE4;
        color: var(--red)
    }

li:hover > .nav-link .lucide {
    transform: rotate(180deg)
}

.dd {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%,10px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 30px 70px -26px rgba(25,28,43,.3);
    padding: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 60
}

    .dd::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px
    }

li:hover .dd, li:focus-within .dd {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0)
}

.dd-simple {
    width: 230px
}

    .dd-simple a, .dd-col a {
        display: block;
        padding: .46rem .75rem;
        border-radius: 9px;
        font-weight: 500;
        font-size: .87rem;
        color: var(--muted);
        transition: .22s
    }

        .dd-simple a:hover, .dd-col a:hover {
            background: #F5F2EA;
            color: var(--ink);
            transform: translateX(4px)
        }

.dd-mega {
    width: min(900px,92vw);
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 1.6rem
}

.dd-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding-bottom: .65rem;
    margin-bottom: .55rem;
    border-bottom: 2px solid var(--hc)
}

    .dd-head i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--hc);
        flex: none
    }

.dd-col .cols {
    columns: 2;
    column-gap: .4rem
}

    .dd-col .cols a {
        break-inside: avoid;
        font-size: .8rem;
        padding: .38rem .6rem
    }

.dd-note {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
    padding-top: .85rem;
    font-size: .83rem;
    color: var(--muted)
}

    .dd-note b {
        color: var(--red)
    }

.hdr-cta {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: none
}

    .hdr-cta .btn {
        padding: .66rem 1.25rem;
        font-size: .85rem
    }

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    place-items: center;
    background: #fff
}

    .burger .lucide {
        width: 20px;
        height: 20px
    }

/* ================= DRAWER ================= */
.dr-ov {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(25,28,43,.5);
    opacity: 0;
    visibility: hidden;
    transition: .4s
}

    .dr-ov.open {
        opacity: 1;
        visibility: visible
    }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    width: min(420px,100%);
    background: var(--bg);
    transform: translateX(103%);
    transition: transform .5s cubic-bezier(.7,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

    .drawer.open {
        transform: none
    }

.dr-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--line)
}

.dr-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff
}

.dr-nav {
    padding: .5rem 1.3rem 1.5rem
}

    .dr-nav .d-btn, .dr-nav > a.d-link {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 1rem .1rem;
        font-family: 'Outfit';
        font-weight: 600;
        font-size: 1rem;
        border-bottom: 1px solid var(--line)
    }

.d-btn .lucide {
    width: 18px;
    height: 18px;
    transition: transform .35s
}

.d-btn.open .lucide {
    transform: rotate(180deg)
}

.d-acc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s
}

    .d-acc.open {
        grid-template-rows: 1fr
    }

    .d-acc > div {
        overflow: hidden
    }

    .d-acc a {
        display: block;
        padding: .5rem .8rem;
        font-weight: 500;
        font-size: .9rem;
        color: var(--muted)
    }

    .d-acc .grp {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .9rem .1rem .3rem;
        font-family: 'Outfit';
        font-weight: 700;
        font-size: .68rem;
        letter-spacing: .17em;
        text-transform: uppercase
    }

        .d-acc .grp i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            flex: none
        }

.dr-foot {
    margin-top: auto;
    padding: 1.3rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .6rem;
    font-weight: 500;
    font-size: .92rem
}

    .dr-foot a {
        display: flex;
        align-items: center;
        gap: .6rem
    }

    .dr-foot .lucide {
        width: 17px;
        height: 17px;
        color: var(--red)
    }

/* ============================================================
   HERO CAROUSEL — calm glide engine
   (slow 1.2s fade + gentle horizontal drift, no zoom restart,
    JS-driven progress bar, exact pause/resume)
   ============================================================ */
.hero {
    padding: 104px 16px 0;
    position: relative
}

.car {
    position: relative;
    max-width: 1360px;
    margin: auto;
    height: min(78vh,620px);
    min-height: 480px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 36px 80px -34px rgba(25,28,43,.45);
    touch-action: pan-y;
    cursor: grab
}

    .car:active {
        cursor: grabbing
    }

/* slide states */
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(3.5%);
    transition: opacity 1.2s ease,transform 1.2s ease,visibility 0s linear 1.2s
}

    .slide.on {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: opacity 1.2s ease,transform 1.2s ease
    }

    /* ultra-slow settle zoom — only on the active slide,
   frozen instantly (no reverse-motion flicker) on exit */
    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06)
    }

    .slide.on img {
        transform: scale(1);
        transition: transform 9s linear
    }

    .slide:not(.on) img {
        transition: none
    }

.scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(78deg,rgba(20,23,38,.78),rgba(20,23,38,.3) 55%,rgba(20,23,38,.05))
}

.s-body {
    position: absolute;
    left: clamp(1.4rem,5vw,3.6rem);
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    color: #fff;
    z-index: 4
}

    .s-body > * {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .8s ease,transform .8s ease
    }

.slide.on .s-body > * {
    opacity: 1;
    transform: none
}

    .slide.on .s-body > *:nth-child(1) {
        transition-delay: .35s
    }

    .slide.on .s-body > *:nth-child(2) {
        transition-delay: .5s
    }

    .slide.on .s-body > *:nth-child(3) {
        transition-delay: .65s
    }

.s-kick {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.45);
    backdrop-filter: blur(8px);
    padding: .45rem 1rem;
    border-radius: 999px;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.1rem
}

    .s-kick i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--sc)
    }

.s-body h1 {
    font-size: clamp(1.9rem,4.3vw,3.4rem);
    line-height: 1.1;
    font-weight: 800
}

    .s-body h1 b {
        color: var(--sc)
    }

.s-body p {
    margin: .9rem 0 1.5rem;
    color: rgba(255,255,255,.86);
    max-width: 50ch;
    font-size: .98rem
}

.s-btns {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap
}

.s-num {
    position: absolute;
    right: clamp(1.4rem,4vw,3rem);
    bottom: 4.4rem;
    z-index: 4;
    font-family: 'Outfit';
    font-weight: 800;
    font-size: clamp(4rem,9vw,8rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease .4s
}

.slide.on .s-num {
    opacity: 1
}

.c-arrows {
    position: absolute;
    top: 1.5rem;
    right: clamp(1.2rem,3vw,2rem);
    display: flex;
    gap: .6rem;
    z-index: 6
}

.c-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.45);
    backdrop-filter: blur(8px);
    color: #fff;
    display: grid;
    place-items: center;
    transition: .3s
}

    .c-arrow:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-2px)
    }

    .c-arrow .lucide {
        width: 19px;
        height: 19px
    }

.c-dots {
    position: absolute;
    left: clamp(1.4rem,4vw,3.4rem);
    bottom: 1.6rem;
    display: flex;
    gap: .5rem;
    z-index: 6
}

    .c-dots .dot {
        width: 9px;
        height: 9px;
        border-radius: 99px;
        background: rgba(255,255,255,.45);
        transition: .35s;
        padding: 0
    }

        .c-dots .dot.on {
            width: 30px;
            background: #fff
        }

/* progress bar — transform driven by JS (no keyframe restart jump) */
.c-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 7;
    background: rgba(255,255,255,.16)
}

    .c-bar span {
        display: block;
        height: 100%;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left;
        will-change: transform
    }

/* paint drips hanging from hero */
.drips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 30px;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(var(--bg),var(--bg)) 0 0/100% 9px no-repeat, radial-gradient(11px 21px at 16px 2px, var(--bg) 96%, transparent 100%) 0 0/76px 30px repeat-x
}

/* ================= SWATCH MARQUEE ================= */
.swatches {
    padding: 2.4rem 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.sw-track {
    display: flex;
    gap: 2.6rem;
    width: max-content;
    animation: swm 34s linear infinite
}

.swatches:hover .sw-track {
    animation-play-state: paused
}

@keyframes swm {
    to {
        transform: translateX(-50%)
    }
}

.sw-i {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap
}

    .sw-i i {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--c);
        flex: none;
        box-shadow: inset 0 -4px 8px rgba(0,0,0,.14), 0 3px 8px rgba(25,28,43,.15)
    }

/* ================= SECTION HEADS ================= */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red)
}

    .tag::before {
        content: "";
        width: 26px;
        height: 3px;
        border-radius: 2px;
        background: var(--red)
    }

.title {
    font-size: clamp(1.8rem,3.4vw,2.7rem);
    line-height: 1.13;
    margin: .7rem 0 1rem;
    font-weight: 800
}

.lead {
    color: var(--muted);
    max-width: 56ch
}

/* ================= VERTICAL TILES ================= */
#products {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.tiles {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.4rem;
    margin-top: 2.6rem
}

.tile {
    position: relative;
    background: var(--card);
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: .4s
}

    .tile:hover {
        transform: translateY(-10px);
        box-shadow: var(--sh)
    }

    .tile::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        z-index: 5;
        background: var(--c);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s
    }

    .tile:hover::before {
        transform: scaleX(1)
    }

.tile-media {
    position: relative;
    height: 230px;
    overflow: hidden;
    cursor: pointer
}

    .tile-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s
    }

.tile:hover .tile-media img {
    transform: scale(1.1)
}

.tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(20,23,38,.06),rgba(20,23,38,.66))
}

.tile-count {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    background: rgba(255,255,255,.92);
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .7rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    transition: .3s
}

.tile:hover .tile-count {
    background: var(--c);
    color: #fff
}

.tile-ic {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px -6px rgba(25,28,43,.4)
}

    .tile-ic .lucide {
        width: 20px;
        height: 20px
    }

.tile-title {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.15rem;
    z-index: 4;
    color: #fff
}

    .tile-title .ghost {
        position: absolute;
        left: 5px;
        top: -24px;
        font-family: 'Outfit';
        font-weight: 800;
        font-size: clamp(1.35rem,2.2vw,1.8rem);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: transparent;
        -webkit-text-stroke: 1.3px rgba(255,255,255,.55);
        white-space: nowrap;
        pointer-events: none
    }

    .tile-title h3 {
        position: relative;
        font-family: 'Outfit';
        font-weight: 800;
        font-size: clamp(1.35rem,2.2vw,1.8rem);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .02em
    }

.tile-panel {
    padding: 1.15rem 1.3rem 1.35rem;
    background: var(--card);
    flex: 1;
    display: flex;
    flex-direction: column
}

.tile-kick {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--c);
    margin-bottom: .4rem
}

.tile-desc {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 1rem
}

.tile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin-bottom: 1.15rem
}

    .tile-chips span {
        font-size: .72rem;
        font-weight: 500;
        padding: .36rem .62rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        transition: .3s
    }

.tile:hover .tile-chips span {
    background: var(--ct);
    border-color: var(--ct);
    color: var(--ink)
}

.tile-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .86rem;
    color: var(--c)
}

    .tile-more .lucide {
        width: 16px;
        height: 16px;
        transition: transform .3s
    }

    .tile-more:hover .lucide {
        transform: translate(3px,-3px)
    }

/* ================= ABOUT ================= */
.about-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.4rem,6vw,4.6rem);
    align-items: start
}

.about-copy p {
    color: var(--muted);
    margin-bottom: 1.15rem;
    font-size: .99rem
}

    .about-copy p b {
        color: var(--ink)
    }

.hl {
    background: linear-gradient(transparent 62%,var(--red-t) 62%);
    padding: 0 .1em
}

.about-side {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 1.1rem
}

.blob-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.35rem 1.5rem;
    overflow: hidden;
    transition: .35s
}

    .blob-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh)
    }

    .blob-card::after {
        content: "";
        position: absolute;
        right: -34px;
        top: -34px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: var(--bt);
        transition: .4s
    }

    .blob-card:hover::after {
        transform: scale(1.25)
    }

    .blob-card .bc-top {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin-bottom: .5rem;
        position: relative;
        z-index: 1
    }

        .blob-card .bc-top i {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            background: var(--bc);
            color: #fff;
            display: grid;
            place-items: center;
            flex: none
        }

            .blob-card .bc-top i .lucide {
                width: 19px;
                height: 19px
            }

    .blob-card h3 {
        font-size: 1.12rem
    }

    .blob-card p {
        color: var(--muted);
        font-size: .88rem;
        position: relative;
        z-index: 1
    }

/* ================= WHY / NANOTECH ================= */
#why {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.why-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.4rem,5vw,4.2rem);
    align-items: center
}

.nano {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fff;
    border: 1.5px dashed var(--red);
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    margin: 1.4rem 0 1.7rem
}

    .nano .lucide {
        width: 26px;
        height: 26px;
        color: var(--red);
        flex: none
    }

    .nano p {
        font-size: .92rem;
        color: var(--ink)
    }

.stats-g {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.1rem
}

.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.5rem 1.1rem;
    text-align: center;
    transition: .3s
}

    .stat:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
    }

    .stat b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: clamp(1.7rem,2.8vw,2.3rem);
        display: block;
        line-height: 1.1
    }

    .stat:nth-child(1) b {
        color: var(--red)
    }

    .stat:nth-child(2) b {
        color: var(--amber)
    }

    .stat:nth-child(3) b {
        color: var(--teal)
    }

    .stat:nth-child(4) b {
        color: #B8860B
    }

    .stat span {
        color: var(--muted);
        font-weight: 500;
        font-size: .84rem
    }

/* ================= PRESS ================= */
.press-g {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.5rem;
    margin-top: 2.6rem;
    align-items: start
}

    .press-g > .pcol {
        display: grid;
        gap: 1.5rem
    }

.news {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .35s
}

    .news:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
    }

    .news.featured {
        height: 100%
    }

        .news.featured figure {
            overflow: hidden;
            height: 250px;
            background: #F4F1E8
        }

            .news.featured figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform .8s
            }

        .news.featured:hover figure img {
            transform: scale(1.06)
        }

.n-body {
    padding: 1.45rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    flex: 1
}

.n-meta {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap
}

.n-tag {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .36rem .7rem;
    border-radius: 999px
}

.n-date {
    font-weight: 500;
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .35rem
}

    .n-date .lucide {
        width: 14px;
        height: 14px
    }

.news h3 {
    font-size: 1.3rem;
    line-height: 1.28
}

.news h4 {
    font-size: 1.06rem;
    line-height: 1.35
}

.n-ex {
    color: var(--muted);
    font-size: .9rem
}

.n-tgl {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .84rem;
    color: var(--red);
    margin-top: auto;
    padding-top: .35rem
}

    .n-tgl .lucide {
        width: 16px;
        height: 16px;
        transition: transform .3s
    }

.news.open .n-tgl .lucide {
    transform: rotate(45deg)
}

.n-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s;
    width: 100%
}

    .n-more > div {
        overflow: hidden
    }

    .n-more p {
        padding-top: .4rem;
        color: var(--muted);
        font-size: .89rem
    }

.news.open .n-more {
    grid-template-rows: 1fr
}

/* ================= CTA ================= */
.cta {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    text-align: center;
    padding: clamp(2.6rem,6vw,4.2rem) 1.5rem;
    color: #fff;
    background: linear-gradient(120deg,var(--red),#B93320 55%,var(--ink))
}

    .cta::before, .cta::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.18)
    }

    .cta::before {
        width: 190px;
        height: 190px;
        top: -70px;
        left: -70px
    }

    .cta::after {
        width: 250px;
        height: 250px;
        bottom: -110px;
        right: -90px
    }

    .cta h2 {
        font-size: clamp(1.8rem,3.6vw,2.7rem);
        font-weight: 800;
        max-width: 22ch;
        margin: 0 auto;
        position: relative;
        z-index: 1
    }

        .cta h2 em {
            font-style: normal;
            color: var(--yellow)
        }

    .cta p {
        color: rgba(255,255,255,.85);
        max-width: 52ch;
        margin: 1rem auto 1.9rem;
        position: relative;
        z-index: 1
    }

.cta-btns {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn-wht {
    background: #fff;
    color: var(--ink)
}

    .btn-wht:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

.btn-out {
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff;
    backdrop-filter: blur(6px)
}

    .btn-out:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-3px)
    }

/* ================= FOOTER ================= */
footer {
    background: #14172A;
    color: #9BA3BC;
    padding: 64px 24px 0;
    margin-top: clamp(68px,9vw,110px)
}

.foot-g {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 2.4rem;
    padding-bottom: 2.6rem
}

footer .logo b {
    color: #fff
}

footer .logo small {
    color: #6E7694
}

.f-brand > p {
    font-size: .92rem;
    margin: 1rem 0 1.2rem;
    max-width: 36ch
}

.f-contacts {
    display: grid;
    gap: .55rem;
    font-weight: 500;
    font-size: .9rem
}

    .f-contacts a, .f-contacts span {
        display: flex;
        gap: .6rem;
        align-items: center
    }

    .f-contacts .lucide {
        width: 16px;
        height: 16px;
        color: var(--red);
        flex: none
    }

footer h5 {
    color: #fff;
    font-family: 'Outfit';
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1rem
}

.f-links a {
    display: block;
    padding: .32rem 0;
    font-size: .92rem;
    transition: .25s
}

    .f-links a:hover {
        color: #fff;
        transform: translateX(4px)
    }

.foot-bot {
    max-width: 1200px;
    margin: auto;
    border-top: 1px solid #242A45;
    padding: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .86rem
}

.priv-btn {
    font-weight: 700;
    color: #C6CDDE;
    border-bottom: 1px solid #2C3355;
    padding-bottom: 1px;
    transition: .3s
}

    .priv-btn:hover {
        color: #fff;
        border-color: #fff
    }

/* ================= MODAL & TOAST ================= */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1.4rem;
    opacity: 0;
    visibility: hidden;
    transition: .35s
}

    .modal.open {
        opacity: 1;
        visibility: visible
    }

.modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(25,28,43,.55)
}

.modal-card {
    position: relative;
    background: var(--bg);
    border-radius: 22px;
    max-width: 560px;
    width: 100%;
    padding: 2.3rem;
    transform: translateY(26px) scale(.97);
    transition: .45s cubic-bezier(.2,.9,.3,1.15);
    max-height: 84vh;
    overflow-y: auto
}

.modal.open .modal-card {
    transform: none
}

.modal-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem
}

.modal-card p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 1rem
}

.modal-x {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    transition: .3s
}

    .modal-x:hover {
        background: var(--ink);
        color: #fff
    }

    .modal-x .lucide {
        width: 16px;
        height: 16px
    }

.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 3000;
    transform: translate(-50%,180%);
    background: var(--ink);
    color: #fff;
    padding: .9rem 1.3rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 500;
    font-size: .88rem;
    max-width: calc(100vw - 2rem);
    transition: transform .5s cubic-bezier(.2,.9,.3,1.1);
    box-shadow: 0 20px 44px -18px rgba(25,28,43,.55)
}

    .toast.show {
        transform: translate(-50%,0)
    }

.t-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--red);
    flex: none
}

#toTop {
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: .35s;
    box-shadow: var(--sh)
}

    #toTop.show {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    #toTop:hover {
        background: var(--red)
    }

    #toTop .lucide {
        width: 20px;
        height: 20px
    }

/* ================= REVEAL ================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s,transform .8s cubic-bezier(.2,.7,.3,1);
    transition-delay: var(--d,0s)
}

    .reveal.in-view {
        opacity: 1;
        transform: none
    }

/* ================= RESPONSIVE ================= */
@media (max-width:1024px) {
    nav {
        display: none
    }

    .burger {
        display: grid
    }

    .hdr-cta .btn {
        display: none
    }
}

@media (max-width:900px) {
    .about-grid, .why-grid {
        grid-template-columns: 1fr
    }

    .about-side {
        position: static
    }

    .tiles {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto
    }

    .stats-g {
        grid-template-columns: repeat(2,1fr)
    }

    .press-g {
        grid-template-columns: 1fr
    }

    .foot-g {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:560px) {
    .foot-g {
        grid-template-columns: 1fr
    }

    .car {
        min-height: 540px
    }

    .s-num {
        display: none
    }

    .c-dots {
        left: auto;
        right: 1.3rem
    }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}
/* ============================================================
   TEKNOVACE — about.css  (About Us page styles only)
   Depends on styles.css for tokens, base, .sec, .container,
   .tag, .title, .lead, .btn, .reveal, .nano
   ============================================================ */

/* ---------- PAGE HERO ---------- */
.page-hero {
    position: relative;
    padding: calc(92px + clamp(2.4rem,6vw,4.5rem)) 24px clamp(2.6rem,6vw,4rem);
    background: linear-gradient(180deg,#D83DAA,#000 92%);
    border-bottom: 1px solid var(--line);
    overflow: hidden
}

    .page-hero::after {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        border: 2px solid rgba(232,68,46,.14);
        pointer-events: none
    }

    .page-hero::before {
        content: "";
        position: absolute;
        right: 60px;
        top: 120px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: var(--red-t);
        filter: blur(2px);
        opacity: .6;
        pointer-events: none
    }

.crumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    font-size: .84rem;
    color: var(--muted);
    margin-bottom: 1.3rem
}

    .crumbs a {
        transition: .25s
    }

        .crumbs a:hover {
            color: var(--red)
        }

    .crumbs .sep {
        opacity: .5
    }

    .crumbs .here {
        color: var(--ink);
        font-weight: 700
    }

.ph-title {
    font-size: clamp(2.4rem,5.5vw,4.2rem);
    line-height: 1.05;
    font-weight: 800;
    position: relative
}

    .ph-title em {
        font-style: normal;
        color: var(--red)
    }

    .ph-title .ghost {
        position: absolute;
        left: 6px;
        top: -30px;
        font-weight: 800;
        font-size: clamp(2.4rem,5.5vw,4.2rem);
        line-height: 1.05;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(25,28,43,.14);
        white-space: nowrap;
        pointer-events: none;
        user-select: none
    }

.ph-sub {
    color: #fff;
    max-width: 64ch;
    margin-top: 1.1rem;
    font-size: 1.02rem
}

.ph-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.7rem
}

    .ph-badges span {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: .5rem 1rem;
        font-weight: 700;
        font-size: .78rem
    }

    .ph-badges .lucide {
        width: 15px;
        height: 15px;
        color: var(--red)
    }

/* ---------- INTRO + VERTICAL CARDS ---------- */
.intro-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(2.4rem,6vw,4.6rem);
    align-items: start
}

.intro-copy p {
    color: var(--muted);
    margin-bottom: 1.15rem;
    font-size: .99rem
}

    .intro-copy p b {
        color: var(--ink)
    }

.hl {
    background: linear-gradient(transparent 62%,var(--red-t) 62%);
    padding: 0 .1em
}

.quote {
    margin-top: 1.9rem;
    border-left: 3px solid var(--red);
    padding: .4rem 0 .4rem 1.4rem;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: clamp(1.05rem,1.7vw,1.25rem);
    line-height: 1.55;
    color: var(--ink)
}

.v-cards {
    display: grid;
    gap: 1.1rem;
    position: sticky;
    top: 100px
}

.v-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    display: flex;
    gap: 1.1rem;
    align-items: center;
    overflow: hidden;
    transition: .35s
}

    .v-card:hover {
        transform: translateX(8px);
        box-shadow: var(--sh)
    }

    .v-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--c)
    }

.v-num {
    font-family: 'Outfit';
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--c);
    flex: none;
    transition: .35s
}

.v-card:hover .v-num {
    color: var(--c)
}

.v-card h3 {
    font-size: 1.08rem;
    margin-bottom: .15rem
}

.v-card span {
    font-size: .85rem;
    color: var(--muted)
}

.v-ic {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ct);
    display: grid;
    place-items: center;
    flex: none
}

    .v-ic .lucide {
        width: 19px;
        height: 19px;
        color: var(--c)
    }

/* ---------- PRESENCE / INFRASTRUCTURE ---------- */
#presence {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.3rem;
    margin-top: 2.5rem
}

.loc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.5rem;
    transition: .35s
}

    .loc-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--sh)
    }

.loc-ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--ct);
    display: grid;
    place-items: center;
    margin-bottom: 1rem
}

    .loc-ic .lucide {
        width: 22px;
        height: 22px;
        color: var(--c)
    }

.loc-pill {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .34rem .68rem;
    border-radius: 999px;
    background: var(--ct);
    color: var(--c)
}

    .loc-pill.up {
        background: var(--yellow-t);
        color: #8A6400
    }

.loc-card h3 {
    font-size: 1.08rem;
    margin-bottom: .35rem
}

.loc-card p {
    color: var(--muted);
    font-size: .88rem
}

/* ---------- TECH + NUMBERS ---------- */
.tech-wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.4rem,5vw,4.2rem);
    align-items: center
}

.pg-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.1rem
}

.pg-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.5rem 1.1rem;
    text-align: center;
    transition: .3s
}

    .pg-stat:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh)
    }

    .pg-stat b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: clamp(1.6rem,2.6vw,2.2rem);
        display: block;
        line-height: 1.1
    }

    .pg-stat:nth-child(1) b {
        color: var(--red)
    }

    .pg-stat:nth-child(2) b {
        color: var(--amber)
    }

    .pg-stat:nth-child(3) b {
        color: var(--teal)
    }

    .pg-stat:nth-child(4) b {
        color: #B8860B
    }

    .pg-stat span {
        color: var(--muted);
        font-weight: 500;
        font-size: .84rem
    }

/* ---------- 5 ADVANTAGES ---------- */
#advantage {
    background: #F4F1E8;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.4rem;
    margin-top: 2.5rem
}

.adv-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.8rem 1.7rem 1.7rem;
    overflow: hidden;
    transition: .35s
}

    .adv-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--sh)
    }

    .adv-card::after {
        content: "";
        position: absolute;
        right: -40px;
        bottom: -40px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: var(--ct);
        opacity: .7;
        transition: .4s
    }

    .adv-card:hover::after {
        transform: scale(1.3)
    }

    .adv-card.featured {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center
    }

.adv-num {
    position: absolute;
    right: 1.2rem;
    top: .6rem;
    font-family: 'Outfit';
    font-weight: 800;
    font-size: 3.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c);
    opacity: .45;
    transition: .35s;
    z-index: 1
}

.adv-card:hover .adv-num {
    opacity: 1
}

.adv-ic {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--c);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    box-shadow: 0 10px 20px -8px rgba(25,28,43,.35)
}

    .adv-ic .lucide {
        width: 24px;
        height: 24px
    }

.adv-card h3 {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    margin-bottom: .55rem
}

.adv-card p {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-size: .93rem;
    margin-bottom: 1rem
}

.adv-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

    .adv-chips span {
        font-size: .72rem;
        font-weight: 500;
        padding: .36rem .68rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        background: #fff;
        transition: .3s
    }

.adv-card:hover .adv-chips span {
    border-color: var(--c);
    color: var(--ink)
}

/* ---------- CUSTOM PRODUCTION ---------- */
.custom-panel {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    color: #fff;
    padding: clamp(2.4rem,5vw,4rem);
    background: linear-gradient(120deg,var(--red),#B93320 55%,var(--ink))
}

    .custom-panel::before, .custom-panel::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.18)
    }

    .custom-panel::before {
        width: 180px;
        height: 180px;
        top: -70px;
        right: -60px
    }

    .custom-panel::after {
        width: 240px;
        height: 240px;
        bottom: -110px;
        left: -90px
    }

.cp-kick {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.4);
    padding: .42rem 1rem;
    border-radius: 999px;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase
}

    .cp-kick i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--yellow)
    }

.custom-panel h2 {
    font-size: clamp(1.7rem,3.2vw,2.5rem);
    font-weight: 800;
    margin: 1.1rem 0 .7rem;
    position: relative;
    z-index: 1
}

    .custom-panel h2 em {
        font-style: normal;
        color: var(--yellow)
    }

.custom-panel > p {
    color: rgba(255,255,255,.86);
    max-width: 62ch;
    position: relative;
    z-index: 1
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem;
    margin: 2.2rem 0 2.1rem;
    position: relative;
    z-index: 1
}

.step {
    position: relative;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    padding: 1.3rem 1.15rem;
    backdrop-filter: blur(6px);
    transition: .3s
}

    .step:hover {
        background: rgba(255,255,255,.15);
        transform: translateY(-5px)
    }

    .step b {
        font-family: 'Outfit';
        font-weight: 800;
        font-size: .7rem;
        letter-spacing: .16em;
        color: var(--yellow);
        display: block;
        margin-bottom: .45rem
    }

    .step h4 {
        font-size: 1rem;
        margin-bottom: .3rem
    }

    .step p {
        font-size: .83rem;
        color: rgba(255,255,255,.8)
    }

.cp-btns {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn-wht {
    background: #fff;
    color: var(--ink)
}

    .btn-wht:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

.btn-out {
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff
}

    .btn-out:hover {
        background: #fff;
        color: var(--ink);
        transform: translateY(-3px)
    }

/* ---------- RESPONSIVE (page sections) ---------- */
@media (max-width:900px) {
    .intro-grid, .tech-wrap {
        grid-template-columns: 1fr
    }

    .v-cards {
        position: static
    }

    .loc-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto
    }

    .adv-grid {
        grid-template-columns: 1fr
    }

    .adv-card.featured {
        grid-template-columns: 1fr
    }

    .steps {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:560px) {
    .steps {
        grid-template-columns: 1fr
    }

    .pg-stats {
        grid-template-columns: repeat(2,1fr)
    }

    .ph-title .ghost {
        top: -24px
    }
}