/* ================================================
   GBT uPVC – v3
   Title font : DM Sans (headings, nav, buttons)
   Body font  : Roboto (paragraphs, descriptions)
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=Roboto:wght@300;400;500&display=swap');

:root {
    --teal: #0a8f8f;
    --teal-dk: #066a6a;
    --teal-lt: #12b0b0;
    --teal-pale: #e8f5f5;
    --teal-xpale: #f2fafa;
    --navy: #0c2030;
    --white: #ffffff;
    --off: #f6f9f9;
    --border: #dde8e8;
    --gray: #6c8484;
    --text: #1c2c2c;
    --text-lt: #527070;
    --heading: #0c2030;
    --fh: 'DM Sans', sans-serif; /* headings / nav / labels */
    --fb: 'Roboto', sans-serif; /* body text */

    --topbar-h: 40px;
    --nav-h: 105px;
    --sh-xs: 0 2px 8px rgba(0,0,0,.06);
    --sh-sm: 0 4px 20px rgba(0,0,0,.09);
    --sh-md: 0 10px 40px rgba(0,0,0,.13);
    --sh-lg: 0 24px 72px rgba(0,0,0,.17);
    --r: 8px;
    --tr: all .24s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--fb);
    color: var(--text);
    background: #fff;
    overflow-x: hidden;
    line-height: 1.72;
    font-size: 15px
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color .24s ease, background .24s ease, border-color .24s ease, opacity .24s ease, transform .24s ease
}

ul {
    list-style: none
}

button {
    cursor: pointer;
    font-family: var(--fh)
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fh);
    color: var(--heading);
    line-height: 1.12
}

/* ── UTIL ── */
.eyebrow {
    font-family: var(--fh);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

    .eyebrow::before {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--teal);
        flex-shrink: 0
    }

    .eyebrow.center {
        justify-content: center
    }

        .eyebrow.center::after {
            content: '';
            width: 28px;
            height: 2px;
            background: var(--teal);
            flex-shrink: 0
        }

.section-title {
    font-family: var(--fh);
    font-size: clamp(26px,3.8vw,44px);
    font-weight: 800;
    line-height: 1.1
}

    .section-title .accent {
        color: var(--teal)
    }

.section-desc {
    font-family: var(--fb);
    font-size: 15px;
    color: var(--text-lt);
    line-height: 1.82;
    margin-top: 16px;
    max-width: 580px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--r);
    font-family: var(--fh);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .4px;
    border: 2px solid transparent;
    transition: var(--tr);
    cursor: pointer;
    white-space: nowrap
}

.btn-teal {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal)
}

    .btn-teal:hover {
        background: var(--teal-dk);
        border-color: var(--teal-dk);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(10,143,143,.28)
    }

.btn-outline {
    border-color: var(--teal);
    color: var(--teal);
    background: transparent
}

    .btn-outline:hover {
        background: var(--teal);
        color: #fff
    }

.btn-white {
    background: #fff;
    color: var(--teal);
    border-color: #fff
}

    .btn-white:hover {
        background: var(--teal);
        color: #fff;
        border-color: var(--teal)
    }

.fade-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s ease,transform .65s ease
}

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0)
    }

.d1 {
    transition-delay: .1s
}

.d2 {
    transition-delay: .22s
}

.d3 {
    transition-delay: .33s
}

.d4 {
    transition-delay: .44s
}

/* ============================================================
   TOP BAR
   ============================================================ */
#top-bar {
    height: var(--topbar-h);
    background: var(--teal);
    display: flex;
    align-items: center;
    padding: 0 5%;
    position: relative;
    z-index: 200 /* below sticky nav */
}

.topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.topbar-contact {
    display: flex;
    align-items: center;
    gap: 18px
}

    .topbar-contact a {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--fh);
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,.88)
    }

        .topbar-contact a:hover {
            color: #fff
        }

.topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,.3)
}

.topbar-social {
    display: flex;
    align-items: center
}

    .topbar-social a {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.82);
        transition: var(--tr)
    }

        .topbar-social a:hover {
            background: rgba(255,255,255,.2);
            color: #fff
        }

    .topbar-social svg {
        width: 14px;
        height: 14px
    }

/* ============================================================
   NAV  — sticky, white, logo left, links centered, CTA right
   ============================================================ */
#site-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    height: var(--nav-h);
    background: #fff;
    box-shadow: 0 2px 18px rgba(0,0,0,.09);
    display: flex;
    align-items: center;
    transition: height .3s,box-shadow .3s
}

    #site-nav.scrolled {
        height: 64px;
        box-shadow: 0 2px 24px rgba(0,0,0,.13)
    }

        #site-nav.scrolled .nav-logo-img {
            height: 44px;
            max-width: 180px
        }

.nav-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    z-index: 10
}

.nav-logo-mark {
    width: 44px;
    height: 44px;
    background: var(--teal);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex-shrink: 0
}

    .nav-logo-text .brand {
        font-family: var(--fh);
        font-size: 20px;
        font-weight: 900;
        color: var(--heading);
        letter-spacing: .5px;
        white-space: nowrap
    }

    .nav-logo-text .tagline {
        font-family: var(--fh);
        font-size: 8.5px;
        color: var(--teal);
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 700;
        white-space: nowrap
    }

.nav-logo-img {
    height: 85px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
    flex-shrink: 0
}

.footer-logo-img {
    height: 85px;
    width: auto;
    max-width: 280px;
    cursor: pointer;
    object-fit: contain;
    display: block
}

/* Center menu — no transform so position:fixed mega-menu uses viewport as containing block */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center
}

/* ── Nav link ── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--fh);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .1px;
    color: var(--heading);
    white-space: nowrap;
    transition: var(--tr)
}

    .nav-link:hover, .nav-item.menu-open > .nav-link {
        color: var(--teal)
    }

    .nav-link.active {
        color: var(--teal)
    }

    .nav-link svg {
        transition: transform .24s;
        flex-shrink: 0
    }

.nav-item.menu-open > .nav-link svg {
    transform: rotate(180deg)
}

/* Nav right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 10;
    flex-shrink: 0
}

.nav-brochure {
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 8px 18px;
    border: 2px solid var(--teal);
    border-radius: var(--r);
    cursor: pointer;
    transition: color .24s ease, background .24s ease, border-color .24s ease
}

    .nav-brochure:hover {
        background: var(--teal);
        color: #fff
    }

.nav-cta {
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 9px 20px;
    background: var(--teal);
    border-radius: var(--r);
    border: 2px solid var(--teal);
    cursor: pointer;
    transition: color .24s ease, background .24s ease, border-color .24s ease
}

    .nav-cta:hover {
        background: var(--teal-dk);
        border-color: var(--teal-dk)
    }

/* ── MEGA MENU — position:absolute from nav-item, full viewport width ──
   The trick: nav-item has position:relative;
   mega-menu uses position:fixed but top is set via JS to nav bottom  */
