/* ============================================================
   Haldatec design system (Blufire, Jul 2026)
   Site-wide. Every page's content is wrapped in <div class="hx">.
   Full-bleed art direction + consistent spacing + real type scale.
   ============================================================ */
.hx{--blue:#1a24e8;--blue2:#0f16b4;--ink:#12162a;--muted:#5b6172;--paper:#fff;--grey:#f4f5f7;--line:#e5e7ee;
 font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);line-height:1.6;font-size:16px;}
.hx *{box-sizing:border-box;}
.hx h1,.hx h2,.hx h3,.hx .disp{font-family:'Poppins','Inter',sans-serif;line-height:1.12;letter-spacing:-.01em;margin:0;}
.hx a{color:inherit;text-decoration:none;}
.hx p{margin:0 0 1rem;}
.hx .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.hx .fb{width:100vw;margin-left:calc(50% - 50vw);}
.hx .sec{padding:clamp(56px,7vw,100px) 0;}
.hx .eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.hx .lead{color:var(--muted);font-size:1.08rem;max-width:70ch;}

/* buttons */
.hx .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.98rem;
 padding:15px 26px;border-radius:10px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;border:0;}
.hx .btn:hover{transform:translateY(-2px);}
.hx .btn-white{background:#fff;color:var(--blue);box-shadow:0 8px 24px rgba(0,0,0,.14);}
.hx .btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(26,36,232,.32);}
.hx .btn-blue:hover{background:var(--blue2);}
.hx .btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--line);}
.hx .btn-ghost:hover{border-color:var(--blue);}
.hx .arrow{transition:transform .18s ease;}
.hx .btn:hover .arrow,.hx a:hover .arrow{transform:translateX(4px);}

/* breadcrumb */
.hx .crumb{font-family:'Poppins',sans-serif;font-size:.86rem;color:var(--muted);padding:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hx .crumb a{color:var(--muted);}
.hx .crumb a:hover{color:var(--blue);}
.hx .crumb .sep{opacity:.5;}
.hx .crumb .here{color:var(--ink);font-weight:600;}

/* home hero */
.hx .hero{position:relative;min-height:640px;display:flex;align-items:flex-end;}
.hx .hero .wrap{padding-top:140px;padding-bottom:180px;}
.hx .hero h1{color:#fff;font-weight:700;font-size:clamp(2.3rem,4.6vw,3.9rem);max-width:16ch;}
.hx .hero .lede{color:#dfe3f2;font-family:'Poppins',sans-serif;font-weight:500;font-size:clamp(1rem,1.5vw,1.28rem);margin:20px 0 34px;letter-spacing:.02em;}
.hx .hero .cta{display:flex;flex-wrap:wrap;gap:16px;}

/* interior page hero (products/services/industries/about/contact + product detail) */
.hx .phero{position:relative;min-height:360px;display:flex;align-items:center;
 background-size:cover;background-position:center;}
.hx .phero:before{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(9,13,33,.86) 0%,rgba(9,13,33,.58) 50%,rgba(9,13,33,.2) 100%);}
.hx .phero .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:56px;}
.hx .phero .kicker{color:#aeb6ff;font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.hx .phero h1{color:#fff;font-weight:700;font-size:clamp(2rem,3.8vw,3.2rem);max-width:18ch;}
.hx .phero .sub{color:#dfe3f2;margin-top:16px;max-width:56ch;font-size:1.06rem;}

/* stats card */
.hx .statswrap{position:relative;z-index:3;margin-top:-118px;}
.hx .stats{background:var(--blue);border-radius:20px;padding:clamp(28px,3vw,46px) clamp(28px,3.5vw,54px);box-shadow:0 30px 70px rgba(15,22,120,.34);}
.hx .stats .st-head{color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.35rem;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.22);}
.hx .st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.hx .st-num{color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2rem,3vw,2.9rem);line-height:1;}
.hx .st-lab{color:#fff;font-weight:600;font-size:1rem;margin-top:8px;}
.hx .st-sub{color:#c4c9ff;font-size:.85rem;margin-top:2px;}

/* split (text + media) */
.hx .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.hx .split.rev .media{order:-1;}
.hx .split h2{color:var(--blue);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);max-width:14ch;}
.hx .split p{color:var(--muted);margin:22px 0 30px;font-size:1.04rem;}
.hx .media{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(18,22,42,.16);}
.hx .media img{width:100%;height:100%;object-fit:cover;display:block;}
.hx .media.ratio{aspect-ratio:4/3;}

/* prose (rich copy sections) */
.hx .prose h2{color:var(--blue);font-weight:700;font-size:clamp(1.6rem,2.5vw,2.2rem);margin:0 0 18px;}
.hx .prose h3{color:var(--ink);font-weight:700;font-size:1.25rem;margin:28px 0 12px;}
.hx .prose p{color:var(--muted);font-size:1.04rem;}
.hx .prose ul{margin:0 0 18px;padding-left:0;list-style:none;}
.hx .prose li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--muted);}
.hx .prose li:before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:3px;background:var(--blue);}
.hx .prose a{color:var(--blue);font-weight:600;}

