/* ===================================================================
   SCAPEX v3 — appended 6 Sep 2026
   Mobile hardening, text alignment, and the new homepage / editorial
   components. Everything below is additive: it overrides the rules
   above it and adds new classes. Nothing above this line was edited,
   so the existing 36,000 pages keep rendering exactly as before
   except where a fix applies.
   =================================================================== */

/* -------------------------------------------------------------------
   1. LAYOUT GUTTERS
   28px of side padding is generous on a 360px handset. Step it down
   so body copy does not sit in a narrow column on small screens.
   ------------------------------------------------------------------- */
@media(max-width:640px){ .wrap{padding:0 20px} }
@media(max-width:400px){ .wrap{padding:0 16px} }

/* Nothing may push the page sideways. A single overflowing table or
   pre block causes horizontal scroll on the whole document, which is
   the most common mobile-usability failure Google flags. */
html{overflow-x:hidden}
body{overflow-x:clip}
img,svg,table,pre{max-width:100%}

/* -------------------------------------------------------------------
   2. UTILITY BAR
   Was a fixed-height, no-wrap flex row: on a phone the items overflow
   the viewport instead of wrapping.
   ------------------------------------------------------------------- */
@media(max-width:900px){
  .util .wrap{height:auto;min-height:40px;flex-wrap:wrap;justify-content:center;
    gap:8px 18px;padding-top:9px;padding-bottom:9px}
  .util{font-size:12.5px;text-align:center}
}

/* -------------------------------------------------------------------
   3. HEADER — keep the quote CTA on mobile
   .hdr__right was display:none below 1080px, so the single most
   important button on the site vanished on every phone.
   ------------------------------------------------------------------- */
@media(max-width:1080px){
  .hdr__right{display:flex;margin-left:auto;gap:10px}
  .hdr .wrap{gap:14px}
  .burger{margin-left:0}
  .hdr__right .btn{padding:9px 16px;font-size:13.5px}
  .hdr__right .btn:after{width:20px;height:20px;font-size:11px}
}
@media(max-width:560px){
  .hdr .wrap{height:66px}
  .brand img{height:34px}
  .hdr__right .btn{padding:8px 13px;font-size:12.5px}
  .hdr__right .btn:after{display:none}
  .nav{top:66px}
}

/* Mobile nav: 44px minimum tap targets, per WCAG and Google's own
   mobile-usability guidance. */
@media(max-width:1080px){
  .nav__i>a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav__i:last-child>a{border-bottom:none}
  .mega{padding:4px 0 10px 12px}
  .mega__grid a{padding:10px 0;font-size:15px}
  .mega__foot{margin-top:12px;padding-top:12px}
}

/* -------------------------------------------------------------------
   4. TYPE SCALE ON SMALL SCREENS
   clamp() floors of 44px and 38px are desktop-sized minimums; they
   force 2-3 word lines on a phone.
   ------------------------------------------------------------------- */
@media(max-width:560px){
  .hero h1,.phero h1{font-size:clamp(32px,8.6vw,44px);letter-spacing:-.022em}
  .page h1{font-size:clamp(30px,8vw,40px)}
  .sec h2,.blk h2,.cta h2,.edi h2{font-size:clamp(25px,6.6vw,34px)}
  .hero__lead,.phero .lead,.page__lead,.lead{font-size:16.5px}
  .phero__in{padding-top:56px}
  .sec,.blk{padding:56px 0}
  .cta{padding:56px 0}
}

/* The CTA card carried 60px of inner horizontal padding at every
   width, leaving very little room for the words themselves. */
.cta .wrap{padding:clamp(34px,6vw,66px) clamp(22px,5vw,60px)}

/* -------------------------------------------------------------------
   5. TEXT ALIGNMENT
   The hairline grids centred their copy inside a max-width column,
   which produces a ragged, unaligned block in every cell. Left-align
   them: it reads as deliberate, and it is what every corporate
   chemical site does.
   ------------------------------------------------------------------- */
