/* =========================================================
   PANDORAX PACKAGING SYSTEMS
   MAIN WEBSITE STYLES
   ========================================================= */

:root{
    --green:#00d75a;
    --dark:#061416;
    --dark2:#092629;
    --white:#ffffff;
    --light:#f4f7f5;
    --gray:#aebbbb;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:#101718;
    background:#ffffff;
}

a{
    color:inherit;
    text-decoration:none;
}

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


/* =========================================================
   HEADER
   ========================================================= */

header{
    background:#071719;
    color:#ffffff;
    border-bottom:1px solid #294042;
}

.header-wrap{
    max-width:1500px;
    margin:auto;
    padding:22px 35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.brand{
    min-width:280px;
}

.logo{
    font-size:35px;
    line-height:1;
    font-weight:900;
    letter-spacing:1px;
}

.logo .x{
    color:var(--green);
}

.brand-sub{
    margin-top:5px;
    font-size:17px;
    font-weight:700;
    letter-spacing:2px;
}

.tagline{
    margin-top:9px;
    color:#d8e0df;
    font-size:12px;
    font-style:italic;
    font-weight:700;
}

.navigation{
    flex:1;
}

.utility-nav{
    display:flex;
    justify-content:flex-end;
    gap:25px;
    margin-bottom:24px;
    color:#c9d1d0;
    font-size:12px;
}

.main-nav{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:28px;
    font-size:13px;
    font-weight:800;
}

.main-nav a:hover,
.utility-nav a:hover{
    color:var(--green);
}

.quote-btn{
    background:var(--green);
    color:#04120b !important;
    padding:14px 20px;
    font-weight:900;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    min-height:560px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            90deg,
            rgba(3,14,16,.96) 0%,
            rgba(3,14,16,.78) 42%,
            rgba(3,14,16,.20) 100%
        ),
        url('/images/hero-clean.png?v=20260921-final')
        center center / cover no-repeat;

    color:#ffffff;
}

.hero-content{
    position:relative;
    z-index:3;
    width:100%;
    max-width:1500px;
    margin:auto;
    padding:80px 35px;
}

.eyebrow{
    color:var(--green);
    font-size:14px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:18px;
}

.hero h1{
    max-width:900px;
    font-size:58px;
    line-height:1.02;
    text-transform:uppercase;
}

.hero h1 span{
    color:var(--green);
}

.hero p{
    max-width:730px;
    margin-top:24px;
    color:#e1e8e7;
    font-size:19px;
    line-height:1.6;
}

.hero-actions{
    margin-top:34px;
    display:flex;
    gap:14px;
}

.btn{
    display:inline-block;
    padding:15px 23px;
    font-size:13px;
    font-weight:900;
    letter-spacing:.5px;
}

.btn-primary{
    background:var(--green);
    color:#04130b;
}

.btn-outline{
    border:1px solid #829091;
    color:#ffffff;
}

.btn:hover{
    opacity:.92;
}

.hero-promise{
    position:absolute;
    right:5%;
    top:19%;
    z-index:3;
    color:#ffffff;
    font-weight:800;
    line-height:1.5;
    border-left:3px solid var(--green);
    padding-left:16px;
}


/* =========================================================
   INDUSTRIES & SOLUTIONS
   ========================================================= */

.industries-final{
    padding:85px 35px;
    background:#f4f7f5;
    position:relative;
    z-index:2;
    clear:both;
}

.lower-heading{
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:32px;
}

.section-label{
    color:#657273;
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:10px;
}

.section-title{
    font-size:44px;
    line-height:1.1;
    margin-bottom:12px;
}

.section-title span{
    color:#16a64a;
}

.section-copy{
    color:#657071;
    font-size:17px;
    margin-bottom:35px;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.approved-grid{
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.approved-card{
    position:relative;
    height:330px;
    overflow:hidden;
    background:#061416;
}

.approved-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.approved-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,20,25,.98),
            rgba(0,20,25,.78) 27%,
            transparent 72%
        );
    pointer-events:none;
}

.approved-copy{
    position:absolute;
    z-index:3;
    left:18px;
    right:18px;
    bottom:16px;
    color:#ffffff;
}

.approved-copy h3{
    margin:0 42px 6px 0;
    color:#ffffff;
    font-size:20px;
    line-height:1.08;
    font-weight:800;
    text-transform:uppercase;
}

.approved-copy p{
    margin:0 42px 0 0;
    color:#ffffff;
    font-size:14px;
    line-height:1.3;
}

.approved-arrow{
    position:absolute;
    right:0;
    bottom:0;
    color:var(--green);
    font-size:36px;
    font-weight:900;
}


