/* BR Petrochem — shared blue industrial theme.
   Presentation only: existing business copy, product names and specifications are preserved. */
:root{
  --br-blue:#0868e8;
  --br-blue-2:#1688ff;
  --br-navy:#07315e;
  --br-deep:#051f3c;
  --br-ink:#102b46;
  --br-muted:#5f748a;
  --br-sky:#eef7ff;
  --br-line:#dbe9f7;
  --br-white:#fff;
  --br-shadow:0 18px 48px rgba(4,55,111,.11);
  --br-shadow-soft:0 10px 30px rgba(4,55,111,.075);
  --br-radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 52%,#fff 100%);
  color:var(--br-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 12% 10%,rgba(22,136,255,.07),transparent 25%),radial-gradient(circle at 92% 30%,rgba(8,104,232,.05),transparent 28%);
}
img{max-width:100%;height:auto}
a{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}

/* Header */
nav,#navbar{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(219,233,247,.98)!important;
  box-shadow:0 7px 28px rgba(4,55,111,.07)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  padding:11px clamp(18px,5vw,74px)!important;
}
.nav-logo{min-width:0}
.nav-logo img,.brp-logo-img{height:48px!important;width:auto!important;object-fit:contain}
.nav-logo .logo-main{color:var(--br-navy)!important;font-weight:850!important;letter-spacing:.1px}
.nav-logo .logo-sub{color:#516a82!important}
.nav-links{gap:28px!important}
.nav-links a{color:#133858!important;font-weight:700!important;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:99px;background:var(--br-blue);transform:scaleX(0);transition:transform .22s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta,.btn-primary{
  background:linear-gradient(135deg,var(--br-blue),var(--br-blue-2))!important;
  color:#fff!important;border:0!important;border-radius:999px!important;
  box-shadow:0 10px 24px rgba(8,104,232,.22)!important;font-weight:800!important;
}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,104,232,.29)!important}
.btn-secondary{border-radius:999px!important}
.mobile-menu-toggle{color:var(--br-navy)!important}