.mega-menu {
    position: fixed;
    top: calc(var(--topbar-h) + var(--nav-h));
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid var(--teal);
    box-shadow: 0 16px 56px rgba(0,0,0,.13);
    padding: 32px 1.5%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease,visibility .22s,transform .22s ease;
    transform: translateY(-6px);
    z-index: 490 /* below nav (500) so nav stays on top */
}

.nav-item.menu-open > .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}
/* When page is scrolled, topbar is gone and nav shrinks — close the gap */
#site-nav.scrolled .mega-menu {
    top: 64px
}

.mega-inner {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 320px;
    gap: 0 32px
}

.mega-col {
    padding-right: 24px
}

    .mega-col + .mega-col {
        border-left: 1px solid var(--border);
        padding-left: 24px;
        padding-right: 24px
    }

    .mega-col:last-child {
        border-left: 1px solid var(--border);
        padding-right: 0
    }

.mega-col-title {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom: 2px solid var(--teal-pale);
    padding-bottom: 10px;
    margin-bottom: 13px
}

.mega-col ul {
    display: flex;
    flex-direction: column;
    gap: 2px
}

    .mega-col ul li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 6px;
        font-family: var(--fh);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text);
        transition: var(--tr)
    }

        .mega-col ul li a:hover {
            background: var(--teal-pale);
            color: var(--teal)
        }

.mm-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--teal-xpale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0
}

.mm-text {
    display: flex;
    flex-direction: column
}

    .mm-text small {
        font-family: var(--fb);
        font-size: 11.5px;
        color: var(--gray);
        font-weight: 400;
        margin-top: 1px
    }

.mega-img-col {
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    min-height: 200px
}

    .mega-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.mega-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(12,32,48,.72) 40%,transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 18px
}

    .mega-img-overlay p {
        color: #fff;
        font-family: var(--fh);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5
    }

/* Simple dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff;
    border-top: 3px solid var(--teal);
    box-shadow: var(--sh-md);
    border-radius: 0 0 var(--r) var(--r);
    min-width: 210px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s,visibility .2s,transform .2s;
    z-index: 490
}

.nav-item.menu-open > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

.dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: var(--tr)
}

    .dropdown li a:hover {
        background: var(--teal-pale);
        color: var(--teal)
    }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px
}

    .hamburger span {
        width: 24px;
        height: 2px;
        background: var(--heading);
        display: block;
        border-radius: 2px;
        transition: all .3s
    }

    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px,5px)
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0
    }

    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px,-5px)
    }

/* Mobile nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: calc(var(--topbar-h) + var(--nav-h));
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 480;
    overflow-y: auto;
    flex-direction: column;
    padding: 0 5% 40px;
    border-top: 2px solid var(--teal)
}

    .mobile-nav.open {
        display: flex
    }

.m-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left
}

    .m-link:hover {
        color: var(--teal)
    }

.m-sub {
    display: none;
    padding: 6px 0 12px 12px
}

    .m-sub.open {
        display: block
    }

.m-sub-label {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    padding: 10px 0 4px
}

.m-sub a {
    display: block;
    padding: 8px 0;
    font-family: var(--fh);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-lt);
    border-bottom: 1px solid var(--border)
}

    .m-sub a:hover {
        color: var(--teal)
    }

.m-arr {
    font-size: 11px;
    transition: transform .3s
}

/* ============================================================
   HERO  — very light white overlay so image shines through
   ============================================================ */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top center;
    z-index: 0
}
/* Light white overlay — brighter left wash, subtle right fade */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 108deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.20) 40%, rgba(255,255,255,.02) 100% )
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 5%;
    max-width: 640px
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--teal);
    color: #fff;
    padding: 5px 14px;
    border-radius: 100px;
    font-family: var(--fh);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 22px
}

.hero h1 {
    font-family: var(--fh);
    font-size: clamp(34px,5.5vw,66px);
    font-weight: 900;
    line-height: 1.05;
    color: var(--heading);
    letter-spacing: -1px;
    margin-bottom: 18px
}

    .hero h1 .accent {
        color: var(--teal)
    }

.hero-sub {
    font-family: var(--fb);
    font-size: 16px;
    color: var(--heading);
    line-height: 1.82;
    max-width: 490px;
    margin-bottom: 34px
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.hero-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: var(--navy);
    border-top: 3px solid var(--teal);
    display: flex;
    flex-wrap: wrap
}

.hero-stat {
    flex: 1;
    min-width: 140px;
    padding: 22px 26px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.07)
}

    .hero-stat:last-child {
        border-right: none
    }

.hero-stat-num {
    font-family: var(--fh);
    font-size: 32px;
    font-weight: 900;
    color: var(--teal-lt);
    line-height: 1
}

.hero-stat-label {
    font-family: var(--fh);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 4px
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 5% 70px;
    min-height: 300px;
    display: flex;
    align-items: center
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 42%,rgba(255,255,255,.18) 100%)
}

.page-hero-content {
    position: relative;
    z-index: 2
}

    .page-hero-content .section-title {
        color: var(--heading)
    }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px
}

    .breadcrumb a {
        font-family: var(--fh);
        font-size: 12px;
        color: var(--gray)
    }

        .breadcrumb a:hover {
            color: var(--teal)
        }

    .breadcrumb .sep {
        font-size: 12px;
        color: var(--border)
    }

    .breadcrumb .curr {
        font-family: var(--fh);
        font-size: 12px;
        color: var(--teal);
        font-weight: 700
    }

/* ============================================================
   PRODUCT CARDS — professional split-card design
   ============================================================ */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
    gap: 24px
}

.prod-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: transform .34s ease,box-shadow .34s ease,border-color .34s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none
}

    .prod-card:hover {
        transform: translateY(-9px);
        box-shadow: 0 28px 64px rgba(10,143,143,.18),0 8px 22px rgba(0,0,0,.1);
        border-color: rgba(10,143,143,.35)
    }

    /* Teal top sweep bar */
    .prod-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--teal),var(--teal-lt),var(--teal));
        z-index: 10;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .44s ease
    }

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

/* ── Image area ── */
.prod-img {
    position: relative;
    overflow: hidden;
    flex-shrink: 0
}

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

.prod-card:hover .prod-img img {
    transform: scale(1.07)
}

/* Subtle dark gradient at bottom of image for badge legibility */
.prod-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(8,20,34,.55) 0%,transparent 55%);
    pointer-events: none
}

/* Shimmer sweep */
.prod-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);
    transform: translateX(-110%);
    transition: transform .68s ease;
    pointer-events: none
}

.prod-card:hover .prod-img::before {
    transform: translateX(110%)
}

/* Series badge */
.prod-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: rgba(10,32,48,.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--fh);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.18)
}

/* Watermark number */
.prod-num {
    position: absolute;
    bottom: 6px;
    right: 12px;
    z-index: 3;
    font-family: var(--fh);
    font-size: 68px;
    font-weight: 900;
    color: rgba(255,255,255,.1);
    line-height: 1;
    letter-spacing: -4px;
    pointer-events: none;
    transition: color .4s
}