/* =========================================================
   CORROSION & DUST PROTECTION
   FULL WIDTH FEATURE
   ========================================================= */

.corrosion-feature{
    grid-column:1 / -1;
    width:100%;
    margin-top:8px;
    background:#071719;
    overflow:hidden;
}

.corrosion-feature img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}


/* =========================================================
   TRADE SHOW CRATES
   ========================================================= */

.trade-show-gallery{
    max-width:1500px;
    margin:34px auto 0;
}

.trade-show-gallery h3{
    font-size:29px;
    line-height:1.2;
    margin-bottom:8px;
}

.trade-show-gallery > p{
    color:#596667;
    font-size:16px;
    line-height:1.5;
    margin-bottom:20px;
}

.trade-show-views figure{
    background:#071719;
    color:#ffffff;
}

.trade-show-views img{
    width:100%;
    height:auto;
    display:block;
}

.trade-show-views figcaption{
    font-size:13px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    padding:14px 16px;
}


/* =========================================================
   INDUSTRIAL PAINTING
   ========================================================= */

.painting-capability{
    max-width:1500px;
    margin:30px auto 0;
    padding:30px 34px;
    background:#071719;
    color:#ffffff;
    border-left:5px solid var(--green);
}

.painting-capability h3{
    font-size:27px;
    line-height:1.2;
    margin-bottom:9px;
}

.painting-capability p{
    font-size:16px;
    line-height:1.55;
    color:#d5dfdc;
    max-width:980px;
}


/* =========================================================
   MISSION & CORE VALUES
   ========================================================= */

.mission-values{
    background:#071719;
    padding:70px 35px;
    position:relative;
    z-index:2;
}

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

.mission-values img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}


/* =========================================================
   CERTIFICATIONS & COMPLIANCE
   ========================================================= */

.standards-strip{
    background:#050f10;
    padding:34px 35px;
    position:relative;
    z-index:2;
}

.standards-strip img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}


/* =========================================================
   CALL TO ACTION
   ========================================================= */

.cta{
    background:var(--green);
    padding:58px 35px;
}