/* trusted */
.hx .trusted .lab{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.8rem;display:flex;align-items:center;gap:20px;}
.hx .trusted .lab:after{content:"";flex:1;height:1px;background:var(--line);}
.hx .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:34px;margin-top:34px;}
.hx .logos img{max-height:40px;width:auto;filter:grayscale(1);opacity:.62;transition:opacity .2s ease,filter .2s ease;}
.hx .logos img:hover{filter:grayscale(0);opacity:1;}

/* band */
.hx .band{background:var(--blue);color:#fff;text-align:center;}
.hx .band h2{color:#fff;font-weight:700;font-size:clamp(1.8rem,2.8vw,2.5rem);max-width:20ch;margin:0 auto;}
.hx .band p{color:#d5d9ff;max-width:60ch;margin:20px auto 32px;font-size:1.06rem;}

/* industries we serve */
.hx .indserve{background:var(--grey);}
.hx .indserve h2{color:var(--blue);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);}
.hx .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.hx .icard{position:relative;border-radius:16px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;background-size:cover;background-position:center;box-shadow:0 18px 44px rgba(18,22,42,.18);}
.hx .icard:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,120,.15) 0%,rgba(12,16,60,.4) 45%,rgba(10,14,50,.9) 100%);}
.hx .icard .ic-in{position:relative;z-index:2;padding:28px;width:100%;}
.hx .icard h3{color:#fff;font-weight:700;font-size:1.5rem;max-width:12ch;margin-bottom:18px;}
.hx .ic-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--blue);font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:9px;transition:transform .18s ease;}
.hx .icard:hover .ic-btn{transform:translateX(3px);}
.hx .alsorow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;margin-top:64px;}
.hx .alsorow h3{font-family:'Poppins',sans-serif;color:var(--ink);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);max-width:16ch;}
.hx .alsorow p{color:var(--muted);margin:18px 0 26px;}
.hx .chips{display:flex;flex-wrap:wrap;gap:14px;}
.hx .chip{border:1px solid var(--line);border-radius:10px;padding:13px 22px;font-family:'Poppins',sans-serif;font-weight:500;font-size:.94rem;color:var(--ink);background:#fff;transition:all .18s ease;text-align:center;}
.hx .chip:hover,.hx .chip.on{background:var(--blue);color:#fff;border-color:var(--blue);}

/* testimonials */
.hx .thead h2{color:var(--blue);font-weight:700;font-size:clamp(1.9rem,3vw,2.7rem);}
.hx .thead p{color:var(--muted);margin-top:16px;max-width:44ch;font-size:1.05rem;}
.hx .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px;}
.hx .tgrid.one{max-width:720px;}
.hx .tcard{background:var(--grey);border-radius:16px;padding:38px 34px;position:relative;transition:background .25s ease,color .25s ease;}
.hx .tcard:before{content:"\201C";font-family:Georgia,serif;color:var(--blue);font-size:4.2rem;line-height:.6;display:block;margin-bottom:14px;transition:color .25s ease;}
.hx .tcard p{color:var(--ink);font-size:1rem;line-height:1.7;}
.hx .tcard .who{font-family:'Poppins',sans-serif;font-weight:600;margin-top:22px;color:var(--ink);}
.hx .tcard:hover{background:var(--blue);}
.hx .tcard:hover p,.hx .tcard:hover .who,.hx .tcard:hover:before{color:#fff;}

/* product / category card grid */
.hx .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;}
.hx .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.hx .pcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(18,22,42,.14);border-color:transparent;}
.hx .pcard .pc-img{aspect-ratio:4/3;background:var(--grey) center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hx .pcard .pc-img img{width:100%;height:100%;object-fit:cover;}
.hx .pcard .pc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.hx .pcard h3{font-weight:700;font-size:1.18rem;color:var(--ink);margin-bottom:10px;}
.hx .pcard p{color:var(--muted);font-size:.95rem;flex:1;}
.hx .pcard .pc-go{color:var(--blue);font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;margin-top:16px;display:inline-flex;align-items:center;gap:8px;}

/* product detail */
.hx .pdetail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start;}
.hx .pdetail .pd-cat{color:var(--blue);font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;margin-bottom:8px;}
.hx .pdetail h1{color:var(--ink);font-weight:700;font-size:clamp(1.8rem,2.8vw,2.5rem);margin-bottom:22px;}
.hx .pdetail p{color:var(--muted);font-size:1.05rem;}
.hx .pd-media{border-radius:16px;overflow:hidden;background:var(--grey);box-shadow:0 20px 50px rgba(18,22,42,.12);}
.hx .pd-media img{width:100%;display:block;}
.hx .pd-how{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:clamp(30px,3.6vw,52px);align-items:start;}
.hx .pd-how h3{color:var(--ink);font-weight:700;font-size:1.15rem;margin-bottom:12px;}
.hx .feat li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--muted);list-style:none;}
.hx .feat li:before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--blue);}
.hx .feat{padding:0;margin:0;}

