:root{--navy:#061b43;--blue:#1462dd;--teal:#24b7b4;--aqua:#c7f2ed;--ink:#11213f;--muted:#60708a;--line:#dce3ec;--warm:#f6f8fb;--display:"DM Sans","Noto Sans Thai",sans-serif;--thai:"Noto Sans Thai",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.7 var(--thai)}
.container{width:min(1140px,calc(100% - 48px));margin:auto}
.skip-link{position:fixed;z-index:30;top:-60px;left:16px;padding:8px 14px;color:#fff;background:#000}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.site-header{position:absolute;z-index:10;width:100%;border-bottom:1px solid #ffffff26}
.nav-wrap{height:86px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;gap:7px;align-items:center;color:#fff;text-decoration:none;line-height:1}
.brand-name{font:700 26px var(--display);letter-spacing:1.7px}
.brand-name i{color:var(--teal);font-style:normal}
.brand-sub{font:700 7px var(--display);letter-spacing:1.5px}
.brand-rule{width:20px;height:1px;background:var(--teal)}
.primary-nav{display:flex;gap:28px;align-items:center}
.primary-nav>a:not(.button){color:#e8eef9;font-size:14px;text-decoration:none}
.primary-nav>a:not(.button):hover{color:var(--teal)}
.button{display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:15px 20px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-weight:700;font-size:14px;line-height:1.2;text-decoration:none;transition:.2s}
.button:hover{transform:translateY(-2px);background:#0d52c2}
.button-small{padding:12px 16px}
.button-teal{border-color:var(--teal);background:var(--teal);color:var(--navy)}
.button-outline{border-color:#ffffff8c;background:transparent}
.nav-toggle{display:none;border:0;background:none;padding:8px}
.nav-toggle span:not(.sr-only){display:block;width:24px;height:2px;margin:5px;background:#fff}

.hero{position:relative;isolation:isolate;overflow:hidden;min-height:740px;padding:178px 0 80px;color:#fff;background:linear-gradient(117deg,#031331,#08265d 61%,#1055ac)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}
.eyebrow{display:flex;gap:10px;align-items:center;margin:0 0 16px;color:var(--blue);font:700 11px var(--display);letter-spacing:1.6px}
.eyebrow span{width:28px;height:2px;background:currentColor}
.eyebrow.light{color:var(--teal)}
h1,h2,h3{margin-top:0;font-family:var(--thai);line-height:1.22;letter-spacing:-.7px}
h1{margin-bottom:24px;font-size:clamp(43px,5.2vw,70px)}
h1 span{color:var(--teal)}
h2{margin-bottom:0;font-size:clamp(31px,3.5vw,48px)}
p{margin-top:0}
.hero-description{max-width:560px;margin-bottom:30px;color:#d7e2f6;font-size:18px}
.hero-mrl{display:grid;grid-template-columns:auto 1fr;max-width:560px;margin:-8px 0 26px;padding:15px 18px;border:1px solid #5ce0d780;border-left:4px solid var(--teal);background:#ffffff0d}
.hero-mrl>span{align-self:center;color:#8ceee7;font:700 11px var(--display);letter-spacing:1.2px}
.hero-mrl>strong{justify-self:end;color:#fff;font:700 24px var(--display)}
.hero-mrl>p{grid-column:1/-1;margin:5px 0 3px;color:#bfcfea;font-size:11px;line-height:1.55}
.hero-dbp{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px;margin:8px 0 6px;padding:8px 10px;border-left:2px solid var(--teal);background:#061d47b8;color:#c9d8ef;font-size:10px;line-height:1.5}
.hero-dbp b{color:#8ceee7;font:700 11px var(--display);letter-spacing:.7px;white-space:nowrap}
.hero-mrl>a{grid-column:1/-1;width:max-content;color:#fff;font-size:11px;font-weight:700;text-decoration-color:#5ce0d7;text-underline-offset:3px}
.hero-mrl>a b{color:var(--teal)}
.hero-actions,.contact-actions{display:flex;gap:18px;align-items:center}
.text-link{display:inline-flex;gap:10px;align-items:center;color:var(--blue);font-size:14px;font-weight:700;text-decoration:none}
.text-link.light{color:#fff}
.hero-trust{display:flex;margin-top:62px}
.hero-trust>div{min-width:130px;padding:0 22px;border-left:1px solid #ffffff42}
.hero-trust>div:first-child{padding-left:0;border:0}
.hero-trust strong,.hero-trust small{display:block}
.hero-trust strong{font:700 14px var(--display)}
.hero-trust small{margin-top:5px;color:#aebed9;font-size:11px;line-height:1.4}
.hero-visual{position:relative;height:450px}
.chemical-vessel{position:absolute;z-index:2;top:45px;right:80px;width:220px;height:310px;overflow:hidden;border:2px solid #c7f2ede6;border-top:0;border-radius:15px 15px 53px 53px;background:linear-gradient(180deg,#c7f2ed0f,#24b7b452);box-shadow:0 24px 70px #0000003d,inset 0 -35px 45px #17ccc838}
.chemical-vessel:before{content:"";position:absolute;right:0;bottom:58px;left:0;height:2px;background:#c7f2edb8;box-shadow:0 13px 0 #c7f2ed40}
.vessel-cap{position:absolute;top:-12px;left:50%;width:102px;height:20px;border:2px solid var(--aqua);border-bottom:0;transform:translateX(-50%)}
.vessel-glow{position:absolute;bottom:-60px;left:12px;width:190px;height:190px;border-radius:50%;background:#28d9d255;filter:blur(20px)}
.formula{position:absolute;top:89px;width:100%;text-align:center;font:700 21px/1.2 var(--display);letter-spacing:1.4px}
.no-chlorate{position:absolute;top:153px;left:50%;padding:5px 8px;border:1px solid var(--teal);color:#d9fffb;font:700 9px var(--display);letter-spacing:1.2px;white-space:nowrap;transform:translateX(-50%)}
.vessel-word{position:absolute;bottom:20px;width:100%;color:#d9fffb;text-align:center;font:700 10px var(--display);letter-spacing:2px}
.visual-label{position:absolute;z-index:3;color:#c8d7ee;font:10px/1.55 var(--display);letter-spacing:1.4px}
.visual-label b{color:var(--teal);font-size:17px}
.top-label{top:4px;right:5px}
.bottom-label{bottom:20px;left:16px}
.visual-ring{position:absolute;border:1px solid #c7f2ed47;border-radius:50%}
.ring-one{top:15px;left:0;width:415px;height:415px}
.ring-two{top:57px;left:42px;width:330px;height:330px;border-style:dashed}
.orb-one,.orb-two{position:absolute;border-radius:50%;opacity:.4}
.orb-one{top:10px;right:-170px;width:500px;height:500px;background:radial-gradient(circle,#1e90ff99,transparent 68%)}
.orb-two{bottom:-250px;left:-170px;width:350px;height:350px;background:radial-gradient(circle,#24b7b466,transparent 67%)}
.molecule{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:42px -29px 0 -2px #a7e9ee,70px 18px 0 -1px #69bfe0}
.molecule-one{top:185px;right:8%}
.molecule-two{bottom:80px;left:6%;transform:scale(.7)}

.section{padding:115px 0}
.split-intro{display:flex;gap:50px;align-items:flex-end;justify-content:space-between;margin-bottom:52px}
.split-intro>p{max-width:360px;margin-bottom:5px;color:var(--muted)}
.why-card p,.process-list p{margin:0;color:var(--muted);font-size:14px}
.chlorate-section,.company-section{background:var(--warm)}
.chlorate-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.chlorate-copy h2 em{color:var(--blue);font-family:var(--display);font-style:normal}
.chlorate-copy .lead{margin:25px 0 15px;font-size:20px;font-weight:600}
.chlorate-copy>p:not(.eyebrow),.company-copy>p:not(.eyebrow){color:var(--muted)}
.comparison-card{color:#fff;background:var(--navy);box-shadow:16px 16px 0 var(--teal)}
.comparison-head,.comparison-row{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;padding:18px 24px}
.comparison-head{color:#b7cff1;background:#0d3169;font-size:11px;font-weight:700}
.comparison-row{align-items:center;border-top:1px solid #ffffff26;font-size:14px}
.issue{display:flex;gap:12px;align-items:center}
.issue b{color:var(--teal);font:700 11px var(--display)}
.answer{color:#cffffc;font-weight:600}
.comparison-note{margin:0;padding:16px 24px 20px;color:#a5b7d3;font-size:11px}
.why-section{padding-bottom:105px}
.center-intro .section-summary{max-width:820px;margin:22px auto 0;color:var(--muted);font-size:17px;line-height:1.75}
.center-intro{margin-bottom:50px;text-align:center}
.center-intro .eyebrow{justify-content:center}
.center-intro .why-title{margin-bottom:22px;color:var(--blue);font:700 clamp(24px,2.3vw,36px) var(--display);letter-spacing:2.5px;line-height:1}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-card{padding:30px 23px;border-top:2px solid var(--blue);background:var(--warm)}
.icon-box{display:grid;width:37px;height:37px;margin-bottom:35px;place-items:center;color:var(--blue);background:#d6eff8;font-weight:700}
.why-card h3{font-size:18px}
.why-card.service-card{overflow:hidden;padding:0}
.service-image{display:block;width:112px;height:84px;margin:28px 20px 0;object-fit:cover;border-radius:4px;background:#dfeaf2}
.service-card-copy{padding:22px 20px 28px}
.service-card-copy h3{margin:0 0 14px}
.service-scroll-hint{display:none}

.products-section{color:#fff;background:var(--navy)}
.products-section .split-intro>p{color:#bfcee5}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.product-grid-four{grid-template-columns:repeat(3,1fr)}
.feature-product{position:relative;display:flex;min-height:244px;gap:27px;align-items:center;overflow:hidden;padding:30px;background:#0d3169}
.feature-product:after{content:"";position:absolute;right:-32px;bottom:-77px;width:190px;height:190px;border:1px solid #ffffff1f;border-radius:50%}
.feature-product.paa-family{grid-column:1/-1;min-height:300px;background:linear-gradient(110deg,#0d3169,#0b5f7b)}
.feature-product.basic{background:#12566c}
.feature-product.cleaning{background:#0b5f7b}
.feature-product.grout{background:#17477c}
.product-mark{position:relative;z-index:1;display:grid;flex:0 0 82px;width:82px;height:82px;place-items:center;border-radius:50%;color:var(--aqua);background:#ffffff1a;text-align:center;font:700 18px/1.15 var(--display)}
.product-icon{font-size:25px}
.feature-product p{margin:0 0 6px;color:#9fcaed;font:700 10px var(--display);letter-spacing:1.2px}
.feature-product h3{margin:0 0 13px;font-size:24px}
.pack{display:block;max-width:390px;color:#cae1f6;font:11px/1.65 var(--display)}
.grade-list{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px 22px;margin:18px 50px 0 0;padding:0;list-style:none;color:#d9f8f5;font:600 11px/1.5 var(--display)}
.grade-list li:before{content:"✓";margin-right:7px;color:var(--teal)}
.feature-product>a{position:absolute;z-index:2;top:24px;right:24px;display:grid;width:31px;height:31px;place-items:center;border:1px solid #ffffff8c;color:#fff;text-decoration:none}
.industries-section{padding:0;color:#fff;background:linear-gradient(110deg,#092958,#0c6791)}
.industries-grid{display:grid;grid-template-columns:.8fr 1.2fr;min-height:397px;align-items:center}
.industries-copy{padding-right:80px}
.industries-copy>p:not(.eyebrow){margin:18px 0 0;color:#c5dcf4}
.industry-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.industry-list span{padding:20px 18px;border:1px solid #ffffff33;color:#e4f9fa;font-size:14px;font-weight:600}
.process-list{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0;padding:0;list-style:none}
.process-list li{position:relative}
.process-list li:not(:last-child):after{content:"";position:absolute;top:19px;right:-16px;width:7px;height:7px;border-top:1px solid var(--blue);border-right:1px solid var(--blue);transform:rotate(45deg)}
.process-list b{color:var(--teal);font:700 13px var(--display)}
.process-list h3{margin:15px 0 10px;font-size:19px}

.company-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:100px;align-items:center}
.company-seal{display:grid;min-height:340px;place-items:center;background:transparent}
.company-seal img{display:block;width:min(100%,430px);height:auto}
.company-copy .company-lead{margin:22px 0 12px;font-size:16px;line-height:1.75}
.company-copy>p:not(.eyebrow):not(.company-mission){line-height:1.75}
.company-mission{display:grid;gap:4px;margin:20px 0 24px;padding:15px 18px;border-left:3px solid var(--teal);background:#fff;color:var(--muted);line-height:1.65}
.company-mission strong{color:var(--navy);font-size:14px}
.faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:110px}
.faq-grid>div>p:not(.eyebrow){margin:20px 0;color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;gap:10px;padding:19px 0;cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
.faq-list summary .faq-question{color:inherit;font:inherit;letter-spacing:inherit;transform:none!important}
.faq-list summary .faq-toggle{color:var(--blue);font:20px var(--display);transform:none}
.faq-list details[open] summary .faq-toggle{transform:rotate(45deg)}
.faq-list p{margin:0;padding:0 28px 19px 0;color:var(--muted);font-size:14px}
.faq-list p a{color:#0d6e8d;font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px}
.faq-list p a:hover{color:var(--blue)}
.contact-section{position:relative;isolation:isolate;overflow:hidden;padding:104px 0;color:#fff;background:var(--navy);text-align:center}
.contact-content{position:relative;z-index:1;max-width:720px}
.contact-content .eyebrow{justify-content:center}
.contact-content h2{font-size:clamp(35px,4vw,55px)}
.contact-content>p:not(.eyebrow){max-width:580px;margin:22px auto 30px;color:#c2d3ed}
.contact-actions{justify-content:center}
.contact-channels{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:8px}
.line-qr{display:grid;gap:6px;justify-items:center;color:#cfe0f4;font-size:10px;font-weight:700;text-decoration:none}
.line-qr img{display:block;width:116px;height:116px;padding:7px;border-radius:5px;background:#fff}
.contact-note{display:block;margin-top:20px;color:#9cb0cc;font-size:11px}
.contact-note a{color:#8ceee7;font-weight:700;text-decoration:none}
.contact-orb{position:absolute;z-index:-1;top:-330px;left:calc(50% - 275px);width:550px;height:550px;border-radius:50%;background:radial-gradient(circle,#1b75dc99,transparent 70%)}
.site-footer{color:#cad7e9;background:#04132d}
.footer-top{display:grid;grid-template-columns:1fr 1.2fr auto;gap:40px;align-items:center;padding:42px 0}
.footer-top p{margin:0;color:#aebed3;font-size:12px}
.footer-top .footer-phone{margin-top:5px;color:#c7d7eb}
.footer-phone a{color:var(--teal);font-weight:700;text-decoration:none}
.footer-phone a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-brand{width:max-content}
.footer-link{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;padding:16px 0;border-top:1px solid #ffffff1f;color:#8194b0;font:10px var(--display)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:850px){.nav-wrap{height:74px}
.nav-toggle{display:block;z-index:12}
.primary-nav{position:absolute;top:0;right:0;left:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:90px 24px 26px;background:var(--navy)}
.primary-nav.open{display:flex}
.primary-nav>a:not(.button){padding:13px 0}
.primary-nav .button{margin-top:12px}
.hero{min-height:auto;padding:146px 0 58px}
.hero-grid,.chlorate-grid,.company-grid,.faq-grid{grid-template-columns:1fr;gap:50px}
.hero-visual{width:100%;max-width:470px;height:360px;margin:auto}
.chemical-vessel{right:calc(50% - 110px);transform:scale(.85);transform-origin:top center}
.ring-one{left:calc(50% - 207px);transform:scale(.83);transform-origin:top center}
.ring-two{left:calc(50% - 165px);transform:scale(.83);transform-origin:top center}
.why-grid{grid-template-columns:repeat(2,1fr)}
.product-grid-four{grid-template-columns:repeat(2,1fr)}
.product-grid-four .feature-product.grout{grid-column:1/-1}
.industries-grid{grid-template-columns:1fr;gap:30px;padding:70px 0}
.industries-copy{padding:0}
.process-list{grid-template-columns:repeat(2,1fr);row-gap:35px}
.process-list li:nth-child(2):after{display:none}
.company-seal{min-height:270px}
}
@media(max-width:600px){.container{width:min(100% - 36px,1140px)}
.section{padding:74px 0}
.hero{padding-top:128px}
.hero h1{font-size:42px}
.hero-description{font-size:16px}
.hero-actions,.contact-actions{align-items:stretch;flex-direction:column}
.hero-actions .button,.contact-actions .button{width:100%}
.contact-channels{flex-direction:column}
.service-scroll-hint{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;color:var(--muted);font-size:12px;font-weight:700}
.service-scroll-hint span{color:var(--blue);font-size:18px}
.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}
.hero-trust>div{min-width:0;padding:0 0 0 13px}
.hero-trust>div:last-child{padding-left:13px;border-left:1px solid #ffffff42}
.hero-visual{height:300px}
.chemical-vessel{top:25px;transform:scale(.68)}
.ring-one{top:15px;transform:scale(.68)}
.ring-two{top:44px;transform:scale(.68)}
.visual-label{font-size:8px}
.top-label{top:0}
.bottom-label{bottom:10px}
.split-intro{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:34px}
.split-intro>p{margin:0}
.why-grid,.product-grid{grid-template-columns:1fr}
.product-grid-four .feature-product.grout{grid-column:auto}
.comparison-card{box-shadow:9px 9px 0 var(--teal)}
.comparison-head,.comparison-row{grid-template-columns:1fr;gap:7px;padding:15px 17px}
.feature-product{min-height:215px;gap:15px;padding:24px 18px}
.product-mark{flex-basis:65px;width:65px;height:65px;font-size:15px}
.feature-product h3{font-size:20px}
.product-icon{font-size:21px}
.feature-product.paa-family{min-height:280px;align-items:flex-start;flex-direction:column}
.feature-product.paa-family>div{width:100%}
.grade-list{grid-template-columns:repeat(2,minmax(100px,1fr));margin-right:0}
.industry-list{grid-template-columns:1fr}
.process-list{grid-template-columns:1fr;gap:28px}
.process-list li:not(:last-child):after{top:auto;right:auto;bottom:-18px;left:3px;transform:rotate(135deg)}
.company-seal{min-height:240px}
.footer-top{grid-template-columns:1fr;gap:24px}
.footer-bottom{flex-direction:column;gap:10px}
.footer-bottom small:last-child{display:none}
}


.primary-nav{position:relative}
.primary-nav::after{content:"✉  contrachemical@gmail.com\A☎  081-392-3523  ·  092-259-8884";position:absolute;top:50%;left:calc(100% + 24px);padding:8px 12px;border:1px solid #ffffff30;border-left:3px solid var(--teal);border-radius:3px;background:#08275a;color:#fff;font:600 11px/1.55 var(--display);letter-spacing:.1px;white-space:pre;transform:translateY(-50%)}
@media(min-width:1351px){.nav-wrap{padding-right:182px}
.primary-nav{margin-left:auto}
}
@media(max-width:1350px){.primary-nav::after{display:none}
}
@media(max-width:850px){.primary-nav::after{display:none}
}
@media(max-width:850px){.primary-nav{position:absolute}}