.caps>div,.stepline>div{text-align:left;align-items:flex-start}
.caps p,.stepline p{max-width:38ch}
.caps h3,.stepline h3{text-align:left}
@media(max-width:860px){
  .caps>div,.stepline>div{padding-left:0;padding-right:0}
}

/* Credential strip: space-between left an orphaned last item stranded
   against the left edge on any width where the row wrapped. */
.creds .wrap{justify-content:flex-start;gap:14px clamp(20px,3.4vw,42px);
  padding-top:20px;padding-bottom:20px}
@media(max-width:640px){
  .creds .wrap{gap:10px 18px}
  .creds span{font-size:10.5px;letter-spacing:.12em}
}

/* Stop single-word last lines in body copy. */
p,.lead,.page__lead,.hero__lead{text-wrap:pretty}

/* Tabular figures wherever a number is meant to line up in a column. */
.stat b,.phero__bar b,.kv td,.tbl td{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------
   6. TABLES ON MOBILE
   Specification and catalogue tables are wider than a phone. Let the
   table itself scroll rather than the page.
   ------------------------------------------------------------------- */
@media(max-width:760px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:var(--radius)}
  .kv th{width:44%}
  .kv th,.kv td{padding:10px 12px;font-size:14px}
}

/* -------------------------------------------------------------------
   7. STAT STRIPS
   One stat per screen is a lot of scrolling for four numbers.
   ------------------------------------------------------------------- */
@media(max-width:520px){
  .phero__bar{grid-template-columns:1fr 1fr}
  .phero__bar div{border-right:1px solid rgba(255,255,255,.12);padding:22px 10px 24px}
  .phero__bar div:nth-child(2n){border-right:none}
  .phero__bar b{font-size:30px}
  .phero__bar span{font-size:10.5px;letter-spacing:.1em}
}

/* Product page media panel was reserving 340px of height on a phone
   before any content appeared. */
@media(max-width:600px){
  .pdp__media{padding:18px;min-height:230px}
  .pdp__media img{max-height:210px}
}

/* -------------------------------------------------------------------
   8. WORLD SUPPLY MAP  (.wmap)
   ------------------------------------------------------------------- */