/* pdf download buttons */
.hx .pdfrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;}
.hx .pdfbtn{display:inline-flex;align-items:center;gap:11px;background:var(--grey);border:1px solid var(--line);border-radius:11px;padding:14px 20px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);transition:all .18s ease;}
.hx .pdfbtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}
.hx .pdfbtn svg{flex:none;}

/* compliance band */
.hx .comply{background:var(--blue);color:#fff;}
.hx .comply h2{color:#fff;font-weight:700;font-size:clamp(1.7rem,2.6vw,2.3rem);}
.hx .comply p{color:#d5d9ff;max-width:60ch;margin-top:16px;}
.hx .pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;padding:0;list-style:none;}
.hx .pills li{border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:11px 22px;color:#fff;font-size:.95rem;}

/* category selector (products hub) */
.hx .selector{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;margin-top:40px;}
.hx .selbtns{display:flex;flex-wrap:wrap;gap:12px;}
.hx .selbtn{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:13px 20px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);background:#fff;cursor:pointer;transition:all .18s ease;}
.hx a.selbtn:hover,.hx a.selbtn:focus{text-decoration:none;color:#fff;}
.hx .selbtn:hover,.hx .selbtn.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.hx .selpane{border-radius:16px;overflow:hidden;background:var(--grey);min-height:420px;position:sticky;top:24px;}
.hx .selpane img{width:100%;height:100%;object-fit:cover;display:block;}
.hx .selpane .sp-body{padding:28px;}

/* enquiry form */
.hx .enq{background:var(--grey);}
.hx .enq .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start;}
.hx .enq h2{color:var(--blue);font-weight:700;font-size:clamp(1.8rem,2.6vw,2.4rem);}
.hx .enq p{color:var(--muted);margin-top:18px;font-size:1.05rem;}
.hx .form{background:#fff;border-radius:18px;padding:clamp(26px,3vw,40px);box-shadow:0 20px 50px rgba(18,22,42,.09);}
.hx .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.hx .field{margin-bottom:16px;}
.hx .field label{display:block;font-family:'Poppins',sans-serif;font-weight:500;font-size:.85rem;margin-bottom:7px;}
.hx .field input,.hx .field select,.hx .field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-family:inherit;font-size:.98rem;background:#fbfbfd;transition:border .15s ease,box-shadow .15s ease;}
.hx .field input:focus,.hx .field select:focus,.hx .field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,36,232,.14);}

@media(max-width:900px){
 .hx .st-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
 .hx .split,.hx .enq .grid,.hx .alsorow,.hx .pdetail,.hx .selector{grid-template-columns:1fr;}
 .hx .split.rev .media{order:0;}
 .hx .cards3,.hx .pgrid,.hx .pd-how{grid-template-columns:1fr;}
 .hx .statswrap{margin-top:-80px;}
 .hx .frow{grid-template-columns:1fr;}
 .hx .hero .wrap{padding-bottom:150px;}
 .hx .selpane{position:static;min-height:0;}
}
@media(min-width:901px) and (max-width:1100px){
 .hx .pgrid{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   Deep page components (service / industry / contact) - Jul 2026
   ============================================================ */
/* intro with side image + right copy */
/* 10 Aug 2026 (Monique 6 Aug: "there's a big gap before the text below" on the service pages).
   The left column was forced to ~790px by two 1/1 aspect ratios while the right column ran to
   ~235px, so `align-items:start` left ~555px of white beside the copy. Squarer-to-4:3 plus
   centring the copy closes it; the doubled section padding below is handled in build_rest.py. */
.hx .introcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.hx .introcols .ic-media{border-radius:14px;overflow:hidden;background:var(--grey);aspect-ratio:4/3;box-shadow:0 18px 44px rgba(18,22,42,.14)}
.hx .introcols .ic-media img{width:100%;height:100%;object-fit:cover;display:block}
.hx .introcols h2{color:var(--blue);font-weight:700;font-size:clamp(1.8rem,2.8vw,2.5rem);margin-bottom:18px}
.hx .subgrid{display:grid;grid-template-columns:2fr 1fr;gap:26px;margin-top:30px;align-items:start}
.hx .thumbs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx .thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
/* service intro thumbs are literature product shots on a plain ground - show the whole product
   rather than cropping it (the Coating pair is one portrait + one landscape). Same `.fit`
   convention as the extracted datasheet images further down this file. */
.hx .thumbs.fit img{object-fit:contain;background:#fff;padding:10px}

/* inline stats row */
.hx .statline{display:flex;flex-wrap:wrap;gap:44px;margin:28px 0}
.hx .statline .sn{color:var(--blue);font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1}
.hx .statline .sl{color:var(--muted);font-weight:600;font-size:.9rem;margin-top:6px}

/* tailored solutions */
.hx .tailored{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:center}
.hx .tailored .tl-media{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--grey);box-shadow:0 18px 44px rgba(18,22,42,.14)}
.hx .tailored .tl-media img{width:100%;height:100%;object-fit:cover}
.hx .tailored h2{color:var(--blue);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.3rem)}
.hx .twocol-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin-top:20px;padding:0;list-style:none}
.hx .twocol-list li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--muted)}
.hx .twocol-list li:before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--blue)}