.cta-wrap{
    max-width:1500px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.cta h2{
    font-size:34px;
    color:#04130c;
}

.cta p{
    margin-top:7px;
    color:#08321c;
    font-weight:700;
}

.cta a{
    background:#071719;
    color:#ffffff;
    padding:17px 25px;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    background:#050f10;
    color:#ffffff;
    padding:60px 35px 30px;
}

.footer-grid{
    max-width:1500px;
    margin:auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:45px;
}

.footer-logo{
    font-size:29px;
    font-weight:900;
}

.footer-logo .x{
    color:var(--green);
}

.footer-brand p{
    color:#9eaaaa;
    margin-top:15px;
    line-height:1.6;
    font-size:13px;
    max-width:390px;
}

footer h4{
    color:var(--green);
    font-size:13px;
    margin-bottom:17px;
}

footer ul{
    list-style:none;
}

footer li{
    color:#aeb8b8;
    font-size:13px;
    margin-bottom:11px;
}

.footer-bottom{
    max-width:1500px;
    margin:45px auto 0;
    padding-top:22px;
    border-top:1px solid #263536;
    color:#7f8c8c;
    font-size:12px;
    display:flex;
    justify-content:space-between;
    gap:20px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

    .header-wrap{
        display:block;
    }

    .navigation{
        margin-top:25px;
    }

    .utility-nav,
    .main-nav{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .hero h1{
        font-size:43px;
    }

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

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

    .header-wrap,
    .hero-content,
    .industries-final,
    .mission-values,
    .standards-strip{
        padding-left:20px;
        padding-right:20px;
    }

    .brand{
        min-width:0;
    }

    .logo{
        font-size:30px;
    }

    .main-nav{
        gap:15px;
    }

    .hero{
        min-height:620px;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-promise{
        position:relative;
        right:auto;
        top:auto;
        margin:25px 22px 0;
    }

    .section-title{
        font-size:33px;
    }

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

    .approved-card{
        height:320px;
    }

    .corrosion-feature{
        grid-column:1 / -1;
        margin-top:8px;
    }

    .corrosion-feature img{
        width:100%;
        height:auto;
    }

    .painting-capability{
        padding:25px 20px;
    }

    .cta-wrap{
        display:block;
    }

    .cta a{
        display:inline-block;
        margin-top:25px;
    }

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

    .footer-bottom{
        display:block;
    }

    .footer-bottom span{
        display:block;
        margin-bottom:8px;
    }

}



/* Additions are scoped to px- classes to preserve existing brand sections. */
a:focus-visible{outline:3px solid #00d75a;outline-offset:5px}
.px-skip{position:absolute;top:-100px;left:16px;background:#fff;padding:12px;z-index:99}.px-skip:focus{top:12px}
.px-wrap{max-width:1500px;margin:0 auto}.px-section{padding:72px 35px}.px-soft{background:#f4f7f5}.px-dark{background:#071719;color:#fff}.px-label{font-size:12px;font-weight:800;letter-spacing:2px;color:#11883e;margin-bottom:12px}.px-dark .px-label{color:#00d75a}.px-heading{margin-bottom:30px}.px-heading h1,.px-heading h2{font-size:clamp(28px,3vw,44px);line-height:1.12;max-width:1000px;letter-spacing:-.6px}.px-lead{font-size:18px;line-height:1.65;color:#566565;max-width:900px;margin-top:18px}.px-dark .px-lead{color:#d2dfdb}.px-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.px-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dce4df;transition:transform .18s,border-color .18s;color:#101718}.px-card:hover{transform:translateY(-3px);border-color:#189d4e}.px-card>img,.px-preservation{height:240px;object-fit:cover;width:100%}.px-card>div:not(.px-preservation){padding:23px;flex:1}.px-card h3{font-size:21px;line-height:1.2;margin-bottom:10px}.px-card p{font-size:15px;color:#596768;line-height:1.6;margin-bottom:20px}.px-card-link{font-size:14px;font-weight:700;color:#087b36}.px-preservation{background:linear-gradient(135deg,#061416,#0c3930);display:grid;place-items:center;color:#00d75a;letter-spacing:2px;font-size:28px;font-weight:800;line-height:1.2}.px-button{display:inline-flex;align-items:center;gap:20px;padding:16px 23px;font-size:13px;font-weight:800;background:#00d75a;color:#04130b;border:1px solid #00d75a;line-height:1.3}.px-button:hover{filter:brightness(.94)}.px-outline{background:transparent;color:inherit;border-color:#7e9390}.px-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.px-breadcrumb{padding:24px 35px;font-size:13px;display:flex;gap:12px;color:#52625d}.px-breadcrumb a{text-decoration:underline}.px-intro{padding-top:35px}.px-wide-photo{width:100%;max-height:560px;object-fit:cover;margin:25px 0}.px-caption{font-size:12px;color:#61716c;line-height:1.5;margin-top:9px}.px-two{display:grid;grid-template-columns:1fr 1fr;gap:45px}.px-two h2{font-size:28px;margin-bottom:20px}.px-two h3{margin-bottom:12px}.px-two p{line-height:1.75;color:#566565}.px-list{padding-left:21px;color:#445953;line-height:1.8}.px-list li{margin-bottom:9px}.px-industry-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.px-industry-nav a{padding:20px 12px;border:1px solid #34504b;font-weight:700;line-height:1.5}.px-industry-nav a:hover{border-color:#00d75a;color:#00d75a}.px-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.px-steps li{border-left:1px solid #c8d7cf;padding-left:22px}.px-steps li>span{font-weight:800;color:#138d43;font-size:30px}.px-steps h3{font-size:18px;margin:14px 0 10px}.px-steps p{font-size:15px;line-height:1.65;color:#596b62}.px-cta{background:#0a2422;color:#fff}.px-cta .px-label{color:#00d75a}.px-cta .px-lead{color:#ccdad5}.px-detail{border-top:1px solid #d5e1da;padding-top:30px;margin-top:40px}.px-detail img{aspect-ratio:3/2;object-fit:cover}.px-detail h3{font-size:23px;margin:18px 0 10px}.px-note{border-left:4px solid #00d75a;padding:22px;background:#f4f7f5;margin-top:30px;line-height:1.7}.px-contact{font-size:22px;font-weight:700;overflow-wrap:anywhere}.px-inline-link{color:#067a34;text-decoration:underline}.px-photo-group img{height:auto}.px-hero-placeholder{min-height:240px;display:flex;align-items:center;background:#0a2826;padding:40px;color:white;margin:25px 0}.px-hero-placeholder strong{font-size:32px;max-width:650px;line-height:1.25}
@media(max-width:1100px){.px-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.px-industry-nav{grid-template-columns:repeat(3,1fr)}.px-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.px-section{padding:45px 20px}.px-breadcrumb{padding:20px;flex-wrap:wrap}.px-grid,.px-two,.px-steps{grid-template-columns:1fr}.px-two{gap:28px}.px-industry-nav{grid-template-columns:repeat(2,1fr)}.px-card>img,.px-preservation{height:230px}.px-wide-photo{max-height:none}.px-button{max-width:100%;white-space:normal}.px-lead{font-size:16px}.px-contact{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.px-card{transition:none}}