*{box-sizing:border-box}
:root{
  --green:#004b2a;
  --deep:#002d20;
  --orange:#f47a00;
  --gold:#ffb923;
  --ink:#17231e;
  --muted:#53615a
}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--ink);font-size:18px; overflow-x: hidden; width: 100%;}
a{color:inherit;text-decoration:none}
.site-header .brand {
    min-width: auto;
}

/* ===== TOPBAR ===== */
.topbar{background:#00291e;color:#fff;font-size:14px}
.topbar-inner{max-width:1320px;margin:auto;min-height:42px;padding:5px 4%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.top-item{display:flex;align-items:center;gap:10px;line-height:1.45}
.top-icon{font-size:24px;color:#ffbd24}
.tagline{font-family:Georgia,serif;font-style:italic;color:#ffc343;font-weight:bold;text-align:center;line-height:1.05;transform:rotate(-5deg);font-size:16px}

/* ===== HEADER ===== */
.site-header{height:120px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;max-width:1440px;margin:auto;background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 9px #001e1710}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.brand-logo {
    height: 85px;      
    width: auto;
    display: block;
    margin-top: 5px;   
    margin-bottom: 5px;
}

/* ===== NAV ===== */
/* ===== NAV ===== */
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px);font-size:17px;font-weight:600}
.nav>a:not(.quote-link){padding:14px 0;white-space:nowrap}
.nav a.active{color:#075b32;border-bottom:3px solid #138b42}
.nav a span{font-size:16px}
.quote-link{background:var(--orange);color:#fff;padding:14px 22px;border-radius:7px;white-space:nowrap; font-size: 17px;}
.menu-toggle{display:none;border:0;background:var(--green);color:#fff;border-radius:5px;padding:10px 15px;font-size:26px; cursor:pointer;}
/* ===== HERO ===== */
.hero{min-height:390px;background:#15352d url('hero.jfif') center 48%/cover no-repeat;position:relative;color:#fff;display:flex;align-items:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,27,.96) 0%,rgba(0,38,29,.85) 34%,rgba(0,35,28,.2) 66%,rgba(0,0,0,.05) 100%)}
.hero-content{position:relative;width:min(1320px,100%);margin:auto;padding:34px 5% 40px}
.eyebrow{font-size:15px;font-weight:700;letter-spacing:.3px;margin:0 0 12px;color:#fff;display:flex;align-items:center;gap:9px}
.eyebrow i{width:22px;height:3px;background:#17a44b;display:inline-block}
.eyebrow.green{color:#087338}
.hero h1{font-size:clamp(32px,4.5vw,60px);line-height:1.06;letter-spacing:-1.5px;margin:0 0 15px;font-weight:800}
.hero h1 em,.section-intro h2 em,.chemical-copy h2 em{font-style:normal;color:#ffb62b}
.hero-copy{max-width:500px;line-height:1.65;font-size:18px;margin:0 0 18px}
.hero-actions{display:flex;gap:12px}

/* ===== BUTTONS ===== */
.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 21px;border-radius:6px;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:transform .2s,filter .2s}
.btn:hover,.quote-link:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-orange{background:var(--orange);color:white}
.btn-outline{border:1px solid #fff;color:#fff;background:transparent;padding-inline:25px}
.btn-green{background:#07612e;color:#fff;margin-top:16px}
.btn-green-light{background:#08743b;color:#fff;border:1px solid #43bd68;padding:11px 18px}

/* ===== SECTIONS ===== */
.section{max-width:1320px;margin:auto;padding:25px 4%}
.services{display:grid;grid-template-columns:27% 1fr;gap:28px;align-items:start}
.section-intro{padding:10px 0}
.section-intro h2{font-size:clamp(30px,3.1vw,42px);line-height:1.1;margin:0 0 12px;letter-spacing:-1.2px}
.section-intro h2 em{color:#e76f12}
.section-intro>p:not(.eyebrow){line-height:1.65;max-width:300px;font-size:17px;margin:0}

/* ===== SERVICE GRID ===== */
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.service-card{border:1px solid #dfe5e1;border-radius:6px;overflow:hidden;min-width:0;background:#fff;box-shadow:0 2px 4px #001d1208}
.service-card img{display:block;width:100%;height:85px;object-fit:cover}
.service-label{min-height:65px;padding:8px;display:flex;align-items:center;gap:8px}
.service-label span{display:grid;place-items:center;flex:0 0 30px;height:30px;background:#00472a;color:#fff;border-radius:50%;font-weight:800;font-size:15px}
.service-label b{font-size:15px;line-height:1.35;font-weight:700}

/* ===== DOWNSTREAM ===== */
.downstream{position:relative;color:#fff;min-height:270px;background:#003322;overflow:hidden}
.downstream-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,39,27,.97),rgba(0,43,28,.86) 48%,rgba(0,33,24,.4)),url('ds.jfif') center 58%/cover}
.downstream-content{position:relative;max-width:1320px;margin:auto;padding:30px 5%;display:grid;grid-template-columns:2fr repeat(3,1fr) 1.4fr;gap:20px;align-items:start}
.downstream-intro h2{font-size:clamp(26px,3vw,38px);line-height:1.03;margin:0 0 10px;letter-spacing:-.7px}
.downstream-intro>p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:320px}
.downstream-feature{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:5px}
.round-icon{width:64px;height:64px;border:1.5px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:27px}
.downstream-feature b{font-size:15px;line-height:1.45}
.feature-copy p{font-size:15px;line-height:1.5;text-align:left;margin:0}
.feature-copy .round-icon{margin-bottom:0}

/* ===== CHEMICALS ===== */
.chemicals{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:25px;align-items:center;padding-top:25px;padding-bottom:25px}
.chemical-image img,.chemical-side img{width:100%;height:150px;object-fit:cover;border-radius:5px;display:block}
.chemical-side{position:relative}
.chemical-side:after{white-space:pre;position:absolute;right:10px;bottom:10px;color:#fff;font-family:Georgia,serif;font-style:italic;font-weight:bold;text-align:right;text-shadow:0 2px 4px #000;font-size:16px}
.chemical-copy h2{font-size:clamp(25px,3vw,36px);line-height:1.1;margin:0 0 9px;letter-spacing:-1px}
.chemical-copy h2 em{color:#e87316}
.chemical-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;margin:0 0 10px}
.chemical-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1.4fr;gap:9px;font-size:15px}
.chemical-list li:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;background:#08763b;color:#fff;border-radius:50%;font-weight:bold;margin-right:7px}

/* ===== VALUES ===== */
.values{display:grid;grid-template-columns:1.65fr repeat(4,.8fr) 1.25fr;background:#002d20;color:#fff;min-height:145px;align-items:stretch;overflow:hidden}
.about-copy{padding:20px 7%;background:linear-gradient(120deg,#003a27,#001e17)}
.about-copy h3{font-size:20px;margin:0 0 7px}
.about-copy p{font-size:15px;line-height:1.5;margin:0 0 10px}
.about-copy .btn{padding:8px 13px;font-size:14px}
.value-item{padding:18px 7px;border-right:1px solid #285344;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}
.value-item span{color:#ffb51f;font-size:32px}
.value-item b{font-size:15px}
.value-item small{font-size:13px;color:#d5e3dc}
.values-image{position:relative;min-height:145px}
.values-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.values-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.values-image b{position:absolute;z-index:1;bottom:16px;right:12px;text-align:right;color:#ffc03c;font-family:Georgia,serif;font-style:italic;font-size:18px}

/* ===== FOOTER ===== */
footer{background:#001d16;color:#fff;padding:0 4%;font-size:15px}
.footer-main{max-width:1320px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr 1.2fr .7fr;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #416052}
.footer-brand{min-width:0}

.footer-logo {
    height: 95px;      
    width: auto;
    display: block;
    dbackground: #fff; /* Fixed typo here */
    padding: 8px 12px;
    border-radius: 6px;
}
.footer-contact{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.footer-contact>span{font-size:24px;color:#ffb82c}
.footer-contact p{margin:0}
.social b{display:block;margin-bottom:9px;font-size:16px}
.social div{display:flex;gap:8px}
.social a{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#003d29;font-size:15px;font-weight:800}
.footer-bottom{max-width:1320px;margin:auto;display:flex;justify-content:space-between;gap:20px;padding:12px 0;color:#d4ded9;font-size:14px}
.footer-bottom div{display:flex;gap:17px}
.footer-bottom a+a{border-left:1px solid #82968d;padding-left:17px}

/* ===== DIALOG ===== */
dialog{width:min(520px,calc(100% - 30px));border:0;border-radius:12px;padding:28px;box-shadow:0 18px 80px #001b15aa}
dialog::backdrop{background:#001d16b8}
dialog h2{margin:0 0 8px;color:var(--green); font-size: 24px;}
dialog>p{font-size:16px;line-height:1.6;color:var(--muted)}
.dialog-close{display:flex;justify-content:flex-end;margin:-15px -12px 0}
.dialog-close button{border:0;background:transparent;font-size:32px;cursor:pointer}
dialog label{display:block;font-size:15px;font-weight:700;margin:12px 0}
dialog input,dialog select,dialog textarea{width:100%;padding:11px;border:1px solid #ccd8d1;border-radius:5px;margin-top:6px;font:inherit;font-size:16px}
dialog textarea{resize:vertical}
.form-note{font-size:15px;color:var(--green)}

/* ===== RESPONSIVE ===== */
@media(max-width:1050px){
  .brand{min-width:190px}
  .nav{gap:10px;font-size:14px}
  .quote-link{padding:10px; font-size: 14px;}
  .services{grid-template-columns:1fr;gap:18px}
  .section-intro>p:not(.eyebrow){max-width:550px}
  .section-intro .btn{margin-top:10px}
  .service-card img{height:110px}
  .downstream-content{grid-template-columns:1.5fr repeat(2,1fr)}
  .feature-copy{display:none}
  .values{grid-template-columns:1.4fr repeat(2,.8fr)}
  .values-image{display:none}
  .value-item:nth-of-type(n+4){display:none}
}

@media(max-width:760px){
  .topbar-inner{padding:8px 4%;flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}
  .top-item{font-size:12px}
  .top-item:nth-child(3){display:none}
  .tagline{margin-left:auto;font-size:15px}
  .site-header{height:75px;padding:0 3%}
  .brand{min-width:0}
  .brand-logo { height: 60px; width: auto; max-width: 65vw; }
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:75px;background:#fff;box-shadow:0 8px 15px #001d1220;padding:14px 5% 20px;align-items:stretch;flex-direction:column;gap:3px}
  .nav.open{display:flex}
  .nav>a:not(.quote-link){padding:11px 0;font-size:16px}
  .nav a.active{border-bottom:0}
  .quote-link{text-align:center;margin-top:7px;font-size:16px}
  .hero{min-height:440px;background-position:58% center}
  .hero-overlay{background:linear-gradient(90deg,rgba(0,36,27,.94),rgba(0,38,29,.72) 70%,rgba(0,35,28,.4))}
  .hero-content{padding:38px 6%}
  .hero h1{font-size:clamp(31px,8vw,45px)}
  .hero-copy{max-width:390px;font-size:16px}
  .section{padding:25px 5%}
  .services{gap:14px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .service-card img{height:110px}
  .service-label{min-height:65px}
  .service-label b{font-size:15px}
  .downstream-content{padding:27px 5%;grid-template-columns:repeat(3,1fr);gap:16px 10px}
  .downstream-intro{grid-column:1/-1}
  .downstream-intro h2 br{display:none}
  .downstream-intro>p:not(.eyebrow){max-width:480px;font-size:16px}
  .downstream-feature{padding-top:8px}
  .round-icon{width:52px;height:52px;font-size:23px}
  .downstream-feature b{font-size:14px}
  .chemicals{grid-template-columns:1fr 1fr;gap:15px}
  .chemical-copy{grid-column:1/-1;grid-row:1}
  .chemical-image img,.chemical-side img{height:125px}
  .chemical-list{font-size:15px}
  .chemical-copy>p:not(.eyebrow){font-size:16px}
  .values{grid-template-columns:1fr 1fr}
  .about-copy{grid-column:1/-1;padding:20px 5%}
  .value-item{min-height:115px}
  .value-item:nth-of-type(n+4){display:flex}
  .value-item b{font-size:15px}
  .value-item small{font-size:13px}
  .footer-main{grid-template-columns:1fr 1fr;gap:20px;padding:20px 0}
  .footer-brand{grid-column:1/-1}
  .footer-logo{height:75px}
  .footer-bottom{flex-direction:column;gap:10px;font-size:14px}
  .footer-bottom div{gap:10px;flex-wrap:wrap}
  .footer-bottom a+a{padding-left:10px}
  .footer-contact{font-size:15px}
}

@media(max-width:400px){
  .site-header {
        height: 65px; 
    }
  .nav {
        top: 65px;
    }
  .top-item:nth-child(2){display:none}
  .tagline{font-size:14px}
  .hero-actions{flex-wrap:wrap}
  .btn{padding:12px 15px;font-size:15px}
  .service-card img{height:90px}
  .service-label{gap:6px;padding:6px;min-height:60px}
  .service-label span{flex-basis:26px;height:26px;font-size:14px}
  .service-label b{font-size:14px}
  .chemical-list{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .brand-logo { height: 50px; } 
  .footer-logo { height: 60px; }
}

/* ===== PARTNER LOGOS MARQUEE ===== */
.partners-strip {
    background: #fff;
    padding: 30px 0;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;
}

.partners-title {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #53615a;
    margin-bottom: 25px;
    font-weight: 700;
}

.marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: flex-start; 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scroll-left 20s linear infinite; 
}

.marquee:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 60px;
    padding-right: 60px; 
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px; 
    width: 160px; 
}

.partner-item img {
    height: 60px; 
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.partner-item span {
    font-size: 15px;
    font-weight: 700;
    color: #17231e; 
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.partner-item:hover img {
    transform: scale(1.1);
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 760px) {
    .marquee-group {
        gap: 40px;
        padding-right: 40px;
    }
    .marquee-content {
        animation-duration: 15s;
    }
    .partner-item img {
        height: 50px;
    }
    .partner-item span {
        font-size: 13px;
    }
}
/* ==================== SCROLL REVEAL ANIMATIONS ==================== */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: transform, opacity;
}

/* Different animation types */
.reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-zoom { transform: scale(0.9); }

/* The class added by JS when the element is visible */
.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Stagger delays (so cards pop in one by one, not all at once) */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}