.wmap{position:relative}
.wmap__fig{margin:38px 0 0;position:relative}
.wmap__svg{display:block;width:100%;height:auto}
.wmap__land path{fill:#E5EAF2;stroke:#fff;stroke-width:.4;vector-effect:non-scaling-stroke}
.wmap__mkt path{fill:var(--blue);stroke:#fff;stroke-width:.4;vector-effect:non-scaling-stroke;
  transition:fill .18s}
.wmap__mkt path:hover{fill:var(--blue-br)}
.wmap__home path{fill:#E8A33D;stroke:#fff;stroke-width:.4;vector-effect:non-scaling-stroke}
.wmap__arcs path{fill:none;stroke:var(--blue);stroke-width:1;opacity:.28;
  vector-effect:non-scaling-stroke}
.wmap__dots circle{fill:#fff;opacity:.85;pointer-events:none}
.wmap__origin circle{fill:#E8A33D}
.wmap__pulse{fill:none;stroke:#E8A33D;stroke-width:1.5;opacity:.55;
  transform-box:fill-box;transform-origin:center;animation:wmapPulse 2.8s ease-out infinite}
@keyframes wmapPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.2);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.wmap__pulse{animation:none;opacity:0}}

/* Dark-section variant, used on the homepage band. */
.sec--dark .wmap__land path,.hz .wmap__land path{fill:rgba(255,255,255,.10);stroke:#041F3F;stroke-width:.4}
.sec--dark .wmap__mkt path,.hz .wmap__mkt path{fill:#5B93D6;stroke:#041F3F}
.sec--dark .wmap__mkt path:hover,.hz .wmap__mkt path:hover{fill:#8FB6EE}
.sec--dark .wmap__arcs path,.hz .wmap__arcs path{stroke:#8FB6EE;opacity:.35}
.sec--dark .wmap__dots circle,.hz .wmap__dots circle{fill:#041F3F;opacity:.7}

.wmap__key{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:26px;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sec--dark .wmap__key,.hz .wmap__key{color:#93AFD6}
.wmap__key i{display:inline-block;width:11px;height:11px;border-radius:2px;
  margin-right:9px;vertical-align:-1px}
.wmap__key .k1{background:#E8A33D}
.wmap__key .k2{background:var(--blue)}
.sec--dark .wmap__key .k2,.hz .wmap__key .k2{background:#5B93D6}
.wmap__key .k3{background:#E5EAF2}
.sec--dark .wmap__key .k3,.hz .wmap__key .k3{background:rgba(255,255,255,.16)}

/* Market list under the map. */
.wmap__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px;margin-top:40px;border-top:1px solid var(--line)}
.sec--dark .wmap__list,.hz .wmap__list{border-top-color:rgba(255,255,255,.16)}
.wmap__list a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:14.5px;
  color:var(--ink);transition:padding .16s,color .16s}
.sec--dark .wmap__list a,.hz .wmap__list a{border-bottom-color:rgba(255,255,255,.1);color:#CBD9EE}
.wmap__list a:hover{padding-left:8px;text-decoration:none;color:var(--blue)}
.sec--dark .wmap__list a:hover,.hz .wmap__list a:hover{color:#fff}

/* -------------------------------------------------------------------
   9. INDUSTRY GRID  (.indg)
   ------------------------------------------------------------------- */
.indg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;
  background:var(--line);border:1px solid var(--line)}
.indg a{display:flex;flex-direction:column;gap:0;background:#fff;padding:32px 28px 34px;
  color:var(--ink);transition:background .18s}
.indg a:hover{background:var(--bone);text-decoration:none}
.indg__i{width:44px;height:44px;margin-bottom:22px;color:var(--blue);flex:none}
.indg__i svg{width:100%;height:100%;display:block}
.indg h3{font-size:18.5px;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.indg p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:10px 0 0}
.indg p{flex:1 1 auto}
.indg__go{margin-top:22px;font-size:13px;font-weight:600;color:var(--blue);
  letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
.indg__go:after{content:"→";transition:transform .16s;display:inline-block}
.indg a:hover .indg__go:after{transform:translateX(3px)}
@media(max-width:900px){.indg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.indg{grid-template-columns:1fr}.indg a{padding:26px 22px 28px}}

/* -------------------------------------------------------------------
   10. EDITORIAL / BLOG  (.postg, .post, .art)
   ------------------------------------------------------------------- */
.postg{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
@media(max-width:900px){.postg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.postg{grid-template-columns:1fr;gap:26px}}

.post{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:20px}
.post__k{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue)}
.post h3{font-size:20.5px;font-weight:500;letter-spacing:-.014em;line-height:1.28;margin:13px 0 0}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--blue);text-decoration:none}
.post p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:11px 0 0}
.post__m{margin-top:auto;padding-top:18px;font-size:12.5px;color:var(--faint);
  display:flex;gap:14px;flex-wrap:wrap}

.post--lead{border-top-width:2px}
.post--lead h3{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.022em}
.post--lead p{font-size:16.5px}

/* Article body */
.art{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:clamp(32px,5vw,72px);align-items:start;padding:52px 0 20px}
@media(max-width:960px){.art{grid-template-columns:1fr}}
.art__body{min-width:0;font-size:17px;line-height:1.75;color:#22232E}
.art__body>*:first-child{margin-top:0}
.art__body h2{font-size:clamp(23px,2.6vw,31px);font-weight:500;letter-spacing:-.018em;
  margin:44px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.art__body h3{font-size:19.5px;font-weight:600;margin:32px 0 12px;scroll-margin-top:100px}
.art__body p{margin:0 0 18px}
.art__body ul,.art__body ol{margin:0 0 20px;padding-left:22px}
.art__body li{margin-bottom:9px}
.art__body li::marker{color:var(--blue)}
.art__body strong{font-weight:600;color:var(--ink)}
.art__body a{text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(5,72,150,.32)}
.art__body a:hover{text-decoration-color:var(--blue)}
.art__body table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15px}
.art__body th,.art__body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
.art__body thead th{background:var(--blue);color:#fff;font-weight:600;font-size:13.5px}
.art__body tbody tr:nth-child(even){background:var(--bone)}
@media(max-width:700px){
  .art__body{font-size:16px}
  .art__body table{display:block;overflow-x:auto}
}

.art__note{background:var(--blue-soft);border-left:3px solid var(--blue);
  padding:20px 24px;margin:8px 0 26px;border-radius:0 var(--radius) var(--radius) 0}
.art__note p:last-child{margin-bottom:0}
.art__note b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-d);margin-bottom:8px}

.art__meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13.5px;
  color:var(--muted);margin-top:22px}
.art__meta b{color:var(--ink);font-weight:600}

.art__side{position:sticky;top:100px;font-size:14px}
@media(max-width:960px){.art__side{position:static;border-top:1px solid var(--line);padding-top:24px}}
.art__side h4{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.toc{list-style:none;padding:0;margin:0 0 34px}
.toc li{margin-bottom:2px}
.toc a{display:block;padding:6px 0 6px 13px;border-left:2px solid var(--line);
  color:var(--muted);font-size:14px;line-height:1.45}
.toc a:hover{border-left-color:var(--blue);color:var(--blue);text-decoration:none}

.art__cta{background:var(--bone);border-radius:var(--radius);padding:24px 22px}
.art__cta h4{color:var(--blue);margin-bottom:10px}
.art__cta p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 16px}

.tagl{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tagl a{font-size:12.5px;font-weight:500;background:var(--bone2);color:var(--blue-d);
  padding:6px 13px;border-radius:999px}
.tagl a:hover{background:var(--blue);color:#fff;text-decoration:none}

/* -------------------------------------------------------------------
   11. RELATED / NEXT-STEP BLOCKS
   ------------------------------------------------------------------- */
.nxt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
.nxt a{background:#fff;padding:26px 28px;color:var(--ink);display:block}
.nxt a:hover{background:var(--bone);text-decoration:none}
.nxt span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.nxt b{display:block;font-family:var(--disp);font-weight:500;font-size:18px;margin-top:9px;
  line-height:1.32;letter-spacing:-.01em}
.nxt a:hover b{color:var(--blue)}
@media(max-width:640px){.nxt{grid-template-columns:1fr}}

/* -------------------------------------------------------------------
   12. 404
   ------------------------------------------------------------------- */
.e404{padding:96px 0 84px;text-align:left}
.e404 .n{font-family:var(--disp);font-size:clamp(72px,14vw,150px);font-weight:400;
  color:var(--blue-soft);line-height:.9;letter-spacing:-.04em}
.e404 h1{margin-top:18px}
.e404 .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* -------------------------------------------------------------------
   13. PRINT — buyers print specs and send them internally.
   ------------------------------------------------------------------- */
@media print{
  .util,.hdr,.ftr,.cta,.burger,.art__side,.nxt{display:none!important}
  body{font-size:11pt;color:#000}
  a{color:#000;text-decoration:none}
  .art{grid-template-columns:1fr;padding-top:0}
  .wrap{max-width:none;padding:0}
}


/* -------------------------------------------------------------------
   14. TIGHTER PAGE HEADER for editorial pages
   The interior hero was sized for two-or-three-word headings. Article
   titles are sentences, and at clamp(38px,5.6vw,76px) they ran to three
   full lines before the reader reached a word of the article.
   ------------------------------------------------------------------- */
.page--tight{padding:34px 0 40px}
.page--tight h1{font-size:clamp(28px,3.9vw,50px);letter-spacing:-.024em;margin-top:14px}
.page--tight .crumb{padding:0 0 16px}
.page--tight .page__lead{font-size:17.5px;max-width:60ch;margin-top:16px}
@media(max-width:560px){
  .page--tight{padding:22px 0 30px}
  .page--tight h1{font-size:clamp(25px,7.2vw,34px)}
}

/* Blog hub: the featured post sat a full screen below the page title. */
.postg--lead{margin-top:0}
.sec--flush{padding-top:56px}
@media(max-width:560px){.sec--flush{padding-top:38px}}