:root{
  --navy:#0a223d;--navy-dark:#071e34;--red:#d30c29;--text:#112642;--muted:#59687a;
  --border:#dfe5ed;--canvas:1200px;--paper:#fff;--pale:#f5f7f9;--bluegray:#e7edf4
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{max-width:var(--canvas);min-width:320px;margin:0 auto;background:var(--paper);color:var(--text);font:400 14px/1.45 Arial,Helvetica,sans-serif;box-shadow:0 0 30px rgba(12,32,61,.06)}
button,input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
img{display:block;max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid #1b6fc2;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;top:-60px;left:15px;background:#fff;padding:10px;z-index:30}
.skip-link:focus{top:10px}
.shell{width:calc(100% - clamp(40px,12.2vw,110px));margin-inline:auto}
h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--navy);font-weight:800;letter-spacing:-.035em}
h1{font-size:clamp(31px,3.8vw,51px);line-height:1.075;margin-bottom:13px}
h2{font-size:clamp(23px,2.65vw,36px);line-height:1.16;margin-bottom:9px}
p{margin-bottom:0}
.site-header{height:clamp(50px,5.7vw,78px);background:#fff;z-index:20;position:relative;box-shadow:0 1px 5px #051b310a}
.header-inner{height:100%;display:flex;align-items:center;gap:20px;justify-content:space-between}
.brand{width:clamp(110px,14vw,170px);flex:0 0 auto}
.brand img{height:clamp(42px,5.5vw,68px);width:100%;object-fit:contain;object-position:left center}
.nav{display:flex;gap:clamp(11px,2vw,28px);align-items:center;margin:auto}
.nav a{font-size:clamp(9px,.95vw,13px);font-weight:700;white-space:nowrap;transition:color .15s}
.nav a:hover{color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:clamp(34px,3.8vw,50px);padding:0 clamp(13px,1.8vw,24px);border:1px solid transparent;border-radius:3px;font-weight:750;font-size:clamp(10px,1vw,14px);white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s}
.btn svg,.text-link svg,.product-card svg{height:15px;width:15px}
.btn-red{background:var(--red);color:white;border-color:var(--red)}
.btn-red:hover{background:#aa0921}
.btn-outline{border-color:#b2bcca;background:#ffffffd9;color:var(--text)}
.btn-outline:hover{border-color:var(--red)}
.menu-toggle{display:none}
.hero{height:clamp(308px,37vw,435px);position:relative;isolation:isolate;overflow:hidden;background:#eef3fa}
.hero-scene{position:absolute;inset:0;z-index:-1;background:url('assets/hero-generated-1500.webp') 50% 50%/cover no-repeat}
.hero-content{height:100%;display:flex;align-items:center;position:relative}
.hero-copy{width:46%;padding-bottom:8px}
.eyebrow{font-size:clamp(8px,.83vw,11px);font-weight:800;color:#c00b26;text-transform:uppercase;letter-spacing:.055em;margin:0 0 clamp(12px,1.5vw,18px);line-height:1.4}
.eyebrow:before{content:'';display:inline-block;width:clamp(17px,2.4vw,28px);height:2px;background:var(--red);vertical-align:middle;margin-right:9px}
.lead{max-width:440px;font-size:clamp(12px,1.32vw,17px);line-height:1.42;margin-bottom:clamp(15px,1.9vw,25px);color:#374960}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.hero-motto{position:absolute;right:-18px;top:50%;transform:translateY(-43%);color:#24374f;font-size:clamp(9px,.87vw,12px);line-height:2.05;letter-spacing:.25em;font-weight:750;text-align:left;text-shadow:0 0 15px #fff,0 0 8px #fff}
.features{background:#fff;border-bottom:1px solid #e6eaf0}
.features-grid{height:clamp(59px,7vw,87px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.features article{min-width:0;display:flex;align-items:center;gap:clamp(7px,1.35vw,17px);padding:0 clamp(7px,2vw,25px);border-right:1px solid #cbd3dc}
.features article:first-child{padding-left:10px}
.features article:last-child{border-right:0}
.features svg{flex:0 0 auto;width:clamp(25px,3.2vw,39px);height:clamp(25px,3.2vw,39px);stroke-width:1.7}
.features b,.features span{display:block;line-height:1.3}
.features b{font-size:clamp(10px,1.02vw,14px);font-weight:800}
.features span{font-size:clamp(9px,.89vw,12px);color:#5c6879;margin-top:3px}
.section{padding:clamp(20px,2.8vw,39px) 0}
.product-section{background:linear-gradient(125deg,#f9fafb,#f1f4f7)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:clamp(14px,1.8vw,24px)}
.section-heading h2{margin:0 0 6px}
.section-heading p{font-size:clamp(11px,1.04vw,14px);color:#5b6573}
.text-link{color:#bd1029;font-size:clamp(9px,.88vw,13px);font-weight:750;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-top:8px}
.text-link:hover{color:#8f0419}
.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.3vw,15px)}
.product-card{background:#fff;border:1px solid #f1f2f5;border-radius:2px;min-width:0;overflow:hidden;transition:transform .17s,box-shadow .17s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #0d2c4317}
.product-card img,.resource-card-icon{height:clamp(101px,13vw,155px);width:100%;object-fit:contain;padding:6px clamp(5px,1.7vw,22px) 0;object-position:center center}
.product-card>span{min-height:clamp(26px,3.2vw,37px);display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 clamp(9px,1.5vw,17px) clamp(5px,.9vw,9px);font-size:clamp(10px,1.1vw,14px);font-weight:750;line-height:1.2}
.product-card>span svg{stroke-width:2;color:var(--red);flex:0 0 auto}
.resource-card-icon{display:flex;align-items:center;justify-content:center;color:#758ca4}
.resource-card-icon svg{width:clamp(55px,6vw,80px);height:clamp(55px,6vw,80px);stroke-width:1.2}
.catalogue{height:clamp(185px,22vw,272px);overflow:hidden;background:linear-gradient(100deg,#e3eaf2,#f6f8fa 45%,#dfe8f1)}
.catalogue-inner{height:100%;display:grid;grid-template-columns:52% 48%;align-items:center;gap:0}
.catalogue h2{margin-bottom:7px}
.catalogue p{max-width:500px;font-size:clamp(11px,1.08vw,15px);color:#4b5b6f;line-height:1.45;margin:0 0 clamp(14px,1.9vw,25px)}
.catalogue .actions{gap:12px}
.catalogue-art{height:100%;position:relative;min-width:0;perspective:800px}
.catalogue-open{position:absolute;width:77%;height:70%;top:17%;left:20%;display:grid;grid-template-columns:1fr 1fr;transform:rotate(8deg) skewY(-2deg);box-shadow:8px 16px 17px #1a3b5940;border-radius:0 2px 2px 0}
.catalogue-page{background:#fefefe;border:1px solid #d9dfe7;position:relative;overflow:hidden;padding:8%}
.catalogue-page-left{background:linear-gradient(100deg,#fefefe 0%,#e3e3e3 100%);box-shadow:inset -6px 0 10px #20344824}
.catalogue-page-right{background:linear-gradient(95deg,#eeeeee,#fff 15%);}
.catalogue-page-right strong{font-size:clamp(9px,1vw,16px);color:var(--navy);line-height:1.1}
.catalogue-page-right span{font-size:clamp(6px,.55vw,10px);color:#d70a28;letter-spacing:.02em;display:block}
.catalogue-page img{width:65%;height:60%;object-fit:contain;position:absolute;right:4%;bottom:0}
.catalogue-paper-lines{height:75%;background:repeating-linear-gradient(to bottom,#a2b0c23e 0 2px,transparent 2px 11px);opacity:.5}
.catalogue-cover{position:absolute;left:7%;top:13%;width:43%;height:77%;background:linear-gradient(160deg,#eaf0f5 0%,#bfd0df 43%,#062540 44%,#09233e 100%);border:1px solid #9eafc2;box-shadow:6px 10px 17px #172b3e38;transform:rotate(-11deg);overflow:hidden;padding:7% 7% 0;display:flex;flex-direction:column;align-items:flex-start}
.catalogue-cover:before{content:'';position:absolute;top:34%;left:0;right:0;height:28%;background:url('assets/industry-petrochemical.webp') center/cover;filter:saturate(.7)}
.cover-brand{z-index:1;font-size:clamp(17px,2.3vw,32px);font-weight:900;line-height:1;color:#0a2846;letter-spacing:-.06em}
.cover-brand b{color:#c70828}
.cover-subtitle{font-size:clamp(6px,.5vw,8px);z-index:1;letter-spacing:.23em;margin-top:2px}
.cover-caption{z-index:1;margin-top:auto;margin-bottom:13px;font-size:clamp(9px,.85vw,12px);font-weight:800;letter-spacing:.05em;line-height:1.25;color:#fff}
.industries-section{background:#fff}
.industries-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(7px,1vw,13px)}
.industries-grid a{background:#f4f6f8;border:1px solid #e6ebef;min-width:0;transition:box-shadow .2s}
.industries-grid a:hover{box-shadow:0 5px 13px #1c354522}
.industry-photo{height:clamp(78px,9vw,115px);background-size:cover;background-position:center}
.industry-photo.oil{background-image:url('assets/sector-oil.webp')}
.industry-photo.process{background-image:url('assets/hero-generated-1500.webp');background-position:88% 35%}
.industry-photo.power{background-image:url('assets/sector-power.webp')}
.industry-photo.water{background-image:url('assets/sector-water.webp')}
.industry-photo.marine{background-image:url('assets/sector-marine.webp')}
.industry-photo.food{background-image:url('assets/industry-factory.webp')}
.industries-grid span{min-height:clamp(29px,3.3vw,42px);display:flex;align-items:center;justify-content:center;gap:7px;padding:3px;font-size:clamp(9px,.93vw,12px);font-weight:750;white-space:normal;text-align:center;line-height:1.2}
.industries-grid span:before{content:'';width:15px;height:15px;display:inline-block;flex:0 0 auto;border:1.8px solid var(--navy);border-radius:50%;background:linear-gradient(115deg,transparent 40%,var(--navy) 41% 47%,transparent 48%);}
.about{min-height:clamp(153px,18.2vw,232px);display:grid;grid-template-columns:35% 65%;background:#eff3f7}
.about-photo{background:url('assets/industry-petrochemical.webp') center/cover;filter:saturate(.7)}
.about-copy{padding:clamp(12px,2.4vw,33px) clamp(15px,4vw,51px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(11px,2vw,30px);align-items:center}
.about h2{font-size:clamp(19px,2vw,29px);margin-bottom:9px}
.about-copy .eyebrow{display:none}
.about-copy p{font-size:clamp(10px,1.04vw,14px);line-height:1.4;color:#546175}
.about-copy .text-link{margin-top:6px}
.about-list{display:grid;gap:clamp(7px,1.3vw,16px)}
.about-list>div{display:flex;align-items:center;gap:clamp(9px,1.4vw,18px)}
.about-list svg{width:clamp(22px,2.5vw,31px);height:clamp(22px,2.5vw,31px);flex:0 0 auto}
.about-list p{margin:0}
.about-list b,.about-list small{display:block;line-height:1.24}
.about-list b{color:var(--navy);font-size:clamp(10px,1vw,14px)}
.about-list small{color:#5d6b7b;font-size:clamp(9px,.85vw,12px);margin-top:3px}
.quote-strip{background:linear-gradient(100deg,#071d34,#10365b);color:#fff}
.quote-inner{min-height:clamp(58px,6.8vw,83px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.quote-inner h2{font-size:clamp(16px,2vw,26px);margin:0;color:#fff;letter-spacing:-.035em}
.quote-inner p{color:#e8eef7;font-size:clamp(10px,.97vw,13px)}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr .95fr 1.6fr;gap:clamp(10px,2vw,30px);padding:clamp(18px,3vw,36px) 0}
footer{background:#fff}
.footer-main>.brand{width:clamp(105px,13vw,160px)}
.footer-main b,.footer-main a,.footer-main small,.footer-main .footer-support{display:block}
.footer-main b{font-size:clamp(10px,1vw,14px);margin-bottom:7px}
.footer-main a,.footer-main small,.footer-support{font-size:clamp(9px,.85vw,12px);color:#586576;line-height:1.46;margin:2px 0}
.footer-main a:hover{color:#b80d29}
.footer-main .brand img{height:auto}
.footer-support{margin-bottom:7px}
.footer-contact{display:flex;width:100%;height:30px}
.footer-contact input{min-width:0;flex:1;background:#fff;border:1px solid #cbd3df;padding:0 9px;font-size:11px;border-radius:3px 0 0 3px}
.footer-contact button{flex:0 0 31px;border:0;background:var(--red);color:#fff;cursor:pointer}
.footer-contact svg{width:16px;height:16px}
.socials{display:flex;gap:11px;margin-top:5px}
.socials a{display:inline-flex!important;align-items:center;justify-content:center;width:18px;height:18px;background:#314966;color:#fff!important;border-radius:2px;font-size:11px!important;font-weight:800}
.footer-end{border-top:1px solid #e5eaf0;display:flex;justify-content:space-between;gap:12px;font-size:clamp(9px,.8vw,11px);color:#7a8593;padding:11px 0 19px}
.contact-dialog{border:1px solid #d8e0ea;border-radius:9px;box-shadow:0 30px 100px #04182a80;padding:0;max-width:min(760px,calc(100% - 28px));max-height:90vh;overflow:auto;color:var(--navy)}
.contact-dialog::backdrop{background:#07192d91}
.dialog-close{position:sticky;top:8px;left:calc(100% - 48px);z-index:1;margin:8px 8px -40px auto;display:block;border:0;background:#f3f5f7;color:var(--navy);width:32px;height:32px;font-size:23px;cursor:pointer;border-radius:50%}
.contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:27px;padding:45px 32px 30px}
.contact-layout>div>p:not(.eyebrow){color:#59697a;margin:0 0 11px;font-size:13px;line-height:1.45}
.contact-layout label{display:block;font-size:12px;font-weight:700;margin-bottom:10px}
.contact-layout input,.contact-layout select,.contact-layout textarea{width:100%;border:1px solid #cad5e2;border-radius:3px;padding:10px;margin-top:4px;background:#fff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#form-result{font-size:12px;color:#a3162a;line-height:1.4;margin-top:10px}
@media(max-width:1000px) and (min-width:701px){
 .nav{gap:11px}.header-inner{gap:12px}
 .header-cta{padding:0 13px}
 .shell{width:calc(100% - 104px)}
 .catalogue .btn{font-size:10px;padding:0 11px}
}
@media(max-width:700px){
 html{scroll-padding-top:65px}
 body{width:100%;max-width:none;box-shadow:none}
 .shell{width:calc(100% - 34px)}
 .site-header{height:66px}
 .header-inner{gap:10px}
 .brand{width:150px}
 .brand img{height:57px}
 .nav{display:none;position:absolute;z-index:30;top:66px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 18px 14px;box-shadow:0 12px 21px #061c3440}
 .nav.open{display:flex}
 .nav a{width:100%;padding:12px 5px;font-size:15px;border-bottom:1px solid #eef2f6}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:5px;color:var(--navy);margin-left:auto;width:40px;height:40px}
 .menu-toggle svg{height:27px;width:27px}
 .header-cta{display:none}
 .hero{min-height:610px;height:auto;overflow:hidden}
 .hero-content{min-height:610px;display:block;padding-top:31px}
 .hero-copy{width:100%;max-width:360px;padding:0;position:relative;z-index:2}
 .hero .eyebrow{font-size:10px;line-height:1.3;margin-bottom:22px;letter-spacing:.03em}
 .hero h1{font-size:clamp(37px,10vw,46px);letter-spacing:-.04em;line-height:1.04;max-width:350px;margin-bottom:14px}
 .hero .lead{font-size:14.5px;line-height:1.46;max-width:344px;margin-bottom:19px;color:#35475c}
 .hero .actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
 .hero .btn{height:44px;min-height:44px;padding:0 16px;font-size:12px;box-shadow:0 2px 4px #152e4a10}
 .hero .btn-red{min-width:190px}
 .hero .btn-outline{min-width:206px}
 .hero-scene{inset:auto 0 0 0;height:62%;background-size:auto 325px;background-position:73% bottom;background-repeat:no-repeat;background-color:#eff4fa}
 .hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#f1f5fb 0%,#edf3f9 37%,transparent 71%);}
 .hero-motto{display:none}
 .features-grid{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:13px 0;gap:0}
 .features article{padding:11px 7px!important;border:0;min-height:72px}
 .features article:nth-child(odd){border-right:1px solid #cdd6df}
 .features article:nth-child(-n+2){border-bottom:1px solid #e3e8ee}
 .features svg{width:32px;height:32px}
 .features b{font-size:11.5px}
 .features span{font-size:10px;margin-top:3px}
 .section{padding:29px 0}
 .section-heading{gap:10px;margin-bottom:14px}
 .section-heading h2{font-size:26px}
 .section-heading p{font-size:12.5px;line-height:1.4}
 .section-heading .text-link{font-size:10px;align-self:flex-start;margin-top:9px}
 .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .product-card img,.resource-card-icon{height:142px;padding:8px}
 .product-card>span{font-size:12px;min-height:33px;padding:0 8px 8px}
 .catalogue{height:auto}
 .catalogue-inner{grid-template-columns:1fr;gap:0;padding-top:29px}
 .catalogue h2{font-size:26px}
 .catalogue p{font-size:13px;max-width:360px}
 .catalogue .btn{height:42px;min-height:42px;padding:0 11px;font-size:11px}
 .catalogue-art{height:230px;margin-top:5px}
 .catalogue-page-right strong{font-size:12px}
 .catalogue-cover .cover-brand{font-size:26px}
 .catalogue-cover .cover-subtitle{font-size:8px}
 .catalogue-cover .cover-caption{font-size:10px}
 .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .industry-photo{height:100px}
 .industries-grid span{font-size:11px;min-height:34px}
 .about{grid-template-columns:1fr}
 .about-photo{height:190px}
 .about-copy{grid-template-columns:1fr;gap:15px;padding:24px 18px}
 .about h2{font-size:25px}
 .about-copy p{font-size:13px}
 .about-list{grid-template-columns:1fr;gap:12px}
 .about-list b{font-size:13px}
 .about-list small{font-size:11px}
 .quote-inner{padding:17px 0;gap:12px;flex-direction:column;align-items:flex-start}
 .quote-inner h2{font-size:23px}
 .quote-inner p{font-size:12px}
 .quote-inner .btn{height:42px;min-height:42px}
 .footer-main{grid-template-columns:repeat(2,1fr);padding:26px 0;gap:20px}
 .footer-main>.brand{grid-column:1/-1}
 .footer-main b{font-size:13px}
 .footer-main a,.footer-main small,.footer-support{font-size:11px}
 .footer-main>div:last-child{grid-column:1/-1}
 .footer-contact{max-width:360px;height:36px}
 .footer-end{flex-direction:column;padding:12px 0 22px}
 .contact-layout{display:block;padding:40px 19px 20px}
 .contact-layout>div{margin-bottom:23px}
 .form-grid{grid-template-columns:1fr;gap:0}
}
@media(max-width:360px){
 .hero{min-height:630px}.hero-content{min-height:630px}
 .hero h1{font-size:36px}
 .hero-scene{background-position:71% bottom;background-size:auto 305px}
 .hero .actions{gap:7px}
 .features article{padding:9px 4px!important}
 .features svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Final responsive reference correction: keep the mobile hero image readable while reserving live content space. */
@media(max-width:700px){.hero-scene{background-position:72% bottom;background-size:auto 325px}.hero .actions{position:relative;z-index:3}.hero-copy{max-width:365px}.hero .lead{max-width:335px}.features{position:relative;z-index:1}}
@media(min-width:701px){.hero-scene{background-position:52% center}.catalogue-cover{box-shadow:6px 12px 19px #152d4440}}
