/*
Theme Name: HA International Chemicals
Theme URI: https://hachemicals.com/
Description: Production child theme for HA International Chemicals Trading LLC.
Author: HA International Chemicals Trading LLC
Template: hello-elementor
Version: 1.0.43
Text Domain: hachemicals
Requires at least: 6.6
Requires PHP: 8.1
*/

/* ============================================================
   HA International Chemicals Trading LLC — concept stylesheet
   Palette sampled from the live site (navy / green / orange).
   ============================================================ */
:root{
  --navy:#13223C;
  --navy-2:#1C3054;
  --navy-3:#0C1729;
  --green:#059900;
  --green-light:#B8FFAE;
  --green-dark:#023B00;
  --orange:#FC811B;
  /* applications lists only — distinguishes "where it's used" from "what it
     does" without introducing a second brand colour anywhere else */
  --blue:#2563C9;

  --ink:#13223C;
  --grey:#76787C;
  --faint:#9EA3AB;
  --line:#DDE1E8;
  --line-soft:#EAEDF2;
  --bg:#FFFFFF;
  --surface:#EFF1F5;
  --surface-2:#E4E8EF;

  --display:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --container:1240px;
  --radius:3px;
  --radius-lg:6px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur:.45s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.hachemicals-site{background-image:none!important}
.admin-bar header.site{top:32px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}

/* Elementor kit guard — applies ONLY to routes that still load Elementor's CSS
   (currently /contact-us/, where MetForm's layout depends on it). Everywhere
   else functions.php dequeues Elementor's stylesheets, so no override is needed
   and this scope deliberately stays off those routes: at (0,1,2) it would
   otherwise outrank legitimate component rules such as .post-card h3. */
body.hachemicals-kit-scope{color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;font-weight:400}
body.hachemicals-kit-scope h1,
body.hachemicals-kit-scope h2,
body.hachemicals-kit-scope h3,
body.hachemicals-kit-scope h4{font-family:var(--display);font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
body.hachemicals-kit-scope .page-hero h1{color:#fff}
body.hachemicals-kit-scope .cta-band h2{color:#fff}
/* re-assert component rules the scoped guard would otherwise outrank */
body.hachemicals-kit-scope .contact-card h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--green);font-weight:600;line-height:1.45}

/* focus — visible on every interactive element */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:600;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--green);flex:none}
.eyebrow.on-dark{color:var(--green-light)}
.eyebrow.on-dark::before{background:var(--green-light)}

/* ---------------------------------------------------------- buttons */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;min-height:48px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.985)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn-primary{background:var(--green);color:#fff}
.btn-secondary{background:var(--navy);color:#fff}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}

@media (hover:hover){
  .btn-primary:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(5,153,0,.7)}
  .btn-secondary:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(19,34,60,.6)}
  .btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-1px)}
  .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-1px)}
}
.header-cta .btn-primary:hover,.header-cta .btn-primary:focus-visible{color:#fff}

/* short page transition: continuity without delaying navigation */
.site-transition{
  position:fixed;inset:0;z-index:999999;display:grid;place-items:center;
  background:rgba(7,18,35,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),visibility 0s linear .22s;
}
.site-transition__mark{
  position:absolute;z-index:1;display:grid;place-items:center;width:52px;height:52px;padding:8px;
  border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.96);
  box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(19,34,60,.05);
}
.site-transition__mark img{width:38px;height:auto;max-height:32px;object-fit:contain}
.site-transition__ring{width:72px;height:72px;border:1px solid rgba(255,255,255,.2);border-top-color:var(--green-light);border-right-color:rgba(184,255,174,.5);border-radius:50%;animation:site-transition-spin .8s linear infinite}
html.is-transitioning .site-transition{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s var(--ease)}
html.is-transitioning body>:not(.site-transition){filter:blur(5px)}
@keyframes site-transition-spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- ripple
   Pointer-origin bloom, ported to vanilla from interior.dev/docs/ripple.
   Bloom .5s linear, fade 320ms on cubic-bezier(.23,1,.32,1). */
.ripple-layer{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  pointer-events:none;z-index:0;
}
.ripple{
  position:absolute;width:40px;height:40px;border-radius:50%;
  background:var(--ripple-tint,rgba(19,34,60,.15));
  transform:translate(-50%,-50%) scale(0);
  animation:ripple-bloom .5s linear forwards;
  will-change:transform,opacity;
}
.ripple.is-releasing{animation:ripple-bloom .5s linear forwards,ripple-fade .32s var(--ease-out) forwards}
@keyframes ripple-bloom{to{transform:translate(-50%,-50%) scale(var(--ripple-scale,10))}}
@keyframes ripple-fade{to{opacity:0}}
/* dark surfaces get a light tint */
.btn-primary,.btn-secondary,.btn-ghost,.on-dark-ripple{--ripple-tint:rgba(255,255,255,.22)}
/* keep label above the ripple layer */
.btn > *:not(.ripple-layer){position:relative;z-index:1}