.prod-card:hover .prod-num {
    color: rgba(255,255,255,.18)
}

.prod-card.feat .prod-num {
    font-size: 110px;
    bottom: 10px
}

/* ── White content body ── */
.prod-body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative
}
    /* Animated left teal accent on body */
    .prod-body::after {
        content: '';
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 3px;
        background: linear-gradient(to bottom,var(--teal),var(--teal-lt));
        border-radius: 0 3px 3px 0;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s ease
    }

.prod-card:hover .prod-body::after {
    transform: scaleY(1)
}

.prod-tag {
    font-family: var(--fh);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 7px
}

    .prod-tag::before {
        content: '';
        width: 16px;
        height: 1.5px;
        background: var(--teal);
        flex-shrink: 0
    }

.prod-body h3 {
    font-family: var(--fh);
    font-size: 17px;
    font-weight: 800;
    color: var(--heading);
    line-height: 1.22;
    margin-bottom: 10px;
    transition: color .28s ease
}

.prod-card:hover .prod-body h3 {
    color: var(--teal)
}

.prod-body p {
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text-lt);
    line-height: 1.74;
    flex: 1
}

/* Animated explore link */
.prod-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-family: var(--fh);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: gap .22s,color .22s
}

    .prod-link span {
        display: inline-block;
        transition: transform .24s ease
    }

.prod-card:hover .prod-link {
    gap: 11px;
    color: var(--teal-dk)
}

    .prod-card:hover .prod-link span {
        transform: translateX(4px)
    }

/* Featured — 2 cols × 2 rows */
.prod-card.feat {
    grid-column: span 2;
    grid-row: span 2
}

    .prod-card.feat .prod-img {
        min-height: 370px
    }

    .prod-card.feat .prod-body {
        padding: 28px 28px 26px
    }

        .prod-card.feat .prod-body h3 {
            font-size: 22px
        }

        .prod-card.feat .prod-body p {
            font-size: 14px
        }

    .prod-card.feat .prod-num {
        font-size: 110px
    }

.prod-img {
    min-height: 190px
}

/* ── Why GBT Section ── */
.why-section {
    padding: 90px 5%;
    background: var(--off);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center
}

/* Left image */
.why-left {
    position: relative
}

.why-img-wrap {
    position: relative;
    border-radius: 24px;
    overflow: visible
}

    .why-img-wrap img {
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
        display: block;
        border-radius: 24px;
        transition: transform .6s ease;
        box-shadow: 0 24px 64px rgba(0,0,0,.18)
    }

    .why-img-wrap:hover img {
        transform: scale(1.03)
    }

.why-img-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(to top,rgba(12,32,48,.5) 0%,transparent 55%);
    pointer-events: none
}

/* Floating badges */
.why-badge {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 13px 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    z-index: 3;
    min-width: 100px
}

.why-badge-tl {
    top: 28px;
    left: -22px;
    animation: wfloat 3.2s ease-in-out infinite
}

.why-badge-br {
    bottom: 40px;
    right: -22px;
    animation: wfloat 3.2s ease-in-out infinite;
    animation-delay: .9s
}

.why-badge-ml {
    top: 44%;
    left: -28px;
    transform: translateY(-50%);
    animation: wfloat-x 3.4s ease-in-out infinite;
    animation-delay: .45s
}

@keyframes wfloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

@keyframes wfloat-x {
    0%,100% {
        transform: translateY(-50%) translateX(0)
    }

    50% {
        transform: translateY(-50%) translateX(-8px)
    }
}

.why-badge-num {
    font-family: var(--fh);
    font-size: 20px;
    font-weight: 900;
    color: var(--teal);
    line-height: 1
}

    .why-badge-num sup {
        font-size: 12px
    }

.why-badge-lbl {
    font-family: var(--fh);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-lt);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px
}

.why-badge-tick {
    width: 28px;
    height: 28px;
    background: var(--teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px
}

/* Right cards */
.why-right .section-desc {
    max-width: 460px
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px
}

.why-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease,box-shadow .3s ease
}

    .why-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--teal);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .32s ease
    }

    .why-card:hover {
        transform: translateX(7px);
        box-shadow: var(--sh-md)
    }

        .why-card:hover::before {
            transform: scaleY(1)
        }

.why-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid rgba(10,143,143,.14);
    transition: transform .3s ease,background .3s ease,filter .3s
}

.why-card:hover .why-icon {
    transform: scale(1.15) rotate(-8deg);
    background: var(--teal);
    filter: drop-shadow(0 4px 10px rgba(10,143,143,.35))
}

.why-card-body h3 {
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .2px
}

.why-card-body p {
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text-lt);
    line-height: 1.72;
    margin: 0
}

/* ============================================================
   APPLICATIONS SECTION
   ============================================================ */
.app-section {
    padding: 90px 5%;
    background: #fff;
    position: relative;
    overflow: hidden
}
    /* Decorative radial glows */
    .app-section::before {
        content: '';
        position: absolute;
        top: -140px;
        right: -140px;
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(10,143,143,.07) 0%,transparent 65%);
        pointer-events: none
    }

    .app-section::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(10,143,143,.05) 0%,transparent 65%);
        pointer-events: none
    }

.app-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1
}

    .app-header .section-desc {
        text-align: center;
        margin: 16px auto 0
    }

.app-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px;
    position: relative;
    z-index: 1
}

.app-card {
    background: #fff;
    border-radius: 18px;
    padding: 38px 32px 32px;
    border: 1.5px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform .34s ease,box-shadow .34s ease,border-color .34s ease
}
    /* Watermark number */
    .app-card::before {
        content: attr(data-num);
        position: absolute;
        top: -6px;
        right: 18px;
        font-family: var(--fh);
        font-size: 90px;
        font-weight: 900;
        color: rgba(10,143,143,.05);
        line-height: 1;
        pointer-events: none;
        transition: color .38s;
        letter-spacing: -3px
    }
    /* Animated left accent bar */
    .app-card::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(to bottom,var(--teal),var(--teal-lt));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s ease;
        border-radius: 4px 0 0 4px
    }

    .app-card:hover {
        transform: translateY(-9px);
        box-shadow: 0 28px 70px rgba(10,143,143,.16),0 6px 20px rgba(0,0,0,.07);
        border-color: rgba(10,143,143,.25)
    }

        .app-card:hover::before {
            color: rgba(10,143,143,.11)
        }

        .app-card:hover::after {
            transform: scaleY(1)
        }

/* Icon box */
.app-card-icon {
    width: 60px;
    height: 60px;
    background: var(--teal-pale);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
    border: 1.5px solid rgba(10,143,143,.13);
    transition: transform .34s ease,background .34s ease,border-color .34s,box-shadow .34s
}

.app-card:hover .app-card-icon {
    transform: scale(1.12) rotate(-8deg);
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 8px 24px rgba(10,143,143,.3)
}

.app-card h3 {
    font-family: var(--fh);
    font-size: 18px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 13px;
    transition: color .26s
}