/* Homepage hero */
.hero{
  min-height:600px!important;
  padding:145px clamp(20px,7vw,110px) 78px!important;
  background:var(--br-deep)!important;color:#fff!important;isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(3,31,61,.95) 0%,rgba(3,31,61,.86) 38%,rgba(3,31,61,.40) 67%,rgba(3,31,61,.13) 100%);
}
.hero-deco{
  display:block!important;width:100%!important;height:100%!important;opacity:1!important;clip-path:none!important;
  background-image:url('../images/home-hero-warehouse.webp')!important;background-size:cover!important;background-position:center!important;
}
.hero-deco-inner{display:none!important}
.hero-content{position:relative;z-index:2;max-width:720px!important}
.hero-eyebrow span,.hero-eyebrow{color:#9bd9ff!important;letter-spacing:3px!important;font-weight:850!important}
.hero h1,.hero .hero-title{
  color:#fff!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:clamp(44px,5.6vw,72px)!important;line-height:1.02!important;font-weight:900!important;letter-spacing:-2.4px!important;
  text-shadow:0 3px 26px rgba(0,0,0,.20);
}
.hero h1 em,.hero h1 span,.hero-title em,.hero-title span{color:#58bbff!important;font-style:normal!important}
.hero p{color:rgba(255,255,255,.9)!important;max-width:650px!important;font-size:17px!important;line-height:1.72!important}
.hero-actions{gap:12px!important}
.hero-actions .btn-secondary{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.72)!important}

/* Generic section typography */
main section{position:relative}
.eyebrow,.p-eyebrow,.post-eyebrow{color:var(--br-blue)!important;letter-spacing:2.3px!important;font-weight:850!important;text-transform:uppercase}
.sec-title,h1,h2,h3{color:var(--br-ink)}
.sec-title,.p-hero h1,.blog-hero h1{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-weight:850!important;letter-spacing:-.7px}
.sec-title em{color:var(--br-blue)!important;font-style:normal!important}
.sec-sub{color:var(--br-muted)!important}

/* About section */
.about-grid{gap:42px!important;align-items:center!important}
.about-visual{
  overflow:hidden!important;border-radius:22px!important;border:1px solid var(--br-line)!important;
  box-shadow:var(--br-shadow)!important;background:#fff!important;margin:0!important;
}
.about-visual img{display:block;width:100%!important;height:410px!important;object-fit:cover!important}
.about-pillars{gap:14px!important}
.about-pillars .pillar,.why-card,.info-card{
  background:#fff!important;border:1px solid var(--br-line)!important;border-radius:15px!important;
  box-shadow:var(--br-shadow-soft)!important;
}
.pillar-icon{background:var(--br-sky)!important;color:var(--br-blue)!important}

/* Home product cards */
.prod-grid{gap:20px!important}
.prod-cat{
  overflow:hidden!important;background:#fff!important;border:1px solid var(--br-line)!important;border-radius:18px!important;
  box-shadow:var(--br-shadow-soft)!important;padding:0 22px 22px!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.prod-cat:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(4,55,111,.13)!important;border-color:#b7d8fb!important}
.prod-cat::before{display:none!important}
.prod-cat-image{display:block!important;position:static!important;width:calc(100% + 44px)!important;max-width:none!important;height:165px!important;object-fit:cover!important;margin:0 -22px 18px!important;opacity:1!important}
.prod-cat .cat-icon{margin-top:-50px!important;position:relative;z-index:2;width:58px!important;height:58px!important;border:4px solid #fff!important;border-radius:15px!important;background:#eaf5ff!important;color:var(--br-blue)!important;box-shadow:0 8px 22px rgba(4,55,111,.13)!important}
.prod-cat h3{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;color:var(--br-navy)!important;font-size:21px!important;font-weight:850!important}
.prod-cat .cat-desc{color:var(--br-muted)!important}
.prod-chips .chip{background:#f4f9ff!important;border-color:#d8eaf9!important;color:#17486f!important;border-radius:999px!important}
.prod-view-all{color:var(--br-blue)!important;font-weight:850!important}

/* Trust / commercial blocks */
.content-card{border:1px solid var(--br-line)!important;background:linear-gradient(135deg,#fff,#f2f8ff)!important;border-radius:18px!important;box-shadow:var(--br-shadow-soft)!important}
.why-grid{gap:18px!important}
.why-card{padding:28px!important}
.why-num{color:var(--br-blue)!important}

/* Inner-page hero — image is unique per page */
.p-hero,.blog-hero{
  max-width:calc(100% - 80px)!important;margin:22px auto 0!important;padding:0!important;
  display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;align-items:stretch!important;
  overflow:hidden!important;border:1px solid var(--br-line)!important;border-radius:24px!important;background:#fff!important;
  box-shadow:var(--br-shadow)!important;color:var(--br-ink)!important;
}
.p-hero-copy,.blog-hero-copy{padding:56px 54px!important;display:flex;flex-direction:column;justify-content:center;min-width:0}
.p-hero h1,.blog-hero h1{color:var(--br-navy)!important;font-size:clamp(38px,4.5vw,58px)!important;line-height:1.06!important;margin-bottom:18px!important}
.p-hero p,.blog-hero p{color:var(--br-muted)!important;position:relative!important;z-index:1!important;max-width:720px!important}
.p-hero .p-eyebrow,.blog-hero .eyebrow{color:var(--br-blue)!important}
.p-hero-visual,.blog-hero-visual{position:relative;min-height:430px;background:#dcecff;overflow:hidden}
.p-hero-visual::after,.blog-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 36%);pointer-events:none}
.p-hero-visual img,.blog-hero-visual img{display:block;width:100%!important;height:100%!important;min-height:430px;object-fit:cover!important}
.p-actions{gap:12px!important;display:flex!important;flex-wrap:wrap!important}
.p-actions .btn-secondary{background:#fff!important;color:var(--br-navy)!important;border:1px solid #a8c9e8!important}

/* Products overview cards */
.cat-card-grid{gap:20px!important}
.cat-card{
  overflow:hidden!important;background:#fff!important;border:1px solid var(--br-line)!important;border-radius:18px!important;
  box-shadow:var(--br-shadow-soft)!important;padding:0 22px 22px!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(4,55,111,.13)!important;border-color:#b7d8fb!important}
.cat-card::before{display:none!important}
.cat-card-image{display:block!important;position:static!important;width:calc(100% + 44px)!important;max-width:none!important;height:190px!important;object-fit:cover!important;margin:0 -22px 18px!important;opacity:1!important}
.cat-card .cat-icon{background:#eef7ff!important;color:var(--br-blue)!important;border:1px solid #cde5fb!important;border-radius:14px!important}
.cat-card h3{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;color:var(--br-navy)!important;font-weight:850!important}
.cat-count{color:var(--br-blue)!important;font-weight:850!important}

/* Category product lists: attractive cards without repeating the same photo on every product */
.card-grid{gap:18px!important}
.p-card{
  overflow:hidden!important;position:relative!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border:1px solid var(--br-line)!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(4,55,111,.065)!important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important;
}
.p-card::before{content:""!important;display:block!important;height:5px!important;margin:-1px -1px 18px!important;background:linear-gradient(90deg,var(--br-blue),#57baff)!important;opacity:1!important}
.p-card::after{content:"";position:absolute;right:-36px;top:-38px;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle,rgba(22,136,255,.12),rgba(22,136,255,0) 70%);pointer-events:none}
.p-card:hover{transform:translateY(-5px)!important;box-shadow:0 20px 44px rgba(4,55,111,.12)!important;border-color:#aed4fa!important}
.p-card h3{color:var(--br-navy)!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-weight:850!important}
.p-formula{color:var(--br-blue)!important}
.view-link{color:var(--br-blue)!important;font-weight:850!important}

/* Give each category a subtle accent */
body.category-solvents .p-card::before{background:linear-gradient(90deg,#0872ee,#23a8ff)!important}
body.category-powder .p-card::before{background:linear-gradient(90deg,#71869b,#bad0e4)!important}
body.category-flake .p-card::before{background:linear-gradient(90deg,#68a5dc,#c5e8ff)!important}
body.category-specialty .p-card::before{background:linear-gradient(90deg,#0b66e8,#7b5cf0)!important}

/* Blog landing */
.blog-grid{gap:22px!important}
.post-card{overflow:hidden!important;border:1px solid var(--br-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--br-shadow-soft)!important;transition:transform .25s ease,box-shadow .25s ease!important}
.post-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(4,55,111,.13)!important}
.post-thumb{min-height:190px!important;background-size:cover!important;background-position:center!important;position:relative!important}
.post-thumb::before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(4,31,62,.08),rgba(4,31,62,.64))!important;background-size:auto!important}
.post-thumb.thumb-alert{background-image:url('../images/blog-price-hike-clean.webp')!important}
.post-thumb.thumb-trend{background-image:url('../images/blog-toluene-price-clean.webp')!important}
.post-thumb.thumb-compare{background-image:url('../images/blog-toluene-vs-xylene-clean.webp')!important}
.post-thumb-icon{display:none!important}
.post-thumb::after{background:rgba(5,40,78,.72)!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;color:#fff!important;backdrop-filter:blur(6px)}
.post-title{color:var(--br-navy)!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-weight:850!important}
.post-readmore{color:var(--br-blue)!important;font-weight:850!important}

/* Blog articles */
body[class*="article-"] main{padding-top:18px}
body[class*="article-"] .breadcrumb{max-width:900px;margin-left:auto!important;margin-right:auto!important}
body[class*="article-"] article{
  max-width:900px!important;background:#fff!important;border:1px solid var(--br-line)!important;border-radius:22px!important;
  box-shadow:var(--br-shadow)!important;padding:46px 54px 70px!important;margin:22px auto 70px!important;
}
body[class*="article-"] article h1{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;color:var(--br-navy)!important;font-size:clamp(36px,4.5vw,54px)!important;line-height:1.08!important;letter-spacing:-1.1px!important}
body[class*="article-"] article h2{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;color:var(--br-navy)!important;font-weight:850!important}
.article-cover{margin:26px -54px 34px!important;overflow:hidden;background:#e7f2fc}
.article-cover img{display:block;width:100%!important;height:420px!important;object-fit:cover!important}
.post-meta{color:#6b7f93!important}

/* CTA / footer */
.p-cta,.blog-cta{border-radius:22px!important;background:linear-gradient(135deg,#062c59,#0b66e8)!important;color:#fff!important;box-shadow:var(--br-shadow)!important}
.p-cta h2,.p-cta p,.blog-cta h2,.blog-cta p{color:#fff!important}
footer{background:#061e3a!important;color:#d8eaff!important;border-top:4px solid var(--br-blue)!important}
footer a{color:#bfe2ff!important}

/* Remove captions/visual explanation UI from previous draft if cached */
.about-visual figcaption,.drum-feature{display:none!important}

/* Responsive */
@media(max-width:1080px){
  .p-hero,.blog-hero{grid-template-columns:1fr 42%!important;max-width:calc(100% - 44px)!important}
  .p-hero-copy,.blog-hero-copy{padding:44px 36px!important}
  .p-hero-visual,.blog-hero-visual,.p-hero-visual img,.blog-hero-visual img{min-height:390px}
}
@media(max-width:850px){
  .hero{min-height:610px!important;padding-top:130px!important}
  .hero::after{background:linear-gradient(90deg,rgba(3,31,61,.95),rgba(3,31,61,.78))}
  .hero-deco{opacity:.60!important;background-position:60% center!important}
  .p-hero,.blog-hero{grid-template-columns:1fr!important;max-width:calc(100% - 32px)!important}
  .p-hero-copy,.blog-hero-copy{padding:40px 30px!important}
  .p-hero-visual,.blog-hero-visual,.p-hero-visual img,.blog-hero-visual img{min-height:300px;height:300px!important}
  body[class*="article-"] article{margin:16px 16px 50px!important;padding:38px 28px 56px!important}
  .article-cover{margin:24px -28px 30px!important}
  .article-cover img{height:330px!important}
}
@media(max-width:700px){
  nav,#navbar{padding:9px 15px!important}
  .nav-logo img,.brp-logo-img{height:42px!important}
  .nav-logo .logo-sub{display:none!important}
  .hero{min-height:590px!important;padding:118px 20px 56px!important}
  .hero h1,.hero .hero-title{font-size:clamp(39px,11vw,56px)!important;letter-spacing:-1.5px!important}
  .hero p{font-size:15px!important}
  .prod-grid,.cat-card-grid,.card-grid,.blog-grid{grid-template-columns:1fr!important}
  .prod-cat-image,.cat-card-image{height:190px!important}
  .about-visual img{height:300px!important}
  .p-hero h1,.blog-hero h1{font-size:36px!important}
  .p-hero-copy,.blog-hero-copy{padding:34px 24px!important}
  body[class*="article-"] article h1{font-size:34px!important}
  .article-cover img{height:250px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ===== BR Petrochem readability + motion refinement ===== */
:root{--br-blue:#0a67d9;--br-blue-2:#2494f3;--br-navy:#07345f;--br-deep:#061f39;--br-ink:#17324d;--br-muted:#5d7185;--br-surface:#fff;--br-soft:#f4f9fd;--br-soft-2:#eaf4fc;--br-line:#d9e7f3;--br-green:#1e9a75}
body{background:radial-gradient(circle at 8% 4%,rgba(36,148,243,.08),transparent 24rem),linear-gradient(180deg,#fff 0%,#f8fbfe 46%,#fff 100%)!important;color:var(--br-ink)!important}
p,li{line-height:1.75}section{scroll-margin-top:90px}.sec-title,.p-hero h1,.blog-hero h1{color:var(--br-navy)!important;text-wrap:balance}.sec-sub,.p-hero p,.blog-hero p,.cat-desc,.post-card p{color:var(--br-muted)!important}nav,#navbar{box-shadow:0 8px 26px rgba(2,39,77,.07)!important}
.hero{min-height:540px!important;padding-top:132px!important;padding-bottom:68px!important}.hero::after{background:linear-gradient(90deg,rgba(3,26,51,.96) 0%,rgba(3,26,51,.86) 40%,rgba(3,26,51,.36) 72%,rgba(3,26,51,.12) 100%)!important}.hero-deco{animation:brHeroPan 18s ease-in-out infinite alternate;will-change:background-position}@keyframes brHeroPan{from{background-position:48% 50%!important}to{background-position:54% 50%!important}}.hero-content{max-width:680px!important}.hero h1,.hero .hero-title{font-size:clamp(42px,5vw,66px)!important}.hero p{font-size:16px!important}
.p-hero,.blog-hero{width:min(1180px,calc(100% - 40px))!important;max-width:1180px!important;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr)!important;border-radius:22px!important}.p-hero-copy,.blog-hero-copy{padding:46px 46px!important}.p-hero-visual,.blog-hero-visual{min-height:340px!important;max-height:390px!important}.p-hero-visual img,.blog-hero-visual img{min-height:340px!important;height:100%!important;max-height:390px!important;object-fit:cover!important;object-position:center!important}.p-hero h1,.blog-hero h1{font-size:clamp(34px,4vw,52px)!important}
.prod-cat-image{height:150px!important}.cat-card-image{height:170px!important}.post-card img,.blog-card img,.article-card img{width:100%!important;height:190px!important;object-fit:cover!important}.about-visual img{height:360px!important}
main section{border-top:1px solid rgba(217,231,243,.58)}main section:first-child{border-top:0}#products,.category-section,.product-section,.blog-listing{background:linear-gradient(180deg,#f8fbfe 0%,#fff 100%)!important}.content-card,.why-card,.info-card,.prod-cat,.cat-card,.p-card,.post-card,.blog-card{border-color:#d9e7f3!important;box-shadow:0 10px 32px rgba(2,50,95,.07)!important}.prod-cat:hover,.cat-card:hover,.p-card:hover,.post-card:hover,.blog-card:hover{transform:translateY(-5px)!important;box-shadow:0 18px 44px rgba(2,50,95,.12)!important}
.nav-cta,.btn-primary{position:relative;overflow:hidden}.nav-cta::before,.btn-primary::before{content:"";position:absolute;top:-120%;left:-40%;width:32%;height:340%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);animation:brButtonSweep 5.5s ease-in-out infinite}@keyframes brButtonSweep{0%,62%{left:-45%}82%,100%{left:125%}}.prod-cat .cat-icon,.cat-card .cat-icon,.pillar-icon{animation:brFloat 4.8s ease-in-out infinite}@keyframes brFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.prod-cat:nth-child(2) .cat-icon,.cat-card:nth-child(2) .cat-icon{animation-delay:.5s}.prod-cat:nth-child(3) .cat-icon,.cat-card:nth-child(3) .cat-icon{animation-delay:1s}.prod-cat:nth-child(4) .cat-icon,.cat-card:nth-child(4) .cat-icon{animation-delay:1.5s}
.br-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.br-reveal.br-in{opacity:1;transform:none}.br-reveal:nth-child(2){transition-delay:.06s}.br-reveal:nth-child(3){transition-delay:.12s}.br-reveal:nth-child(4){transition-delay:.18s}.br-scroll-progress{position:fixed;z-index:9999;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--br-blue),#58bbff,var(--br-green));box-shadow:0 0 14px rgba(36,148,243,.35);pointer-events:none}img{image-rendering:auto;backface-visibility:hidden}.p-hero-visual,.blog-hero-visual,.prod-cat,.cat-card,.about-visual{background:#eaf4fc!important}
@media(max-width:900px){.hero{min-height:500px!important;padding:116px 24px 58px!important}.hero::after{background:linear-gradient(90deg,rgba(3,26,51,.94),rgba(3,26,51,.72))!important}.p-hero,.blog-hero{width:min(94%,720px)!important;grid-template-columns:1fr!important}.p-hero-copy,.blog-hero-copy{padding:34px 28px!important}.p-hero-visual,.blog-hero-visual{min-height:250px!important;max-height:290px!important}.p-hero-visual img,.blog-hero-visual img{min-height:250px!important;max-height:290px!important}.about-visual img{height:290px!important}}
@media(max-width:560px){.hero{min-height:470px!important}.hero h1,.hero .hero-title{font-size:clamp(36px,11vw,48px)!important;letter-spacing:-1.4px!important}.prod-cat-image{height:138px!important}.cat-card-image{height:150px!important}.post-card img,.blog-card img,.article-card img{height:165px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.br-reveal{opacity:1!important;transform:none!important}}