/* ---------------------------------------------------------- scroll reveal */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal="scale"]{transform:translateY(20px) scale(.97)}
[data-reveal="left"]{transform:translateX(-28px)}
[data-reveal="right"]{transform:translateX(28px)}
[data-reveal].is-visible{opacity:1;transform:none}

/* heading wipe */
[data-reveal="wipe"]{
  opacity:1;transform:none;
  /* Negative vertical insets keep descenders (g, j, p, q, y) and accents
     outside the nominal line box from being shaved during the wipe. */
  clip-path:inset(-.2em 100% -.32em -.04em);
  transition:clip-path .9s var(--ease);
}
[data-reveal="wipe"].is-visible{clip-path:inset(-.2em -.04em -.32em -.04em)}

/* ---------------------------------------------------------- topbar */
.topbar{background:var(--navy-3);color:#AEB6C4;font-family:var(--mono);font-size:12px;position:relative;z-index:60}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap;gap:4px;padding-block:6px}
.topbar a{color:#AEB6C4;transition:color .2s}
.topbar a:hover{color:var(--green-light)}
.topbar .sep{opacity:.35;margin:0 10px}

/* ---------------------------------------------------------- header */
header.site{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
header.site.is-scrolled{box-shadow:0 6px 24px -14px rgba(19,34,60,.4)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:86px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:52px;width:auto}
.logo__name{display:none}
nav.main{display:flex;align-items:center;gap:32px}
nav.main > li{list-style:none;margin:0;padding:0}
nav.main a{
  position:relative;font-size:14.5px;font-weight:600;color:var(--navy);padding:8px 0;
  transition:color .2s var(--ease);
}
nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
nav.main a:hover::after,nav.main a.active::after,nav.main .current-menu-item > a::after{transform:scaleX(1)}
nav.main a.active,nav.main .current-menu-item > a{color:var(--green)}
.header-cta{display:flex;align-items:center;gap:14px}
.menu-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
  width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle span{display:block;width:22px;flex:none;height:2px;background:var(--navy);margin:3px 0;transition:transform .3s var(--ease),opacity .2s}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav-quote{display:none}

/* ---------------------------------------------------------- hero */
.hero{position:relative;overflow:clip;background:var(--navy);color:#fff;isolation:isolate;padding:0}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.6s var(--ease);
  background-size:cover;background-position:center;
}
.hero__slide.is-active{opacity:1}
.hero__slide.is-active .hero__img{animation:kenburns 14s ease-out forwards}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,23,41,.72) 0%,rgba(12,23,41,.78) 45%,rgba(12,23,41,.94) 100%);
}
.hero .wrap{
  position:relative;z-index:2;
  padding:76px 24px 68px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;
  min-height:min(760px,calc(100svh - 126px));
}
.admin-bar .hero .wrap{min-height:min(760px,calc(100svh - 161px))}
.hero h1{font-size:clamp(38px,5.6vw,68px);max-width:15ch;color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--green-light)}
.hero p.lead{color:#CBD2DC;font-size:17.5px;max-width:48ch;margin-bottom:32px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(6px);
}
.hero-stats div{background:rgba(12,23,41,.45);padding:22px 20px;transition:background-color .3s var(--ease)}
.hero-stats div:hover{background:rgba(5,153,0,.22)}
.hero-stats b{display:block;font-family:var(--display);font-size:30px;color:#fff;line-height:1.1}
.hero-stats span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9B2C0}
/* slide dots */
.hero__dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.hero__dots button{
  width:34px;height:4px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background-color .3s var(--ease);
}
.hero__dots button.is-active{background:var(--green-light)}

/* ---------------------------------------------------------- sections */
section{padding:96px 0}
section.tight{padding:60px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:48px;flex-wrap:wrap}
.section-head h2{font-size:clamp(28px,3.6vw,42px);max-width:28ch;margin:0}
/* Section headings use a restrained measure. "Electromechanical equipment
   installation" is longer than that and broke across two lines. It needs 820px
   at 42px while the container offers 1192px, so lifting the cap seats it on one
   line. Deliberately not white-space:nowrap — raising the cap cannot overflow,
   whereas nowrap would force overflow if the container ever narrowed. Below
   1024px the cap stays, where the measure still does useful work. */