.app-card:hover h3 {
    color: var(--teal)
}

.app-card p {
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--text-lt);
    line-height: 1.8
}
/* CTA link — slides up on hover */
.app-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-family: var(--fh);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s .08s,transform .3s .08s,gap .2s
}

.app-card:hover .app-card-link {
    opacity: 1;
    transform: translateY(0)
}

.app-card-link:hover {
    gap: 11px
}

/* ── Standard product card (inner pages) ── */
.product-card {
    background: #fff;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--border);
    transition: var(--tr);
    display: flex;
    flex-direction: column
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh-lg)
    }

.product-card-img {
    overflow: hidden
}

    .product-card-img img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform .45s;
        display: block
    }

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

.product-card-body {
    padding: 20px 22px;
    border-top: 3px solid var(--teal);
    flex: 1;
    display: flex;
    flex-direction: column
}

    .product-card-body .tag {
        font-family: var(--fh);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 7px
    }

    .product-card-body h3 {
        font-family: var(--fh);
        font-size: 16px;
        font-weight: 800;
        color: var(--heading);
        margin-bottom: 8px;
        line-height: 1.2
    }

    .product-card-body p {
        font-family: var(--fb);
        font-size: 13.5px;
        color: var(--text-lt);
        line-height: 1.72;
        flex: 1
    }

    .product-card-body a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--fh);
        font-size: 12px;
        font-weight: 700;
        color: var(--teal);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-top: 14px;
        transition: gap .2s
    }

        .product-card-body a:hover {
            gap: 10px
        }

/* Spec table */
.spec-table {
    width: 100%;
    border-collapse: collapse
}

    .spec-table tr {
        border-bottom: 1px solid var(--border)
    }

        .spec-table tr:last-child {
            border-bottom: none
        }

    .spec-table td {
        padding: 12px 0;
        font-size: 13.5px;
        vertical-align: middle
    }

        .spec-table td:first-child {
            font-family: var(--fh);
            font-weight: 700;
            color: var(--heading);
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: .5px;
            width: 48%
        }

        .spec-table td:last-child {
            color: var(--teal);
            font-weight: 700
        }

/* Form */
.form-group {
    margin-bottom: 17px
}

    .form-group label {
        display: block;
        margin-bottom: 7px;
        font-family: var(--fh);
        font-size: 11px;
        font-weight: 700;
        color: var(--heading);
        text-transform: uppercase;
        letter-spacing: .8px
    }

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    font-family: var(--fb);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .2s,box-shadow .2s
}

    .form-control:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(10,143,143,.1)
    }

textarea.form-control {
    resize: vertical;
    height: 110px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

/* Tech split */
.tech-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px
}

.tech-split-img {
    background-size: cover;
    background-position: center
}

.tech-split-content {
    background: var(--off);
    padding: 80px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

/* Colour swatches */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 44px
}

.swatch-card {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border)
}

.swatch-color {
    height: 170px
}

.swatch-body {
    padding: 16px 18px
}

    .swatch-body h4 {
        font-family: var(--fh);
        font-size: 14px;
        font-weight: 800;
        color: var(--heading);
        margin-bottom: 3px
    }

    .swatch-body p {
        font-family: var(--fb);
        font-size: 12.5px;
        color: var(--gray)
    }

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--r)
}

    .gallery-item img {
        width: 100%;
        object-fit: cover;
        transition: transform .4s;
        display: block
    }

    .gallery-item:hover img {
        transform: scale(1.05)
    }

/* Footer */
#site-footer {
    background: #0a1818
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 46px;
    padding: 64px 5% 50px;
    border-bottom: 1px solid rgba(255,255,255,.07)
}

.footer-brand p {
    font-family: var(--fb);
    font-size: 13.5px;
    color: rgba(255,255,255,.42);
    line-height: 1.8;
    max-width: 280px;
    margin-top: 14px
}

.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 18px
}

    .footer-social a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--tr)
    }

        .footer-social a:hover {
            background: var(--teal);
            border-color: var(--teal)
        }

    .footer-social svg {
        width: 15px;
        height: 15px;
        fill: rgba(255,255,255,.55)
    }

    .footer-social a:hover svg {
        fill: #fff
    }

.footer-col h5 {
    font-family: var(--fh);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 18px
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .footer-col ul li a {
        font-family: var(--fb);
        font-size: 13.5px;
        color: rgba(255,255,255,.42);
        transition: var(--tr)
    }

        .footer-col ul li a:hover {
            color: var(--teal-lt)
        }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 5%;
    font-family: var(--fb);
    font-size: 12.5px;
    color: rgba(255,255,255,.3)
}

    .footer-bottom a {
        color: var(--teal-lt)
    }

/* ============================================================
   COLOUR OPTIONS SECTION
   ============================================================ */
.colour-section {
    padding: 96px 5%;
    background: #fff;
    position: relative;
    overflow: hidden
}

    .colour-section::before {
        content: '';
        position: absolute;
        top: -220px;
        left: -220px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(10,143,143,.13) 0%,transparent 65%);
        pointer-events: none
    }

    .colour-section::after {
        content: '';
        position: absolute;
        bottom: -160px;
        right: -160px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(10,143,143,.08) 0%,transparent 65%);
        pointer-events: none
    }

.colour-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
    position: relative;
    z-index: 1
}

/* 4-col colour grid */
.colour-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    position: relative;
    z-index: 1;
    margin-bottom: 52px
}

.colour-card {
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    border: 1.5px solid var(--border);
    transition: transform .36s ease,box-shadow .36s ease,border-color .36s ease
}

    .colour-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 36px 90px rgba(0,0,0,.22);
        border-color: var(--teal)
    }

/* Colour swatch block */
.colour-swatch {
    height: 210px;
    position: relative;
    overflow: hidden
}
    /* Subtle diagonal stripe texture */
    .colour-swatch::after {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( -55deg, transparent,transparent 6px, rgba(255,255,255,.03) 6px,rgba(255,255,255,.03) 7px );
        pointer-events: none
    }

/* Shimmer sweep on hover */
.colour-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
    transform: translateX(-110%);
    transition: transform .7s ease;
    pointer-events: none
}

.colour-card:hover .colour-shine {
    transform: translateX(110%)
}