/* process steps */
.hx .process .phead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
.hx .process h2{color:var(--blue);font-weight:700;font-size:clamp(1.9rem,3vw,2.6rem)}
.hx .pstep{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,60px);align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.hx .pstep .pn{color:var(--blue);font-family:'Poppins',sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:10px}
.hx .pstep h3{color:var(--ink);font-weight:700;font-size:1.35rem;margin-bottom:10px}
.hx .pstep p{color:var(--muted)}
.hx .pstep .ps-media{border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.hx .pstep .ps-media img{width:100%;height:100%;object-fit:cover;display:block}

/* case study / project cards */
.hx .csgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.hx .cscard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.hx .cscard .cs-img{aspect-ratio:16/10;background:var(--grey) center/cover no-repeat}
.hx .cscard .cs-b{padding:24px;display:flex;flex-direction:column;flex:1}
.hx .cscard h3{font-weight:700;font-size:1.1rem;margin-bottom:10px;color:var(--ink)}
.hx .cscard p{color:var(--muted);font-size:.94rem;flex:1}
.hx .cscard .pc-go{color:var(--blue);font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;margin-top:16px;display:inline-flex;gap:8px;align-items:center}

/* why choose (blue icon cols) */
.hx .whychoose{background:var(--blue);color:#fff;text-align:center}
.hx .whychoose h2{color:#fff;font-weight:700;font-size:clamp(1.9rem,3vw,2.5rem)}
.hx .wc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.hx .wc-grid .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.hx .wc-grid h3{color:#fff;font-weight:700;font-size:1.2rem;margin-bottom:10px}
.hx .wc-grid p{color:#d5d9ff;font-size:.96rem}

/* accordion (industry solution) */
.hx .accord-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,5vw,72px);align-items:start;margin-top:36px}
.hx .accord-wrap h2{color:var(--blue);font-weight:700;font-size:clamp(1.9rem,3vw,2.6rem)}
.hx .acc details{border-bottom:1px solid var(--line)}
.hx .acc summary{list-style:none;cursor:pointer;padding:20px 6px;font-family:'Poppins',sans-serif;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.hx .acc summary::-webkit-details-marker{display:none}
.hx .acc summary .chev{transition:transform .2s ease;color:var(--blue);font-weight:700}
.hx .acc details[open] summary .chev{transform:rotate(180deg)}
.hx .acc .acc-body{padding:0 6px 22px;color:var(--muted)}
/* 10 Aug 2026, Monique 6 Aug on the industry pages. `.acc-detail` used to sit in the right
   column re-printing accordion item 01 word for word ("a repeat of text on the right and the
   left") and is gone, along with the 01./02. `.num` counters. The right column now holds the
   industry photograph; with no photo supplied the accordion runs full width via `.single`. */
.hx .accord-wrap.single{grid-template-columns:1fr}
.hx .acc-photo{border-radius:14px;overflow:hidden;background:var(--grey);box-shadow:0 18px 44px rgba(18,22,42,.14)}
/* 24 Aug 2026 - the forced aspect-ratio:4/3 here was centre-cropping every industry
   solutions.jpg to landscape, losing 40-50% of the frame on all nine pages. Those
   photographs were deliberately prepared portrait or square "to sit in a text column"
   (see build/industry-originals/<slug>/CREDITS.md), so the rule, not the photos, was the
   defect. The column now takes each photograph at its own proportions. */
.hx .acc-photo img{width:100%;height:auto;display:block}
/* "the last point is meant as a Call Out maybe in a box or something" */
.hx .callout{background:#fff;border-left:4px solid var(--blue);border-radius:14px;padding:32px;margin-top:44px}
.hx .callout h3{color:var(--ink);font-weight:700;font-size:1.3rem;margin-bottom:12px}
.hx .callout p{color:var(--muted)}

/* key projects */
.hx .kp{display:grid;grid-template-columns:1fr;gap:26px;margin-top:40px}
.hx .kpcard{display:grid;grid-template-columns:420px 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.hx .kpcard.rev .kp-media{order:2}
.hx .kp-media{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.hx .kp-media img{width:100%;height:100%;object-fit:cover;display:block}
.hx .kpcard h3{color:var(--ink);font-weight:700;font-size:1.4rem;margin-bottom:12px}
.hx .kpcard p{color:var(--muted)}

/* success stories photo grid */
.hx .ssgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.hx .sscell{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--grey)}
.hx .sscell img{width:100%;height:100%;object-fit:cover;display:block}
.hx .sscell.feat:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,50,.15),rgba(10,14,50,.75))}
.hx .sscell .ss-in{position:absolute;left:24px;bottom:22px;z-index:2}
.hx .sscell .ss-in h3{color:#fff;font-weight:700;font-size:1.3rem;margin-bottom:12px}

/* why partner cards */
.hx .partner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.hx .pcardx{border-radius:16px;padding:34px 30px;background:var(--blue);color:#fff}
.hx .pcardx:nth-child(1){background:#3a45f0}.hx .pcardx:nth-child(3){background:#0f16b4}
.hx .pcardx .ic{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.hx .pcardx h3{color:#fff;font-weight:700;font-size:1.25rem;margin-bottom:10px}
.hx .pcardx p{color:#dde0ff;font-size:.96rem}

/* contact details + map */
.hx .contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:start}
.hx .cline{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.hx .cline .ci{flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff}
.hx .cline .cl-t{font-family:'Poppins',sans-serif;font-weight:700;color:var(--ink)}
.hx .cline .cl-d{color:var(--muted);font-size:.96rem}
.hx .cmap{border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(18,22,42,.14);min-height:420px}
.hx .cmap iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

/* enquiry on blue */
.hx .blueform{background:var(--blue);color:#fff}
.hx .blueform h2{color:#fff;font-weight:700;font-size:clamp(1.9rem,3vw,2.6rem)}
.hx .blueform .bf-p{color:#d5d9ff;margin-top:14px;max-width:52ch}
.hx .blueform .grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.hx .blueform input,.hx .blueform select,.hx .blueform textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:14px 15px;color:#fff;font-family:inherit;font-size:.97rem;margin-bottom:16px}
.hx .blueform input::placeholder,.hx .blueform textarea::placeholder{color:#c4c9ff}
.hx .blueform select{color:#fff}.hx .blueform select option{color:#12162a}
.hx .blueform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx .blueform textarea{min-height:150px;resize:vertical}
.hx .blueform .btn-white{width:100%;justify-content:center}

@media(max-width:900px){
 .hx .introcols,.hx .tailored,.hx .process .phead,.hx .accord-wrap,.hx .contactgrid,.hx .blueform .grid,.hx .subgrid{grid-template-columns:1fr}
 /* single column on mobile: cap the industry photo so a portrait frame does not
    run the full page width now that it keeps its own proportions */
 .hx .acc-photo{max-width:440px;margin-left:auto;margin-right:auto}
 .hx .pstep,.hx .kpcard,.hx .kpcard.rev .kp-media{grid-template-columns:1fr}
 .hx .pstep .ps-media{order:-1}
 .hx .csgrid,.hx .wc-grid,.hx .partner,.hx .ssgrid,.hx .twocol-list{grid-template-columns:1fr}
}

/* extracted datasheet product images (28 Jul 2026): contain on white, not cover */
.hx .pc-img img.fit{object-fit:contain;background:#fff;padding:10px;}
.hx .pd-media.fit{display:flex;align-items:center;justify-content:center;background:#fff;padding:28px;}
.hx .pd-media.fit img{width:auto;max-width:100%;max-height:400px;}
/* 10 Aug 2026: extreme portraits (probes, quills, insertion devices - roughly 1:3 and taller)
   were capped at 460px inside a 28px-padded white box, which rendered them as a thin sliver in
   a wide empty field. The builder tags anything under 0.6 aspect ratio `tall`. */
.hx .pd-media.fit.tall{padding:14px}
.hx .pd-media.fit.tall img{max-height:440px}  /* 520 -> 440, 24 Aug 2026. Monique's own replacement photos are taller portraits than the
     datasheet extractions they replaced, so the media column drove the row height and the gap
     under the Enquire button grew again on the pages she named (OBP, item 57). */

/* SEO heading structure (28 Jul 2026): one H1/page; product detail + columns use H2 styled as before */
.hx .pdetail h2.pd-title{color:var(--ink);font-weight:700;font-size:clamp(1.8rem,2.8vw,2.5rem);margin-bottom:22px;}
.hx .pd-how h2.pd-h,.hx .pdetail h2.pd-h{color:var(--ink);font-weight:700;font-size:1.15rem;margin-bottom:12px;}

/* home restored-content sections (29 Jul 2026, per client Homepage docx) */
.hx .st-sub-head{color:#c4c9ff;max-width:72ch;margin:-12px 0 26px;font-size:.98rem;}
.hx .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;}
.hx .mv-card{background:#fff;border-radius:16px;padding:34px 32px;box-shadow:0 14px 34px rgba(18,22,42,.08);}
.hx .mv-card h3{color:var(--blue);font-weight:700;font-size:1.25rem;margin-bottom:12px;}
.hx .mv-card p{color:var(--muted);margin:0 0 10px;}
.hx .vals-head{color:var(--ink);font-weight:700;font-size:1.4rem;margin:44px 0 8px;}
.hx .vt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:18px;}
.hx .vt{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:0 12px 30px rgba(18,22,42,.07);}
.hx .vt h3{color:var(--ink);font-weight:700;font-size:1.05rem;margin-bottom:8px;}
.hx .vt p{color:var(--muted);font-size:.95rem;margin:0;}
.hx .bigquote{border-left:4px solid var(--blue);background:var(--grey);border-radius:0 16px 16px 0;padding:38px 42px;max-width:860px;margin:0 auto;}
.hx .bigquote p{color:var(--ink);font-size:1.15rem;line-height:1.7;margin:0 0 16px;}
.hx .bq-who{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blue);}
.hx .hw{background:var(--grey);}
.hx .hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;}
.hx .hw-step{display:flex;gap:20px;background:#fff;border-radius:14px;padding:28px 26px;box-shadow:0 12px 30px rgba(18,22,42,.07);}
.hx .hw-n{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:var(--blue);line-height:1;}
.hx .hw-step h3{color:var(--ink);font-weight:700;font-size:1.1rem;margin-bottom:8px;}
.hx .hw-step p{color:var(--muted);font-size:.96rem;margin:0;}
.hx .faq-acc details{background:#fff;}
@media(max-width:900px){.hx .mv-grid,.hx .vt-grid,.hx .hw-grid{grid-template-columns:1fr;}}

/* ------------------------------------------------------------------
   Products mega-dropdown - 2 columns  (fix: 3 Aug 2026)
   Was CSS multi-column (columns:2 210px). A long label that wrapped to
   two lines could break across the column boundary, which made the last
   item read as indented (client report, Monique 30 Jul 2026).
   CSS grid keeps every item whole and every label flush-left.
   ------------------------------------------------------------------ */
.mainnav .dropdown-menu.mm-2col { min-width: 620px; }
.mainnav .dropdown-menu.mm-2col.show {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}
.mainnav .dropdown-menu.mm-2col > li { min-width: 0; }
.mainnav .dropdown-menu.mm-2col > li.mm-span { grid-column: 1 / -1; }

/* ------------------------------------------------------------------
   Uneven row gaps  (fix: 6 Aug 2026)
   The 3 Aug grid fix stopped labels breaking across columns, but three
   labels ("Pipeline Corrosion Monitoring", "Pipeline Insertion Probes",
   "Waste Water Treatment") still wrapped to two lines at 210px. In a row
   flow grid a wrapped label makes the WHOLE row 56px instead of 32px, so
   the single-line item beside it was left sitting above a gap.
   Widening the columns to 280px (menu 620px, fits from x=157 to 777 on a
   1440 viewport) puts every label on one line: all rows 32px, no gaps.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .mainnav .dropdown-menu.mm-2col .dropdown-item { white-space: nowrap; }
}

/* ------------------------------------------------------------------
   Last-item indent  (fix: 6 Aug 2026)
   The old dev agency's stylesheet (uploads/custom-css-js/14.css line 290)
   carries `.navbar-nav li:last-child { margin-left: 15px }`, meant to space
   the LinkedIn icon at the end of the top-level nav. Because the dropdown
   <ul>s sit inside .navbar-nav, it also matched the last <li> of every
   dropdown - indenting "Waste Water Treatment" by 15px under Products,
   "Phase State Analysis" under Services and "Waste Water Treatment" under
   Industries. Scoped back to the top level here; the direct-child rule
   above it still spaces the real last nav item.
   ------------------------------------------------------------------ */
.mainnav .dropdown-menu li:last-child { margin-left: 0; }

/* collapsed navbar: single column, full width, labels may wrap */
@media (max-width: 991.98px) {
  .mainnav .dropdown-menu.mm-2col { min-width: 0; }
  .mainnav .dropdown-menu.mm-2col.show { display: block; }
  .mainnav .dropdown-menu.mm-2col .dropdown-item { white-space: normal; }
}

/* ------------------------------------------------------------------
   Line-height repair, 21 Aug 2026.
   The old site's stylesheet is still enqueued as uploads/custom-css-js/14.css
   (Simple Custom CSS and JS entry "style", post 14) and it carries a bare
       p { font-weight:500; line-height:17px; }
   A rule on `p` beats the line-height we set on the .hx container, because that
   only reaches paragraphs by inheritance. Result: every paragraph on the site
   rendered at roughly 1.0x line-height, so descenders collided with the line
   below. Monique reported the same fault three separate ways on 21 Aug:
     - "the 'g' from kg is sitting on top of the number '7' below" (Transportable Odour Vessel)
     - "The paragraphs look squishy. Is the font size correct?" (Waste Water Treatment)
     - "the comma after 'product' merges with the dot on the 'i' underneath it" (Contact Us)
   It was never a font-size problem. .hx p out-specifies the bare p rule, so this
   fixes it site-wide without touching the legacy file.
   ------------------------------------------------------------------ */
.hx p{line-height:1.6;}
.hx .lead,.hx .prose p,.hx .pdetail p{line-height:1.65;}
.hx .phero .sub,.hx .band p,.hx .bf-p{line-height:1.6;}

/* 24 Aug 2026 - nested options under their label in a product feature list.
   Monique asked for the options to be indented under "Optional features:" / "Options"
   on five product pages (her items 21, 44, 48, 61, 62). bullets() in
   build_products_tree.py emits <li class="feat-lbl">LABEL<ul class="feat sub">...</ul></li> */
.hx .feat li.feat-lbl{padding-left:0;margin-top:16px;font-weight:600;color:var(--ink)}
/* the square markers are :before elements at left:0, so a negative margin on the label
   dragged its own square outside the list. Suppress the marker and sit the label flush
   instead; the options then indent from it. */
.hx .feat li.feat-lbl:before{display:none}
.hx .feat li.feat-lbl>ul.sub{margin:10px 0 4px 26px;font-weight:400;color:var(--muted)}
.hx .feat ul.sub li{margin-bottom:6px}

/* 24 Aug 2026 - GT - Perth makes four testimonials. auto-fit resolves to three columns at
   full width, so the fourth card wrapped onto its own row and stretched the full width.
   Two by two reads as a set; below 900px the single-column rule already takes over. */
@media (min-width:901px){ .hx .tgrid.four{grid-template-columns:repeat(2,1fr)} }

/* 24 Aug 2026 - CFD Modelling and Phase State Analysis lead with a chart, not a photograph.
   The 4:3 cover box crops a 3.5:1 plot down to its middle, so those two opt out and keep
   their own proportions. Monique: "just have the top pic / just have the graph". */
.hx .introcols .ic-media.auto{aspect-ratio:auto;background:#fff}
.hx .introcols .ic-media.auto img{height:auto;object-fit:contain}