@media (min-width:1024px){
  .section-head--wide h2{max-width:none}
}
.section-head p{color:var(--grey);max-width:46ch;margin:0}
.bg-surface{background:var(--surface)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy p{color:#AEB6C4}
.lede{color:var(--grey);font-size:17px;max-width:62ch}

/* ---------------------------------------------------------- grids/cards */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
  transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.card .thumb{
  aspect-ratio:1/1;background:var(--surface);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:24px;
  border-bottom:1px solid var(--line-soft);
}
.card .thumb img{
  max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .55s var(--ease);
}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1;position:relative;z-index:1}
.card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.card h3{font-size:17.5px;margin:0;transition:color .3s var(--ease)}
.card .go{
  margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:12px;
  color:var(--grey);display:flex;align-items:center;gap:6px;transition:color .3s var(--ease);
}
.card .go .arw{transition:transform .35s var(--ease)}
@media (hover:hover){
  .card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 22px 40px -24px rgba(19,34,60,.45)}
  .card:hover .thumb img{transform:scale(1.06)}
  .card:hover h3{color:var(--green)}
  .card:hover .go{color:var(--green)}
  .card:hover .go .arw{transform:translateX(5px)}
}

/* ---------------------------------------------------------- category pills */
.cat-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.cat-pill{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--mono);font-size:12.5px;padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:24px;color:var(--navy);background:#fff;
  transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;
}
@media (hover:hover){.cat-pill:hover{background:var(--green-light);border-color:var(--green);color:var(--navy);transform:translateY(-2px)}}
.cat-pill.active{background:var(--navy);color:#fff;border-color:var(--navy);--ripple-tint:rgba(255,255,255,.22)}

/* ------------------------------------------------ industry catalogue */
.sector-tabs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  margin-bottom:44px;
}
.sector-tabs .cat-pill{
  width:100%;justify-content:center;text-align:center;line-height:1.35;
  border-radius:var(--radius-lg);min-width:0;
}
.sector-tabs .cat-pill > span:not(.ripple-layer){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;margin-left:8px;padding:0 6px;border-radius:12px;
  background:var(--surface);color:var(--grey);font-size:11px;
}
.sector-tabs .cat-pill.active > span:not(.ripple-layer){background:rgba(255,255,255,.14);color:#fff}
.sector-select-wrap{display:none;margin-bottom:34px}
.sector-select-wrap label{
  display:block;margin-bottom:9px;font-family:var(--mono);font-size:11.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
}
.sector-select-wrap select{
  width:100%;min-height:48px;padding:11px 42px 11px 14px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  color:var(--navy);font-family:var(--body);font-size:16px;font-weight:700;
}
.sector-panel{padding:0;scroll-margin-top:118px}
.sector-panel + .sector-panel{margin-top:76px}
.industry-catalogue.is-enhanced .sector-panel + .sector-panel{margin-top:0}
.sector-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line);
}
.sector-heading .eyebrow{margin-bottom:10px}
.sector-heading h2{font-size:clamp(25px,3vw,36px);margin:0}
.sector-heading p{max-width:34ch;margin:0;color:var(--grey);font-size:14px;text-align:right}

/* ---------------------------------------------------------- features */
.feature{display:flex;gap:18px;align-items:flex-start}
.feature .num{
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--green);
  border:1px solid var(--line);width:44px;height:44px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
@media (hover:hover){
  .feature:hover .num{background:var(--green);color:#fff;border-color:var(--green);transform:rotate(-8deg) scale(1.06)}
}
.feature h4{margin:0 0 7px;font-size:17.5px}
.feature p{margin:0;color:var(--grey);font-size:14.5px}
.bg-navy .feature .num{border-color:rgba(255,255,255,.24);color:var(--green-light)}
.bg-navy .feature p{color:#A9B2C0}

/* ---------------------------------------------------------- counters */
.counter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.counter-row div{background:#fff;padding:34px 22px;text-align:center;transition:background-color .35s var(--ease)}
.counter-row div:hover{background:var(--surface)}
.counter-row b{font-family:var(--display);font-size:clamp(32px,4vw,46px);display:block;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.counter-row span{font-family:var(--mono);font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.09em}
.bg-navy .counter-row{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.bg-navy .counter-row div{background:var(--navy-3)}
.bg-navy .counter-row div:hover{background:var(--navy-2)}
.bg-navy .counter-row b{color:#fff}
.bg-navy .counter-row span{color:#A9B2C0}

/* installation capability artwork */
.installation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);overflow:hidden}
.installation-card{position:relative;min-width:0;min-height:360px;background:var(--navy-3);overflow:hidden;isolation:isolate}
.installation-card::after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(180deg,transparent 0%,rgba(7,18,35,.6) 52%,rgba(7,18,35,.98) 100%);z-index:1;pointer-events:none}
.installation-card img{position:absolute;inset:18px 18px 54px;width:calc(100% - 36px);height:calc(100% - 72px);object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.24))}
.installation-card h3{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:76px 24px 24px;color:#fff;font-size:clamp(17px,1.55vw,22px);line-height:1.2;text-align:left}

/* progress bars */
.progress{margin-bottom:26px}
.progress__top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;margin-bottom:9px;letter-spacing:.05em}
.progress__track{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-light));border-radius:3px;transition:width 1.4s var(--ease)}
.bg-navy .progress__track{background:rgba(255,255,255,.16)}