/* Individual colour gradients */
.colour-white {
    background: linear-gradient(140deg,#f8f8f4 0%,#e5e1d8 55%,#f0ede5 100%)
}

.colour-black {
    background: linear-gradient(140deg,#262626 0%,#161616 55%,#1e1e1e 100%)
}

.colour-grey {
    background: linear-gradient(140deg,#8a9099 0%,#5e6470 55%,#787e88 100%)
}

.colour-brown {
    background: linear-gradient(140deg,#9a6244 0%,#5e3018 55%,#7d4828 100%)
}

/* "Most Popular / Trending" badge */
.colour-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    background: var(--teal);
    color: #fff;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(10,143,143,.5)
}

/* Hex code label */
.colour-hex {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 4;
    font-family: var(--fb);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 9px;
    border-radius: 5px;
    color: rgba(255,255,255,.7);
    background: rgba(0,0,0,.3);
    backdrop-filter: blur(6px)
}

.colour-white .colour-hex {
    color: rgba(0,0,0,.4);
    background: rgba(255,255,255,.45)
}

/* Info panel */
.colour-info {
    padding: 22px 22px 20px;
    background: #fff;
    border-top: 1px solid var(--border)
}

    .colour-info h3 {
        font-family: var(--fh);
        font-size: 16px;
        font-weight: 800;
        color: var(--heading);
        margin-bottom: 8px;
        transition: color .26s
    }

.colour-card:hover .colour-info h3 {
    color: var(--teal)
}

.colour-info p {
    font-family: var(--fb);
    font-size: 12.5px;
    color: var(--text-lt);
    line-height: 1.72
}

/* Finish tags */
.colour-finishes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px
}

    .colour-finishes span {
        font-family: var(--fh);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--teal);
        border: 1px solid rgba(10,143,143,.3);
        padding: 3px 9px;
        border-radius: 100px;
        transition: background .24s,color .24s,border-color .24s
    }

.colour-card:hover .colour-finishes span {
    background: rgba(10,143,143,.18);
    border-color: var(--teal)
}

/* Bottom feature strip */
.colour-feature {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 40px;
    padding-top: 44px;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1
}

.colour-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-lt)
}

.colour-feature-icon {
    font-size: 19px
}

/* ============================================================
   ECO / SUSTAINABILITY SECTION
   ============================================================ */
.eco-section {
    background: linear-gradient(to bottom,var(--navy) 46%,var(--off) 46%);
    padding: 90px 5% 96px;
    position: relative
}

.eco-top {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 52px;
    position: relative;
    z-index: 1
}

    .eco-top .eyebrow {
        color: rgba(255,255,255,.62);
        border-color: rgba(255,255,255,.22)
    }

    .eco-top .section-title {
        color: #fff
    }

        .eco-top .section-title .accent {
            color: var(--teal-lt)
        }

    .eco-top .section-desc {
        color: rgba(255,255,255,.60);
        max-width: 600px;
        margin: 16px auto 0
    }

.eco-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    position: relative;
    z-index: 1
}

.eco-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    box-shadow: 0 24px 64px rgba(0,0,0,.32);
    transition: transform .38s ease,box-shadow .38s ease
}

    .eco-card:hover {
        transform: translateY(-14px) scale(1.02);
        box-shadow: 0 44px 96px rgba(0,0,0,.44)
    }

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

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

.eco-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(5,15,28,.90) 0%,rgba(5,15,28,.28) 52%,transparent 100%)
}

.eco-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 22px 22px
}

.eco-card-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.4))
}

.eco-card-label {
    font-family: var(--fh);
    font-size: 15.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .2px;
    line-height: 1.28
}

.eco-card-sub {
    font-family: var(--fb);
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 5px;
    line-height: 1.6
}

.eco-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(10,143,143,.82);
    color: #fff;
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    backdrop-filter: blur(6px)
}

/* ============================================================
   NEW PRODUCT CARDS (pcard)
   ============================================================ */
.pcard-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px
}

.pcard {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0,0,0,.08);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .34s ease,transform .34s ease
}

    .pcard:hover {
        box-shadow: 0 24px 72px rgba(0,0,0,.16);
        transform: translateY(-10px)
    }
/* Image area */
.pcard-img {
    position: relative;
    overflow: hidden
}

    .pcard-img img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
        transition: transform .55s ease
    }

.pcard:hover .pcard-img img {
    transform: scale(1.06)
}
/* Series badge top-left */
.pcard-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: rgba(12,32,48,.82);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--fh);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px
}
/* Frosted glass info panel — right side of image */
.pcard-info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 41%;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,255,255,.22);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2
}
/* Brand row inside panel */
.pcard-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.25)
}

.pcard-brand-icon {
    width: 34px;
    height: 34px;
    background: var(--teal);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0
}

.pcard-brand-name {
    font-family: var(--fh);
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    line-height: 1
}

.pcard-brand-sub {
    font-family: var(--fh);
    font-size: 6.5px;
    font-weight: 700;
    color: rgba(255,255,255,.8);
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1.45;
    margin-top: 2px
}

.pcard-brand-tag {
    font-family: var(--fb);
    font-size: 6.5px;
    color: var(--teal-lt);
    font-style: italic;
    margin-top: 1px
}
/* Product type row inside panel */
.pcard-type {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.2)
}

.pcard-type-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1.5px solid rgba(18,176,176,.7);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

.pcard-type-name {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.35
}

.pcard-type-sub {
    font-family: var(--fb);
    font-size: 8px;
    color: rgba(255,255,255,.68);
    font-style: italic;
    margin-top: 3px
}
/* Feature rows inside panel */
.pcard-feats {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.pcard-feat {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fh);
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(255,255,255,.82);
    letter-spacing: .8px;
    text-transform: uppercase
}

.pcard-feat-ic {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px
}
/* Bottom content body */
.pcard-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.pcard-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px
}

.pcard-tag-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--teal);
    border-radius: 2px;
    flex-shrink: 0
}

.pcard-title {
    font-family: var(--fh);
    font-size: 22px;
    font-weight: 900;
    color: var(--heading);
    margin-bottom: 10px;
    line-height: 1.18;
    transition: color .24s
}

.pcard:hover .pcard-title {
    color: var(--teal)
}

.pcard-desc {
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--text-lt);
    line-height: 1.76;
    flex: 1;
    margin-bottom: 16px
}

.pcard-footer {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: auto
}

.pcard-link {
    font-family: var(--fh);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .22s,color .22s
}

.pcard:hover .pcard-link {
    gap: 14px;
    color: var(--teal-dk)
}

/* ============================================================
   QUALITY COMMITMENT SECTION
   ============================================================ */
.quality-section {
    padding: 90px 5%;
    background: #fff
}

.quality-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 80px;
    align-items: center;
    margin-bottom: 56px
}

.quality-eyebrow {
    font-family: var(--fh);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-lt);
    margin-bottom: 14px
}

.quality-heading {
    font-family: var(--fh);
    font-size: 36px;
    font-weight: 900;
    color: var(--heading);
    line-height: 1.14;
    letter-spacing: -.4px
}

.quality-right-desc {
    font-family: var(--fb);
    font-size: 14.5px;
    color: var(--text-lt);
    line-height: 1.82
}

.quality-pillars {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--border);
    padding-top: 48px;
    gap: 0
}

.quality-pillar {
    padding: 0 40px;
    border-right: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px
}

    .quality-pillar:first-child {
        padding-left: 0
    }

    .quality-pillar:last-child {
        border-right: none;
        padding-right: 0
    }