/* ---------------------------------------------------------- industries */
.industry-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.industry-card{min-width:0;border-right:1px solid var(--line);text-align:center;background:#fff;overflow:hidden;transition:background-color .35s var(--ease)}
.industry-card:last-child{border-right:none}
.industry-card__media{aspect-ratio:8/5;overflow:hidden;background:var(--surface-2)}
.industry-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .35s var(--ease)}
.industry-card--construction .industry-card__media img{object-position:62% 44%}
.industry-card h4{font-size:14.5px;margin:0;padding:20px 16px}
@media (hover:hover){
  .industry-card:hover{background:var(--green-light)}
  .industry-card:hover img{transform:scale(1.045);filter:saturate(1.05)}
}

/* ---------------------------------------------------------- services */
.service-item{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  align-items:center;gap:clamp(36px,5vw,72px);padding:68px 0;border-bottom:1px solid var(--line);
}
.service-item:first-of-type{padding-top:18px}
.service-item__copy{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;min-width:0}
.service-item--media-left .service-item__media{order:-1}
.service-item .ic{font-family:var(--mono);color:var(--green);font-size:14px;font-weight:600;padding-top:4px}
.service-item h3{margin-bottom:12px;font-size:22px}
.service-item p{margin:0 0 .9em;color:var(--grey);font-size:15px;max-width:68ch}
.service-item p:last-child{margin-bottom:0}
.service-item__media{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 20px 55px -38px rgba(19,34,60,.55)}
.service-item__media img{width:100%;height:100%;object-fit:cover}
.services-showcase{background:#fff}
.services-showcase .wrap{max-width:1240px}

/* ---------------------------------------------------------- product detail */
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--faint);padding:22px 0;border-bottom:1px solid var(--line)}
.breadcrumb a{color:var(--grey);transition:color .2s}
.breadcrumb a:hover{color:var(--green)}
.pd-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:60px 0}
.pd-media,.pd-info{min-width:0}
.pd-media{position:sticky;top:110px;align-self:start}
.pd-media .frame{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:44px;overflow:hidden;
}
.pd-media .frame img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
@media (hover:hover){.pd-media .frame:hover img{transform:scale(1.06)}}
.pd-media .quote-box{margin-top:20px;background:var(--navy);color:#fff;padding:26px;border-radius:var(--radius-lg)}
.pd-media .quote-box h4{margin:0 0 8px;color:#fff}
.pd-media .quote-box p{color:#A9B2C0;font-size:13.5px;margin:0 0 18px}
.pd-info .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:12px;display:block}
.pd-info h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:20px}
.pd-body p{color:var(--grey);font-size:15.5px}
.pd-body h3{font-size:19px;margin-top:34px;border-top:1px solid var(--line);padding-top:26px;color:var(--navy)}
.pd-body strong{color:var(--navy)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}
table.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:340px}
table.spec-table th,table.spec-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
table.spec-table th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);background:var(--surface);font-weight:600}
table.spec-table tbody tr{transition:background-color .22s var(--ease)}
table.spec-table tbody tr:hover{background:var(--surface)}
ul.benefits-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
ul.benefits-list li{padding-left:30px;position:relative;font-size:14.5px;color:var(--grey);line-height:1.65}
/* hexagon marker — benzene-ring motif, apt for a chemicals catalogue */
ul.benefits-list li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:14px;background:var(--green);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform .35s var(--ease);
}
@media (hover:hover){
  ul.benefits-list li:hover::before{transform:rotate(90deg) scale(1.15)}
}
ul.benefits-list li strong{color:var(--navy)}
/* applications lists: same hexagon, blue — "where it's used" vs "what it does" */
ul.benefits-list.is-applications li::before{background:var(--blue)}
/* nested lists inherit their parent's colour */
ul.benefits-list ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
ul.benefits-list ul li{padding-left:26px}
ul.benefits-list ul li::before{opacity:.55;transform:scale(.8)}
@media (hover:hover){
  ul.benefits-list ul li:hover::before{transform:rotate(90deg) scale(.92)}
}

/* links inside product copy — COA / MSDS datasheets live here, so they have to
   be visibly clickable. Their own markup wraps these in inline #00ff00, which
   clean_html strips; without this they'd render as plain body text. */
.pd-body a{
  color:var(--green);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .2s var(--ease);
}
.pd-body a:hover{color:var(--green-dark)}
.pd-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------------------------------------------------------- CTA band */
.cta-band{background:var(--green);color:#fff;text-align:center;--ripple-tint:rgba(255,255,255,.24)}
.cta-band h2{color:#fff;font-size:clamp(28px,4.2vw,42px)}
.cta-band p{color:rgba(255,255,255,.9);max-width:54ch;margin:0 auto 28px}

/* ---------------------------------------------------------- page hero */
.page-hero{background:var(--navy);color:#fff;padding:72px 0 56px;position:relative;overflow:clip}
.page-hero::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(135deg,var(--green) 0 2px,transparent 2px 38px);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(32px,4.8vw,52px);margin-bottom:10px}
.page-hero p{color:#AEB6C4;max-width:54ch;margin:0}

/* ---------------------------------------------------------- about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-grid .shot{border-radius:var(--radius-lg);overflow:hidden}
.about-grid .shot img{width:100%;transition:transform .8s var(--ease)}
@media (hover:hover){.about-grid .shot:hover img{transform:scale(1.05)}}

/* certifications */
.certificate-hero p{max-width:68ch}
.certificate-section{background:var(--surface)}
.certificate-intro{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);
  gap:64px;align-items:end;margin-bottom:42px;
}
.certificate-intro h2{max-width:15ch;margin-bottom:0}
.certificate-intro .lede{margin:0;color:var(--grey)}
.certificate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.certificate-card{
  --certificate-accent:#356DB5;display:flex;min-width:0;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--certificate-accent);
  border-radius:var(--radius-lg);box-shadow:0 18px 42px -34px rgba(19,34,60,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.certificate-card--green{--certificate-accent:#16924A}
.certificate-card--red{--certificate-accent:#B73535}
@media (hover:hover){
  .certificate-card:hover{transform:translateY(-5px);box-shadow:0 26px 48px -32px rgba(19,34,60,.5)}
}
.certificate-preview{
  position:relative;display:block;aspect-ratio:1.28/1;overflow:hidden;background:#F3F5F8;
  border-bottom:1px solid var(--line);isolation:isolate;
}
.certificate-preview::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,23,41,.72),transparent 44%);
  opacity:.78;transition:opacity .25s var(--ease);
}
.certificate-preview img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;transition:transform .55s var(--ease);
}
.certificate-preview span{
  position:absolute;z-index:1;left:20px;bottom:17px;color:#fff;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
@media (hover:hover){
  .certificate-preview:hover img{transform:scale(1.025)}
  .certificate-preview:hover::after{opacity:1}
}
.certificate-card__body{display:flex;flex:1;flex-direction:column;padding:26px 24px 24px}
.certificate-standard{
  display:block;margin-bottom:10px;color:var(--certificate-accent);font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.certificate-card__body h2{font-size:21px;line-height:1.28;margin-bottom:22px}
.certificate-facts{margin:0 0 18px}
.certificate-facts div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-top:1px solid var(--line-soft);
}
.certificate-facts dt{color:var(--grey);font-size:12.5px}
.certificate-facts dd{margin:0;color:var(--navy);font-family:var(--mono);font-size:11.5px;font-weight:600;text-align:right}
.certificate-note{margin:0 0 22px;color:var(--grey);font-size:12.5px;line-height:1.55}
.certificate-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.certificate-actions .btn{min-width:0;padding:12px 10px;font-size:10.5px;text-align:center;white-space:nowrap}
.certificate-assurance{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:50px;
  align-items:center;margin-top:34px;padding:28px 30px;background:var(--navy);border-radius:var(--radius-lg);color:#fff;
}
.certificate-assurance div{display:flex;flex-direction:column;gap:5px}
.certificate-assurance__label{color:var(--green-light);font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.certificate-assurance strong{font-size:16px}
.certificate-assurance div > span:last-child,.certificate-assurance p{color:#AEB6C4;font-size:13.5px}
.certificate-assurance p{margin:0}
.about-hero{padding-bottom:64px}
.about-hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.about-hero__intro{display:flex;flex-direction:column;align-items:center}
.about-hero__intro p{max-width:60ch}
.about-hero__certifications{
  display:flex;align-items:stretch;justify-content:center;gap:18px;width:min(100%,980px);margin-top:34px;
}
.about-hero__standards{
  display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));flex:1;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.98);text-align:left;
}
.about-hero__standards span{
  padding:17px 20px;color:var(--navy);font-family:var(--mono);font-size:11px;font-weight:600;white-space:nowrap;
}
.about-hero__standards span + span{border-left:1px solid var(--line)}
.about-hero__standards small{display:block;margin-top:5px;color:var(--grey);font-family:var(--body);font-size:11.5px;font-weight:500}
.about-hero__certifications .btn{display:flex;align-items:center;justify-content:center;flex:0 0 250px;min-height:72px}

/* photo strip */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.photo-strip figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (hover:hover){.photo-strip figure:hover img{transform:scale(1.08)}}

/* ---------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.contact-card + .contact-card{margin-top:14px}
@media (hover:hover){.contact-card:hover{border-color:var(--green);transform:translateX(4px)}}
.contact-card h4{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--green);margin-bottom:10px}
.contact-card p,.contact-card a{margin:0;font-size:15px;color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--grey)}
.field input,.field textarea,.field select{
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
  font-family:var(--body);font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(5,153,0,.13)}
.field textarea{resize:vertical}

/* WordPress form plugins keep their submission and notification logic. The
   child theme only supplies the visual layer used by the approved concept. */
.hachemicals-form-shell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.hachemicals-form-shell h2{font-size:24px;margin-bottom:22px}
.hachemicals-form-shell .mf-input-wrapper,
.hachemicals-form-shell .wpforms-field{margin-bottom:16px}
.hachemicals-form-shell label,
.hachemicals-form-shell .mf-input-label,
.hachemicals-form-shell .wpforms-field-label{
  display:block;margin-bottom:7px;font-family:var(--mono);font-size:11px!important;
  line-height:1.45;text-transform:uppercase;letter-spacing:.07em;color:var(--grey);font-weight:600!important;
}
.hachemicals-form-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.hachemicals-form-shell textarea,
.hachemicals-form-shell select{
  width:100%!important;max-width:none!important;min-height:48px!important;
  border:1px solid var(--line)!important;border-radius:var(--radius)!important;
  padding:13px 15px!important;font-family:var(--body)!important;font-size:15px!important;
  line-height:1.4!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.hachemicals-form-shell textarea{min-height:132px!important;resize:vertical}
.hachemicals-form-shell input:focus,
.hachemicals-form-shell textarea:focus,
.hachemicals-form-shell select:focus{outline:none!important;border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(5,153,0,.13)!important}
.hachemicals-form-shell button[type="submit"],
.hachemicals-form-shell input[type="submit"],
.hachemicals-form-shell .metform-btn,
.hachemicals-form-shell .wpforms-submit{
  width:100%!important;min-height:50px!important;border:1px solid var(--green)!important;
  border-radius:var(--radius)!important;background:var(--green)!important;color:#fff!important;
  padding:14px 26px!important;font-family:var(--mono)!important;font-size:13px!important;
  line-height:1.4!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:600!important;
  cursor:pointer!important;transition:background-color .22s var(--ease),transform .22s var(--ease)!important;
}
.hachemicals-form-shell button[type="submit"]:hover,
.hachemicals-form-shell input[type="submit"]:hover,
.hachemicals-form-shell .metform-btn:hover,
.hachemicals-form-shell .wpforms-submit:hover{background:var(--green-dark)!important;transform:translateY(-1px)}
.hachemicals-form-shell .wpforms-error,
.hachemicals-form-shell .mf-error-message{color:#b42318!important;font-size:12px!important}
.hachemicals-form-shell .wpforms-confirmation-container-full,
.hachemicals-form-shell .mf-response-msg{border:1px solid var(--green)!important;background:#effcee!important;color:var(--ink)!important;padding:16px!important}
.form-unavailable{padding:20px;border:1px solid #f0b429;background:#fff9e8;color:var(--ink)}

/* ---------------------------------------------------------- FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--radius);padding:24px 26px;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
@media (hover:hover){
  .faq-item:hover{transform:translateY(-3px);box-shadow:0 18px 32px -24px rgba(19,34,60,.4)}
}
.faq-item h3{font-size:16.5px;margin:0 0 10px;color:var(--navy)}
.faq-item p{margin:0;color:var(--grey);font-size:14.5px}

/* ---------------------------------------------------------- blog */
.post-card .post-thumb{
  aspect-ratio:16/10;overflow:hidden;background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.post-card .post-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease);
}
@media (hover:hover){.post-card:hover .post-thumb img{transform:scale(1.05)}}
.post-card h3{font-size:17px;line-height:1.35}

.post-wrap{max-width:780px;padding:48px 24px 12px}
.post-wrap .tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);display:block;margin-bottom:12px;
}
.post-wrap h1{font-size:clamp(28px,4vw,42px);margin-bottom:24px}
.post-hero{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:32px;aspect-ratio:16/9}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-body{font-size:16px}
.post-body p{color:var(--steel,var(--grey));margin-bottom:1.1em}
.post-body h2{font-size:23px;margin-top:34px;color:var(--navy)}
.post-body h3{font-size:19px;margin-top:28px;color:var(--navy)}
.navigation.pagination{margin-top:42px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--mono);font-size:12px}
.nav-links .current,.nav-links .page-numbers:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:760px){
  .admin-bar header.site{top:46px}
  .post-wrap{padding:32px 20px 8px}
  .post-hero{margin-bottom:24px}
}

/* ---------------------------------------------------------- blog empty */
.empty-state{text-align:center;padding:80px 24px;border:1px dashed var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.empty-state .ic{font-size:40px;margin-bottom:16px}
.empty-state h3{margin-bottom:8px}
.empty-state p{color:var(--grey);max-width:44ch;margin:0 auto 22px}

/* ---------------------------------------------------------- 404 */
.notfound{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--navy);color:#fff;padding:60px 24px}
.notfound .code{font-family:var(--display);font-size:clamp(90px,17vw,190px);color:rgba(255,255,255,.07);line-height:1;font-weight:800;letter-spacing:-.04em}
.notfound h1{color:#fff;margin-top:-.15em}
.notfound p{color:#A9B2C0;margin-bottom:26px}

/* ---------------------------------------------------------- footer */
footer.site{background:var(--navy-3);color:#9AA3B2;padding:70px 0 30px;font-size:14px}
footer.site .fgrid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:44px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)}
footer.site h4{color:#fff;font-size:12px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
footer.site a{color:#9AA3B2;display:block;margin-bottom:11px;transition:color .2s var(--ease),transform .2s var(--ease)}
footer.site a:hover{color:var(--green-light);transform:translateX(3px)}
footer.site .flogo img{height:56px;width:auto;margin-bottom:16px;background:#fff;padding:8px;border-radius:var(--radius)}
footer.site .fbottom{display:flex;justify-content:space-between;padding-top:26px;font-size:12.5px;flex-wrap:wrap;gap:10px}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding:96px 24px 84px}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .photo-strip{grid-template-columns:repeat(3,1fr)}
  .certificate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certificate-card:last-child{grid-column:1/-1;width:calc(50% - 11px);justify-self:center}
  .about-hero__certifications{max-width:760px;flex-direction:column}
  .about-hero__certifications .btn{flex-basis:auto;min-height:56px;width:100%}
  .sector-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sector-tabs .cat-pill:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:900px){
  /* horizontal reveals are a wide-screen nicety; on narrow screens their
     pre-reveal offset pushes full-width blocks past the viewport edge */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .industry-row{grid-template-columns:repeat(2,1fr)}
  .industry-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .industry-card:nth-child(2n){border-right:none}
  .pd-grid{grid-template-columns:1fr;gap:36px;padding:40px 0}
  .pd-media{position:static}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .certificate-intro{grid-template-columns:1fr;gap:20px}
  .certificate-intro h2{max-width:18ch}
  .certificate-assurance{grid-template-columns:1fr;gap:18px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .service-item{grid-template-columns:1fr;gap:30px;padding:48px 0}
  .service-item__copy{order:1}
  .service-item__media,.service-item--media-left .service-item__media{order:2;aspect-ratio:16/10}
  footer.site .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  section{padding:72px 0}
}
@media (max-width:820px){
  header.site .wrap{height:74px}
  .logo{gap:8px;min-width:0}
  .logo img{height:42px}
  .logo__name{
    display:flex;flex-direction:column;min-width:0;color:var(--navy);
    font-family:var(--display);font-size:11.5px;font-weight:750;line-height:1.15;
    letter-spacing:-.01em;white-space:nowrap;
  }
  .menu-toggle{display:flex}
  .header-cta .btn{display:none}
  nav.main{
    position:absolute;top:74px;left:0;right:0;height:calc(100svh - 74px);background:#fff;flex-direction:column;
    align-items:flex-start;justify-content:flex-start;
    padding:36px 28px;gap:6px;overflow-y:auto;
    transform:translateX(100%);
    /* visibility keeps the closed drawer out of the tab order and stops it
       extending the scrollable area while off-screen */
    visibility:hidden;
    transition:transform .38s var(--ease),visibility 0s linear .38s;
    z-index:49;
  }
  nav.main.open{transform:translateX(0);visibility:visible;transition:transform .38s var(--ease),visibility 0s}
  nav.main a{
    font-size:21px;width:100%;padding:16px 0;border-bottom:1px solid var(--line-soft);
    opacity:0;transform:translateX(18px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s;
  }
  nav.main > li{width:100%}
  nav.main .mobile-nav-quote{
    display:block;margin-top:18px;padding:15px 20px;border:0;border-radius:3px;
    background:var(--green);color:#fff;text-align:center;font-family:var(--mono);
    font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  }
  nav.main.open a{opacity:1;transform:none;transition-delay:calc(var(--n,0) * 55ms + 90ms)}
  nav.main a::after{display:none}
  .hero .wrap{min-height:auto;padding:72px 24px 72px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .counter-row{grid-template-columns:1fr}
  .installation-grid{grid-template-columns:1fr}
  .installation-card{min-height:320px}
  .certificate-grid{grid-template-columns:1fr}
  .certificate-card:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .certificate-preview{aspect-ratio:16/10}
  .about-hero{padding-block:58px}
  .about-hero__certifications{margin-top:28px}
  .about-hero__standards{width:100%;grid-template-columns:1fr;text-align:center}
  .about-hero__standards span + span{border-left:0;border-top:1px solid var(--line)}
  .industry-card--construction .industry-card__media img{object-position:68% 46%}
  .photo-strip{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  footer.site .fgrid{grid-template-columns:1fr;gap:30px}
  .section-head{margin-bottom:34px}
  section{padding:60px 0}
  .topbar .wrap{justify-content:center;text-align:center;font-size:11.5px}
  .hachemicals-form-shell{padding:22px 18px}
  .certificate-assurance{padding:24px 22px}
}
@media (max-width:767px){
  .industry-catalogue.is-enhanced .sector-tabs{display:none}
  .industry-catalogue.is-enhanced .sector-select-wrap{display:block}
  .sector-heading{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:22px}
  .sector-heading p{text-align:left}
}
@media (max-width:380px){
  .hero-stats{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  header.site .wrap{gap:12px}
  .logo{gap:7px}
  .logo img{height:36px}
  .logo__name{font-size:11px}
  .service-item__copy{grid-template-columns:1fr;gap:10px}
  .pd-media .quote-box .btn{width:100%;max-width:100%;padding-inline:14px;white-space:normal;text-align:center}
  .certificate-card__body{padding:23px 18px 20px}
  .certificate-actions{grid-template-columns:1fr}
  .certificate-actions .btn{font-size:11px}
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  /* never leave revealed content invisible */
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__slide.is-active .hero__img{animation:none}
  .ripple{display:none}
  .site-transition__ring{animation:none}
  .site-transition{transition:none}
}

/* ============================================================
   Mobile touch & legibility pass
   Audited at 320/375/390/414/768. Fixes tap targets under the
   40px guideline and text below 11px, without shifting layout.
   ============================================================ */

/* Hero slide indicators are a deliberate 34x4 bar. Expanding the hit
   area with a pseudo-element keeps that visual while giving a 44x40
   touch target. Horizontal growth stays inside the 10px flex gap so
   adjacent dots can never overlap. */
.hero__dots button{position:relative}
.hero__dots button::before{
  content:"";position:absolute;left:-5px;right:-5px;top:-18px;bottom:-18px;
}

/* Short desktop nav labels ("VFD", "Blog") are only 27-31px wide. At tablet
   widths that row is still touch-operated, so widen the hit area without
   touching the label or its underline. 7px per side stays well inside the
   32px flex gap, so neighbouring links cannot overlap. */
@media (max-width:1024px){
  nav.main a::before{
    content:"";position:absolute;left:-7px;right:-7px;top:0;bottom:0;
  }
}

@media (max-width:1024px){
  /* Topbar contact links were 15px tall. Padding (not a pseudo-element)
     so wrapped rows push each other apart instead of overlapping. */
  .topbar a{display:inline-block;padding:11px 0}
  .topbar .wrap{gap:2px 10px}

  /* Footer links were 23px tall. */
  footer.site a{padding:10px 0;margin-bottom:2px}

  /* Below 11px is uncomfortable on a handset. */
  .card .tag{font-size:11.5px}
  .hero-stats span{font-size:11.5px}

  /* iOS Safari zooms the whole page when a text field under 16px receives
     focus, which throws the layout off mid-form. The theme's own form rule
     sets 15px !important, so this has to match that weight. Applies to both
     the MetForm contact form and the WPForms quote form. */
  .hachemicals-form-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  .hachemicals-form-shell textarea,
  .hachemicals-form-shell select,
  .field input,
  .field textarea,
  .field select{font-size:16px!important}

  /* Contact-card phone/email/WhatsApp links were 21px tall. */
  .contact-card a{display:inline-block;padding:9px 0}

  /* Breadcrumb links were 29x16. Expand the hit area with a pseudo-element so
     the crumb trail keeps its compact look; 6px per side stays inside the
     " / " separators, so adjacent crumbs cannot overlap. */
  .breadcrumb a{position:relative}
  .breadcrumb a::before{
    content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px;
  }
}



/* Facility gallery */
.facility-section{padding:104px 0}
.facility-section__head{margin-bottom:34px}
.facility-section__head p{max-width:590px;margin:14px 0 0;color:var(--grey)}
.facility-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:14px}
.facility-card{position:relative;overflow:hidden;margin:0;background:var(--navy);border-radius:3px}
.facility-card--lead{grid-column:span 2;grid-row:span 2}
.facility-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.facility-card:hover img{transform:scale(1.035)}
.facility-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 17px 14px;color:#fff;background:linear-gradient(transparent,rgba(12,23,41,.78));font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.facility-card--quiet figcaption{opacity:.78}
@media(max-width:900px){.facility-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}.facility-card--lead{grid-column:span 2;grid-row:span 2}}
@media(max-width:560px){.facility-section{padding:72px 0}.facility-grid{grid-template-columns:1fr;grid-auto-rows:220px;gap:10px}.facility-card--lead{grid-column:auto;grid-row:span 1}.facility-card figcaption{padding:26px 14px 12px}}