.quality-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .quality-icon svg {
        width: 52px;
        height: 52px;
        stroke: var(--heading);
        fill: none;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.quality-pillar h3 {
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 800;
    color: var(--heading);
    line-height: 1.38;
    margin: 0
}

.quality-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--heading);
    border-radius: 50px;
    padding: 8px 20px;
    font-family: var(--fh);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--heading);
    text-decoration: none;
    transition: background .22s,color .22s,border-color .22s;
    margin-top: auto
}

    .quality-read:hover {
        background: var(--heading);
        color: #fff
    }

/* ============================================================
   BENEFITS OF uPVC SECTION
   ============================================================ */
.benefits-section {
    padding: 90px 5%;
    background: #fff
}

.benefits-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px
}

    .benefits-header .section-desc {
        max-width: 780px;
        margin: 16px auto 0;
        text-align: center
    }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 36px 52px;
    max-width: 1120px;
    margin: 0 auto
}

.benefit-item {
    display: flex;
    gap: 18px;
    align-items: flex-start
}

.benefit-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--teal-pale);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0
}

.benefit-content h3 {
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--heading);
    margin-bottom: 8px
}

.benefit-content p {
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--text-lt);
    line-height: 1.75
}

/* ============================================================
   VISION / CONTACT CTA SECTION
   ============================================================ */
.vision-section {
    position: relative;
    background-image: url('../images/vision-bg.jpg');
    background-size: cover;
    background-position: center top;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 90px 5%
}

.vision-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,rgba(5,15,28,.72) 0%,rgba(5,15,28,.40) 52%,rgba(5,15,28,.15) 100%)
}

.vision-inner {
    position: relative;
    z-index: 2;
    max-width: 600px
}

.vision-heading {
    font-family: var(--fh);
    font-size: 44px;
    font-weight: 900;
    color: #fff;
    line-height: 1.08;
    margin: 10px 0 16px;
    letter-spacing: -.5px
}

.vision-desc {
    font-family: var(--fb);
    font-size: 15px;
    line-height: 1.78;
    color: rgba(255,255,255,.60);
    margin-bottom: 36px;
    max-width: 480px
}

.vision-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 42px
}

.vision-stat-num {
    font-family: var(--fh);
    font-size: 54px;
    font-weight: 900;
    color: rgba(255,255,255,.20);
    line-height: 1;
    letter-spacing: -2px
}

    .vision-stat-num sup {
        font-size: 34px;
        vertical-align: top;
        margin-top: 4px;
        letter-spacing: 0
    }

.vision-stat-label {
    font-family: var(--fh);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    color: rgba(255,255,255,.58);
    text-transform: uppercase;
    margin-top: 8px
}

.vision-form {
    background: var(--teal);
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35)
}

.vision-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.vision-form input {
    background: #fff;
    border: none;
    border-radius: 9px;
    padding: 15px 16px;
    font-family: var(--fb);
    font-size: 14px;
    color: var(--text);
    outline: none;
    width: 100%;
    box-sizing: border-box
}

    .vision-form input::placeholder {
        color: var(--gray)
    }

.vision-form button {
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 15px 24px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background .2s;
    letter-spacing: .3px
}

    .vision-form button:hover {
        background: #000
    }

/* ============================================================
   INSTAGRAM SECTION
   ============================================================ */
.insta-section {
    padding: 80px 5%;
    background: var(--off);
    text-align: center
}

.insta-header {
    margin-bottom: 40px
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 8px;
    max-width: 1120px;
    margin: 0 auto 40px
}

.insta-post {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    display: block;
    background: var(--border)
}

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

    .insta-post:hover img {
        transform: scale(1.1)
    }

.insta-post-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,143,143,.76);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s
}

.insta-post:hover .insta-post-overlay {
    opacity: 1
}

.insta-post-overlay svg {
    width: 34px;
    height: 34px;
    fill: #fff
}

.btn-insta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg,#f58529 0%,#dd2a7b 40%,#8134af 70%,#515bd4 100%);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s,transform .2s
}

    .btn-insta:hover {
        opacity: .88;
        transform: translateY(-2px)
    }

/* ============================================================
   INNER PAGES — ABOUT & WHY CHOOSE US
   ============================================================ */

/* Shared stats bar */
.ip-stats-bar {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: var(--navy)
}

.ip-stat {
    padding: 38px 24px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
    transition: background .3s
}

    .ip-stat:hover {
        background: rgba(255,255,255,.04)
    }

    .ip-stat::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--teal);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s ease
    }

    .ip-stat:hover::after {
        transform: scaleX(1)
    }

    .ip-stat:last-child {
        border-right: none
    }

.ip-stat-num {
    font-family: var(--fh);
    font-size: 46px;
    font-weight: 900;
    color: var(--teal);
    line-height: 1;
    letter-spacing: -2px
}

.ip-stat-label {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 8px
}

/* ── ABOUT PAGE ── */
.about-story {
    padding: 90px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    background: #fff
}

.about-story-text .section-desc {
    margin-bottom: 14px
}

.about-story-text .btn {
    margin-top: 28px;
    display: inline-flex
}

.about-story-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

    .about-story-imgs img {
        width: 100%;
        object-fit: cover;
        border-radius: 14px;
        transition: transform .5s ease
    }

        .about-story-imgs img:hover {
            transform: scale(1.02)
        }

        .about-story-imgs img:first-child {
            grid-column: span 2;
            aspect-ratio: 16/8
        }

        .about-story-imgs img:not(:first-child) {
            aspect-ratio: 1
        }

.about-mv {
    padding: 90px 5%;
    background: var(--off);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px
}

.about-mv-card {
    background: #fff;
    border-radius: 20px;
    padding: 42px 32px;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--border);
    text-align: center;
    transition: transform .3s ease,box-shadow .3s ease;
    position: relative;
    overflow: hidden
}

    .about-mv-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--teal);
        transform: scaleX(0);
        transition: transform .34s ease
    }

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

        .about-mv-card:hover::after {
            transform: scaleX(1)
        }

.about-mv-icon {
    width: 66px;
    height: 66px;
    background: var(--teal-pale);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 22px;
    border: 1px solid rgba(10,143,143,.14);
    transition: transform .3s,background .3s
}

.about-mv-card:hover .about-mv-icon {
    transform: scale(1.12) rotate(-7deg);
    background: var(--teal)
}

.about-mv-card h3 {
    font-family: var(--fh);
    font-size: 19px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 13px
}

.about-mv-card p {
    font-family: var(--fb);
    font-size: 14px;
    color: var(--text-lt);
    line-height: 1.80
}

.about-mfg {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    padding: 90px 5%;
    background-image: url('../images/tech-coextrusion.jpg');
    background-size: cover;
    background-position: center
}

.about-mfg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,rgba(5,15,28,.93) 0%,rgba(5,15,28,.80) 55%,rgba(5,15,28,.42) 100%)
}

.about-mfg-inner {
    position: relative;
    z-index: 2;
    max-width: 640px
}

    .about-mfg-inner h2 {
        font-family: var(--fh);
        font-size: clamp(26px,3.2vw,42px);
        font-weight: 900;
        color: #fff;
        line-height: 1.13;
        margin-bottom: 18px;
        letter-spacing: -.4px
    }

    .about-mfg-inner p {
        font-family: var(--fb);
        font-size: 15px;
        color: rgba(255,255,255,.72);
        line-height: 1.82;
        margin-bottom: 30px
    }

.about-mfg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.about-mfg-pill {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    padding: 9px 20px;
    border-radius: 50px;
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: background .25s
}

    .about-mfg-pill:hover {
        background: rgba(10,143,143,.35)
    }

.about-values {
    padding: 90px 5%;
    background: #fff
}

.about-val-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 52px
}

.about-val-card {
    padding: 38px 30px;
    border-radius: 18px;
    background: var(--off);
    border: 1px solid var(--border);
    transition: transform .3s,box-shadow .3s,background .3s;
    position: relative;
    overflow: hidden
}

    .about-val-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--teal);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .34s ease
    }

    .about-val-card:hover {
        transform: translateX(6px);
        box-shadow: var(--sh-md);
        background: #fff
    }

        .about-val-card:hover::before {
            transform: scaleY(1)
        }

.about-val-num {
    font-family: var(--fh);
    font-size: 52px;
    font-weight: 900;
    color: var(--teal);
    opacity: .10;
    line-height: 1;
    margin-bottom: -8px
}

.about-val-icon {
    font-size: 30px;
    margin-bottom: 14px
}

.about-val-card h3 {
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 800;
    color: var(--heading);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 10px
}

.about-val-card p {
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--text-lt);
    line-height: 1.75
}

.about-cta {
    background: var(--teal);
    padding: 80px 5%;
    text-align: center
}

    .about-cta h2 {
        font-family: var(--fh);
        font-size: clamp(24px,3vw,38px);
        font-weight: 900;
        color: #fff;
        margin-bottom: 14px;
        letter-spacing: -.3px
    }

    .about-cta p {
        font-family: var(--fb);
        font-size: 15px;
        color: rgba(255,255,255,.82);
        max-width: 520px;
        margin: 0 auto 34px;
        line-height: 1.78
    }

.btn-white {
    background: #fff;
    color: var(--teal);
    padding: 14px 36px;
    border-radius: 50px;
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .22s,box-shadow .22s
}

    .btn-white:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(0,0,0,.18)
    }

/* ── WHY CHOOSE US PAGE ── */
.wcu-advantages {
    padding: 90px 5%;
    background: var(--off)
}

.wcu-adv-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
    margin-top: 52px
}

.wcu-adv-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform .3s,box-shadow .3s
}

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

.wcu-adv-img {
    aspect-ratio: 16/7;
    overflow: hidden
}

    .wcu-adv-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .55s ease
    }

.wcu-adv-card:hover .wcu-adv-img img {
    transform: scale(1.06)
}

.wcu-adv-body {
    padding: 28px 28px 32px;
    flex: 1
}

.wcu-adv-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--teal-pale);
    color: var(--teal);
    padding: 5px 14px;
    border-radius: 50px;
    font-family: var(--fh);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 14px
}

.wcu-adv-body h3 {
    font-family: var(--fh);
    font-size: 21px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 11px
}

.wcu-adv-body p {
    font-family: var(--fb);
    font-size: 14px;
    color: var(--text-lt);
    line-height: 1.78;
    margin: 0
}

.wcu-quality {
    padding: 90px 5%;
    background: #fff
}

.wcu-quality-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 52px
}

    .wcu-quality-wrap img {
        width: 100%;
        border-radius: 20px;
        box-shadow: var(--sh-md)
    }

.wcu-q-list {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.wcu-q-card {
    padding: 26px 28px;
    background: var(--off);
    border-radius: var(--r);
    border-left: 4px solid var(--teal);
    transition: transform .3s,box-shadow .3s,border-color .3s
}

    .wcu-q-card:hover {
        transform: translateX(6px);
        box-shadow: var(--sh-md);
        border-color: var(--teal-lt)
    }

    .wcu-q-card h3 {
        font-family: var(--fh);
        font-size: 15px;
        font-weight: 800;
        color: var(--heading);
        margin-bottom: 8px
    }

    .wcu-q-card p {
        font-family: var(--fb);
        font-size: 13.5px;
        color: var(--text-lt);
        line-height: 1.75;
        margin: 0
    }

.wcu-compare {
    padding: 90px 5%;
    background: var(--off)
}

.wcu-compare-wrap {
    overflow-x: auto;
    margin-top: 52px;
    border-radius: 18px;
    box-shadow: var(--sh-md)
}

.wcu-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px
}

    .wcu-compare-table th {
        padding: 18px 24px;
        font-family: var(--fh);
        font-size: 11.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: var(--navy);
        color: rgba(255,255,255,.55)
    }

        .wcu-compare-table th:first-child {
            text-align: left;
            color: #fff
        }

.wcu-th-gbt {
    background: var(--teal) !important;
    color: #fff !important
}

.wcu-compare-table td {
    padding: 15px 24px;
    font-family: var(--fb);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    background: #fff
}

    .wcu-compare-table td:first-child {
        text-align: left;
        font-family: var(--fh);
        font-size: 13px;
        font-weight: 700;
        color: var(--heading)
    }

.wcu-compare-table tr:last-child td {
    border-bottom: none
}

.wcu-compare-table tr:nth-child(even) td {
    background: var(--off)
}

.wcu-td-gbt {
    background: rgba(10,143,143,.07) !important;
    color: var(--teal);
    font-weight: 700;
    font-family: var(--fh) !important
}

.wcu-tick {
    color: var(--teal);
    font-size: 18px
}

.wcu-cross {
    color: #e05252;
    font-size: 16px
}

.wcu-part {
    color: #e09a28;
    font-size: 14px
}

.wcu-certs {
    padding: 80px 5%;
    background: var(--navy);
    text-align: center
}

    .wcu-certs .eyebrow {
        color: rgba(255,255,255,.5)
    }

    .wcu-certs .section-title {
        color: #fff
    }

.wcu-cert-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 44px
}

.wcu-cert-badge {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 30px 38px;
    min-width: 170px;
    backdrop-filter: blur(6px);
    transition: transform .3s,background .3s
}

    .wcu-cert-badge:hover {
        transform: translateY(-6px);
        background: rgba(10,143,143,.18)
    }

.wcu-cert-icon {
    font-size: 34px;
    margin-bottom: 12px
}

.wcu-cert-name {
    font-family: var(--fh);
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 5px
}

.wcu-cert-desc {
    font-family: var(--fb);
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
    letter-spacing: .4px
}

.wcu-cta {
    padding: 80px 5%;
    background: var(--teal);
    text-align: center
}

    .wcu-cta h2 {
        font-family: var(--fh);
        font-size: clamp(24px,3vw,36px);
        font-weight: 900;
        color: #fff;
        margin-bottom: 14px
    }

    .wcu-cta p {
        font-family: var(--fb);
        font-size: 15px;
        color: rgba(255,255,255,.82);
        max-width: 500px;
        margin: 0 auto 32px;
        line-height: 1.78
    }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
    .mega-inner {
        grid-template-columns: 1fr 1fr 240px
    }

        .mega-inner .mega-col:nth-child(3) {
            display: none
        }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .why-section {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .why-img-wrap img {
        aspect-ratio: 16/9
    }

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

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

    .prod-card.feat {
        grid-column: span 2;
        grid-row: span 1
    }

        .prod-card.feat .prod-img {
            min-height: 260px
        }

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

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

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

    .eco-section {
        background: linear-gradient(to bottom,var(--navy) 36%,var(--off) 36%)
    }

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

    .insta-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .quality-top {
        grid-template-columns: 1fr
    }

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

    .quality-pillar {
        padding: 28px 24px;
        border-right: none;
        border-bottom: 1px solid var(--border)
    }

        .quality-pillar:nth-child(odd) {
            border-right: 1px solid var(--border)
        }

        .quality-pillar:last-child {
            border-bottom: none
        }

    .vision-heading {
        font-size: 36px
    }

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

@media(max-width:900px) {
    .nav-menu {
        display: none
    }

    .hamburger {
        display: flex
    }

    .nav-right .nav-brochure {
        display: none
    }

    .tech-split {
        grid-template-columns: 1fr
    }

    .tech-split-img {
        min-height: 260px
    }

    .tech-split-content {
        padding: 56px 5%
    }

    .form-row {
        grid-template-columns: 1fr
    }

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

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

@media(max-width:640px) {
    :root {
        --topbar-h: 0px;
        --nav-h: 76px
    }

    .nav-logo-img {
        height: 58px;
        max-width: 220px
    }

    #top-bar {
        display: none
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

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

    .why-badge-tl {
        left: 8px
    }

    .why-badge-br {
        right: 8px
    }

    .why-badge-ml {
        left: 8px
    }

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

    .prod-card.feat {
        grid-column: span 1;
        grid-row: span 1
    }

        .prod-card.feat .prod-img {
            min-height: 220px
        }

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

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

    .eco-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .eco-section {
        background: var(--navy);
        padding-bottom: 80px
    }

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

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

    .quality-pillars {
        grid-template-columns: 1fr
    }

    .quality-pillar {
        border-right: none !important;
        border-bottom: 1px solid var(--border)
    }

        .quality-pillar:last-child {
            border-bottom: none
        }

    .quality-heading {
        font-size: 28px
    }

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

    .pcard-info {
        width: 46%
    }

    .vision-stats {
        gap: 24px
    }

    .vision-stat-num {
        font-size: 40px
    }

    .vision-form-row {
        grid-template-columns: 1fr
    }

    .vision-heading {
        font-size: 30px
    }

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

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

    .hero h1 {
        font-size: 32px
    }

    .hero-stat-num {
        font-size: 26px
    }
}

/* ============================================================
   INNER PAGE LAYOUT CLASSES (converted from inline styles)
   ============================================================ */

/* Blog index */
.blog-section {
    padding: 90px 5%
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

@media(max-width:900px) {
    .blog-grid { grid-template-columns: repeat(2,1fr) }
}

@media(max-width:540px) {
    .blog-section { padding: 56px 5% }
    .blog-grid    { grid-template-columns: 1fr; gap: 20px }
}

/* Contact page 2-col layout */
.contact-layout {
    padding: 90px 5%;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 76px;
    align-items: start
}

/* Technology co-extrusion 2-col */
.tech-coex-section {
    padding: 90px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

/* Technology stats band */
.tech-stats-band {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    text-align: center
}

/* Colours co-extrusion split */
.colours-coex-split {
    background: var(--teal-pale);
    border-radius: var(--r);
    padding: 46px;
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center
}

/* ============================================================
   INNER PAGES — RESPONSIVE (1024px / 768px / 640px)
   ============================================================ */

@media(max-width:1024px) {
    /* About */
    .about-story        { grid-template-columns: 1fr; gap: 48px }
    .about-val-grid     { grid-template-columns: repeat(2,1fr) }
    .about-mv           { grid-template-columns: 1fr; gap: 20px }
    /* WhyChooseUs */
    .wcu-quality-wrap   { grid-template-columns: 1fr; gap: 40px }
    .wcu-quality-wrap img { display: none }
    /* Technology */
    .tech-coex-section  { grid-template-columns: 1fr; gap: 48px }
    .tech-stats-band    { grid-template-columns: repeat(2,1fr) }
    /* Colours */
    .colours-coex-split { grid-template-columns: 1fr; gap: 32px }
    /* Contact */
    .contact-layout     { grid-template-columns: 1fr; gap: 48px }
}

@media(max-width:768px) {
    /* Shared inner page stats bar */
    .ip-stats-bar { grid-template-columns: repeat(2,1fr) }
    .ip-stat { border-bottom: 1px solid rgba(255,255,255,.07) }
    /* About — mission/vision/promise */
    .about-mv           { padding: 60px 5%; gap: 16px }
    .about-mv-card      { padding: 28px 24px }
    .about-mv-icon      { width: 52px; height: 52px; font-size: 22px }
    /* About */
    .about-val-grid     { grid-template-columns: 1fr }
    .about-story-imgs   { grid-template-columns: 1fr }
    .about-story-imgs img:first-child { grid-column: span 1 }
    /* WhyChooseUs */
    .wcu-adv-grid       { grid-template-columns: 1fr }
    .wcu-hero-grid      { grid-template-columns: 1fr }
    /* Reduce side padding for inner page sections */
    .contact-layout     { padding: 60px 5%; gap: 36px }
    .tech-coex-section  { padding: 60px 5% }
    .colours-coex-split { padding: 28px; margin-top: 36px }
    /* Page hero inner padding */
    .page-hero          { padding: 70px 5% 56px; min-height: 240px }
}

@media(max-width:640px) {
    /* Shared inner page stats bar — 2 col */
    .ip-stats-bar { grid-template-columns: repeat(2,1fr) }
    /* Tech stats band */
    .tech-stats-band    { grid-template-columns: repeat(2,1fr) }
    /* Contact */
    .contact-layout     { padding: 52px 5%; gap: 32px }
    /* About val-grid */
    .about-val-grid     { grid-template-columns: 1fr }
    /* About mission/vision/promise — compact on small screens */
    .about-mv           { padding: 48px 5% }
    .about-mv-card      { padding: 24px 20px; border-radius: 14px }
    .about-mv-card h3   { font-size: 17px; margin-bottom: 10px }
    /* Section headings size */
    .page-hero .section-title { font-size: clamp(22px,6vw,36px) }
    /* Reduce large section paddings on mobile */
    .wcu-adv, .wcu-quality, .wcu-compare,
    .wcu-certs, .about-mfg { padding-left: 5%; padding-right: 5% }
    /* WhyChooseUs comparison table — allow horizontal scroll */
    .wcu-compare-wrap   { -webkit-overflow-scrolling: touch }
}