/* WestH2 site-wide colour system, applied after the retained template styles. */
*{--primary-color:#0785b4;--primary-color-rgb:7,133,180;--bg-dark-1:#292b48;--bg-dark-1-rgb:41,43,72;--bg-dark-2:#20243c;--bg-dark-3:#343853;--bg-light:#f1f7fb;--body-font-color:#526575;--heading-font-color:#292b48;--bg-color-even:#eaf3f8;--bg-color-odd:#f5f9fc;--border-color:#cfdfeb;--btn-color:#fff}
body{color:#526575;background:#fff}
#content .subtitle{color:#0785b4;font-weight:600}
#content .bg-dark .subtitle,#content .text-light .subtitle{color:#91d3ef}
#content .bg-dark .id-color,footer .id-color,#content .text-light .id-color{color:#91d3ef!important}
#content h2 .op-3{opacity:1;color:#548ba7}
#content .bg-dark h2 .op-3,#content .text-light h2 .op-3{color:#91d3ef}
#content .bg-light{background:#f1f7fb!important}
#content .btn-main{background:#0785b4;color:#fff;border:1px solid #0785b4;border-radius:4px}
#content .btn-main:hover{background:#292b48;color:#fff;border-color:#292b48}
#content .btn-main span{color:inherit}
#content .bg-color{background:#0785b4!important}
#content .bg-color.text-dark,#content .bg-color .text-dark,#content .bg-color h1,#content .bg-color h2,#content .bg-color h3,#content .bg-color h4,#content .bg-color p{color:#fff!important}
#content .bg-color img[src*="up-right-arrow.webp"]{filter:brightness(0) invert(1)}
#content .ul-check li:before{color:#0785b4}
#content .accordion-section-title:hover,#content .accordion-section-title.active{color:#0785b4}
#content .accordion-section-title{border-color:#d7e5ee}
#content .accordion-section-title:before{color:#0785b4}
#content .owl-dot.active span{background:#0785b4!important}
#back-to-top{background:#0785b4;color:#fff}
#back-to-top:before{color:#fff}
footer.section-dark{background:#292b48;color:#cfdfeb}
footer.section-dark h3,footer.section-dark h4,footer.section-dark h5{color:#fff}
footer.section-dark a:hover{color:#91d3ef}
footer .subfooter{background:#20243c;border-top:1px solid #51607755}
.west-inner .eyebrow,.west-inner .number,.west-inner .contact-details a{color:#0785b4}
.west-inner .detail-hero,.west-inner .brochure{background:#f1f7fb}
.west-inner .solution{border-color:#d7e5ee;background:#fff;transition:border-color .2s,background .2s}
.west-inner .solution:hover{border-color:#43a9d8;background:#f1f8fc}
.west-inner form{border-color:#d7e5ee;background:#fff;box-shadow:0 8px 28px #243f5510}
.west-inner input,.west-inner textarea,.west-inner select{border-color:#bdcedd;color:#292b48}
.west-inner input:focus,.west-inner textarea:focus,.west-inner select:focus{outline:2px solid #43a9d8;outline-offset:2px;border-color:#0785b4}
.west-inner .consent input{accent-color:#0785b4}
.west-inner form .btn-main{color:#fff}
.west-inner .text-link{color:#0785b4}
/* Staggered text reveal follows the beginning of the photographic dissolve. */
.west-hero .swiper-slide-active .sw-caption{animation:none!important}
.west-hero .sw-caption .subtitle,.west-hero .sw-caption h1,.west-hero .sw-caption h2,.west-hero .sw-caption p,.west-hero .sw-caption .hero-project-cta{will-change:opacity,transform}
.west-hero .swiper-slide-active .sw-caption .subtitle{animation:westHeroTextReveal 650ms cubic-bezier(.2,.65,.25,1) 400ms both!important}
.west-hero .swiper-slide-active .sw-caption h1,.west-hero .swiper-slide-active .sw-caption h2{animation:westHeroTextReveal 750ms cubic-bezier(.2,.65,.25,1) 550ms both!important}
.west-hero .swiper-slide-active .sw-caption p{animation:westHeroTextReveal 700ms cubic-bezier(.2,.65,.25,1) 700ms both!important}
.west-hero .swiper-slide-active .sw-caption .hero-project-cta{animation:westHeroTextReveal 650ms cubic-bezier(.2,.65,.25,1) 850ms both!important}
@keyframes westHeroTextReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.west-hero .swiper-slide-active .sw-caption .subtitle,.west-hero .swiper-slide-active .sw-caption h1,.west-hero .swiper-slide-active .sw-caption h2,.west-hero .swiper-slide-active .sw-caption p,.west-hero .swiper-slide-active .sw-caption .hero-project-cta{animation:none!important;opacity:1!important;transform:none!important}}
/* One height and icon treatment for every action button, including the navbar CTA. */
:root{--west-button-height:46px}
body #content .btn-main,body .brand-header #brand-navigation>.brand-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:14px;height:var(--west-button-height)!important;min-height:var(--west-button-height)!important;max-height:var(--west-button-height)!important;padding:0 18px!important;line-height:1.25!important;font-size:13px!important;font-weight:600;box-sizing:border-box;vertical-align:middle;white-space:nowrap}
body #content .btn-main>.button-label,body .brand-cta>.button-label{display:inline!important;position:static!important;transform:none!important;opacity:1!important;line-height:1.25!important}
body #content .btn-main>.button-icon,body .brand-cta>.button-icon{display:block;width:18px;height:18px;flex:0 0 18px;color:inherit}
@media(max-width:1023px){:root{--west-button-height:48px}}
@media(max-width:360px){body #content .btn-main,body .brand-header #brand-navigation>.brand-cta{gap:10px;padding-left:12px!important;padding-right:12px!important;font-size:12px!important}}
body #content .btn-main,body .brand-header #brand-navigation>.brand-cta{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s!important}
/* Compact brochure banner, independent of the source image's aspect ratio. */
#content .brochure-banner .relative{height:320px}
#content .brochure-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 62%}
#content .brochure-banner .absolute.abs-middle{top:50%;transform:translateY(-50%)}
#content .brochure-banner .bg-dark{opacity:.24}
@media(max-width:767px){#content .brochure-banner .relative{height:230px}}
@media(max-width:480px){#content .brochure-banner .relative{height:200px}}

/* Readable text on brand surfaces, including carousel captions. */
#content .bg-color{background:#007da9!important;color:#fff}
#content .bg-color .item>span,#content .bg-color .subtitle,#content .bg-color .id-color{color:#fff!important;opacity:1}
#content .subtitle,.west-inner .eyebrow,.west-inner .number,.west-inner .contact-details a,.west-inner .text-link{color:#00779f}
#content .btn-main,body .brand-header #brand-navigation>.brand-cta{background:#007da9;border-color:#007da9}
.west-hero .btn-main{background:#007da9!important}
#content .bg-color .owl-dots .owl-dot{width:36px;height:44px;margin:0;background:transparent!important;position:relative;border-radius:4px}
#content .bg-color .owl-dots .owl-dot:after{content:'';display:block;width:9px;height:9px;border:2px solid white;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent}
#content .bg-color .owl-dots .owl-dot.active:after{background:white}
#content .owl-dot:focus-visible{outline:2px solid #fff;outline-offset:1px}
html{scroll-padding-top:110px}
#content [id]{scroll-margin-top:110px}

@media(max-width:767px){
 /* Keep the longest slide below the floating header, even in landscape. */
 .west-hero .v-center{min-height:680px;min-height:max(680px,100svh)}
 .west-hero .swiper{height:680px!important;height:max(680px,100svh)!important}
 .west-hero .sw-caption{top:calc(50% + 12px)}
 .west-hero .sw-caption h1,.west-hero .sw-caption h2{font-size:clamp(34px,9.5vw,52px)!important;line-height:1.12;letter-spacing:-1.4px}
 .west-hero .sw-caption p{font-size:16px;line-height:1.6}
 .west-hero .hero-pause{min-width:64px;min-height:44px;bottom:20px;left:20px}
 .west-hero .swiper-button-prev,.west-hero .swiper-button-next{width:44px;height:44px;bottom:20px}
 .west-hero .swiper-button-prev{right:74px}
 body:not(.west-inner) #content>section:not(.west-hero):not(.p-0):not(.no-top){padding-top:52px;padding-bottom:52px}
 #content .half-fluid .image{height:240px;min-height:240px}
 #content .half-fluid .py-5.my-5{padding:36px 0!important;margin:0!important}
 #content .half-fluid h3{font-size:25px;line-height:1.4}
 #content .half-fluid .owl-dots{margin-top:16px}
 #content #project-single-carousel .p-40{padding:24px}
 #content #project-single-carousel .hover-mh-60{height:auto;max-height:none;opacity:1;transform:none}
 #content #project-single-carousel .gradient-edge-bottom{height:85%;background:linear-gradient(0deg,#16283bf2,transparent)}
 .west-inner .section{padding-top:40px;padding-bottom:40px}
 .west-inner .detail-hero>img{height:240px}
 .west-inner .lead{font-size:18px;line-height:1.6}
 .west-inner h1{font-size:clamp(34px,8.8vw,44px);overflow-wrap:break-word}
 .west-inner form h2{font-size:28px;line-height:1.2}
 .west-inner .detail-hero>*,.west-inner .detail-body>*,.west-inner .contact-layout>*,.west-inner .form-grid>*{min-width:0}
 .west-inner input,.west-inner select,.west-inner textarea{font-size:16px;min-height:48px}
 .west-inner .consent input{min-height:20px;width:20px;height:20px}
 .west-inner .form-grid{gap:0}
 .west-inner form .btn-main{width:100%}
 .west-inner .brochure{gap:20px}
 footer.section-dark{padding-top:48px;padding-bottom:0}
 footer a{display:inline-block;min-height:32px;overflow-wrap:anywhere}
}
@media(min-width:768px) and (max-width:1023px){
 .west-inner input,.west-inner select,.west-inner textarea{font-size:16px;min-height:48px}
 .west-inner .consent input{min-height:20px;width:20px;height:20px}
}
@media(max-width:767px){
 /* Reveal content immediately while scrolling; retain the hero text animation. */
 #content>section:not(.west-hero) .wow{visibility:visible!important;opacity:1!important;animation:none!important}
 .west-inner input,.west-inner select,.west-inner textarea{scroll-margin-top:120px;scroll-margin-bottom:30px}
}
@media(min-width:768px) and (max-width:1023px) and (max-height:600px){
 .west-hero .v-center{min-height:640px}
 .west-hero .swiper{height:640px!important}
 .west-hero .sw-caption h1,.west-hero .sw-caption h2{font-size:52px!important;line-height:1.12}
 .west-hero .sw-caption p{max-width:640px}
 .west-hero .hero-pause{min-height:44px;bottom:20px}
 .west-hero .swiper-button-prev,.west-hero .swiper-button-next{bottom:20px;width:44px;height:44px}
}

/* Compact inner-page masthead and coordinated content layouts. */
body.west-inner .inner-content{padding-top:160px!important}
.west-inner .page-hero{position:relative;padding:38px 0 40px;background:#202e49;color:white;overflow:hidden;isolation:isolate}
.west-inner .page-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#182b45fa 15%,#183b56db 65%,#16445cba),url('/assets/hydrogen-plant-bluehour.jpg') center 55%/cover}
.west-inner .page-hero:after{content:'';position:absolute;width:360px;height:360px;right:7%;top:-140px;border:1px solid #74d0ee35;border-radius:50%;pointer-events:none}
.west-inner .page-hero-inner{width:100%;max-width:1200px;margin:auto;padding:0 15px;position:relative;z-index:1}
.west-inner .page-hero h1{font-size:48px;line-height:1.12;letter-spacing:-1.5px;color:#fff;margin:15px 0 20px;max-width:950px}
.west-inner .page-hero ol{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:0;margin:0;list-style:none;font-size:13px;line-height:1.6;color:#daedf7}
.west-inner .page-hero li+li:before{content:'›';margin-right:14px;color:#86cce8}
.west-inner .page-hero a{color:#daedf7;text-decoration:none}
.west-inner .page-hero a:hover{text-decoration:underline;color:white}
.west-inner .page-hero [aria-current]{color:#fff}
.page-hero-line{height:3px;width:44px;background:#4cc3ea;border-radius:2px}
.west-inner .page-content-title{font-size:44px;line-height:1.15;letter-spacing:-1.2px;margin-bottom:22px}
.west-inner .page-intro{min-height:0}
.west-inner .detail-hero{background:white}
.west-inner .detail-hero>img{height:370px;border-radius:8px}
.west-inner .detail-body{border-top:1px solid #dce8ef}
.west-inner .eyebrow{font-size:12px;letter-spacing:.1em;margin-bottom:15px}
.west-inner .about-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}
.west-inner .inner-photo{position:relative;overflow:hidden;border-radius:8px;background:#202e49}
.west-inner .inner-photo img{display:block;width:100%;height:340px;object-fit:cover}
.west-inner .inner-photo span{display:block;padding:16px 20px;color:#fff;font-size:14px}
.west-inner .solution-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.west-inner a.solution{position:relative;display:block;padding:28px;color:#526575;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.west-inner a.solution:hover{box-shadow:0 10px 26px #173d5410;border-color:#0785b4}
.west-inner .solution-thumb{display:block;width:calc(100% + 56px);max-width:none;height:190px;object-fit:cover;margin:-28px -28px 24px}
.west-inner .solution h3{color:#292b48;font-size:27px;line-height:1.2}
.west-inner .solution .arrow{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #c5e0ed;border-radius:50%;color:#00779f;margin-top:8px}
.west-inner .checks{list-style:none;padding:0}
.west-inner .checks li{position:relative;padding-left:28px;margin-bottom:16px}
.west-inner .checks li:before{content:'✓';position:absolute;left:0;color:#00779f;font-weight:700}
.west-inner .stats,.west-inner .product-specs{gap:20px}
.west-inner .stats>div{padding:18px;background:#eff7fb;border-radius:6px;flex:1 1 180px}
.west-inner .stats strong{font-size:25px}
.west-inner .product-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0}
.west-inner .product-specs>div{padding:28px 24px;background:#eff7fb;border:1px solid #d5e7f0;border-radius:6px}
.west-inner .product-specs strong{display:block;font-size:27px;line-height:1.3;color:#292b48;margin-bottom:10px}
.west-inner .product-specs span{font-size:14px}
.west-inner .application-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.west-inner .inner-next-step{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#eff7fb;border-top:3px solid #2eacd3;border-radius:8px;margin-bottom:65px;padding:38px!important;max-width:1170px}
.west-inner .inner-next-step h2{font-size:32px;line-height:1.2;margin-bottom:12px}
.west-inner .inner-next-step p{max-width:680px;margin-bottom:0}
.west-inner .inner-next-step .eyebrow{margin-bottom:12px}
.west-inner .inner-next-step .btn-main{flex-shrink:0}
.west-inner .contact-layout{gap:60px}
.west-inner .contact-layout>div{padding:28px;background:#eff7fb;border-radius:8px}
.west-inner .contact-layout .page-content-title{font-size:35px}
.west-inner .contact-details{border-top:1px solid #ccdfeb;padding-top:15px;margin-top:22px}
.west-inner .contact-layout form{padding:32px}
.west-inner .contact-layout form h2{font-size:32px;line-height:1.15}
.west-inner .upcoming{max-width:900px;margin:0 auto;padding-top:65px;padding-bottom:65px}
.west-inner .upcoming .lead{font-size:19px}
@media(max-width:1023px){
 body.west-inner .inner-content{padding-top:113px!important}
 .west-inner .about-intro{gap:30px}
 .west-inner .inner-next-step{margin-left:24px;margin-right:24px;width:auto}
}
@media(max-width:767px){
 .west-inner .page-hero{padding:26px 0 28px}
 .west-inner .page-hero-inner{padding:0 20px}
 .west-inner .page-hero h1{font-size:34px;letter-spacing:-.8px;margin:12px 0 16px}
 .west-inner .page-hero ol{font-size:12px;gap:6px 10px}
 .west-inner .page-hero li+li:before{margin-right:10px}
 .west-inner .page-content-title{font-size:32px;letter-spacing:-.8px}
 .west-inner .about-intro{grid-template-columns:1fr;gap:24px}
 .west-inner .inner-photo img{height:230px}
 .west-inner .detail-hero>img{height:230px}
 .west-inner .solution-grid,.west-inner .application-links,.west-inner .product-specs{grid-template-columns:1fr;gap:18px}
 .west-inner a.solution{padding:24px}
 .west-inner .solution-thumb{width:calc(100% + 48px);height:175px;margin:-24px -24px 20px}
 .west-inner .solution h3{font-size:25px}
 .west-inner .product-specs>div{padding:22px}
 .west-inner .inner-next-step{flex-direction:column;align-items:flex-start;gap:24px;margin:0 20px 40px;padding:28px 24px!important;border-radius:6px}
 .west-inner .inner-next-step h2{font-size:28px}
 .west-inner .contact-layout{gap:24px}
 .west-inner .contact-layout>div{padding:24px}
 .west-inner .contact-layout .page-content-title{font-size:30px}
 .west-inner .contact-layout form{padding:22px}
 .west-inner .contact-layout form h2{font-size:27px}
 .west-inner .contact-details a{font-size:17px;overflow-wrap:anywhere}
 .west-inner .upcoming{padding-top:40px;padding-bottom:40px}
}
.west-inner .detail-hero>img[src*="electrolyser-brochure"]{object-fit:contain;background:#f2f7fa;padding:18px;border:1px solid #dce8ef}

/* Header remains in normal document flow and scrolls with the page. */
body header.brand-header,body.west-inner header.brand-header,body header.brand-header.header-mobile,body header.brand-header.smaller{
 position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:10px auto 18px!important;padding-top:0!important;padding-bottom:0!important
}
body.west-inner .inner-content{padding-top:0!important}
html{scroll-padding-top:20px}
#content [id]{scroll-margin-top:20px}
@media(max-width:1023px){
 body header.brand-header,body.west-inner header.brand-header,body header.brand-header.header-mobile,body header.brand-header.smaller{margin-bottom:10px!important}
}
/* Separate the breadcrumb row clearly from the page title. */
.west-inner .page-hero h1{margin-top:28px!important}
@media(max-width:767px){.west-inner .page-hero h1{margin-top:24px!important}}
/* Clean header surround. */
body header.brand-header,body.west-inner header.brand-header,body header.brand-header.header-mobile,body header.brand-header.smaller{border:0!important;box-shadow:none!important}
.technical-flow{border-top:1px solid #dce8ef}
.technical-flow>h2{font-size:36px;line-height:1.2}
.technical-flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:32px 0}
.technical-flow-steps li{position:relative;background:#eff7fb;border:1px solid #c9e1ed;border-radius:6px;padding:24px}
.technical-flow-steps li+li:before{content:'→';position:absolute;left:-23px;top:33px;color:#00779f;font-size:22px}
.technical-flow-steps li>span{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#007da9;color:white;width:40px;height:40px;font-size:13px;font-weight:600;margin-bottom:18px}
.technical-flow-steps h3{font-size:21px;line-height:1.3}
.technical-flow-steps p{font-size:14px;line-height:1.6;margin:0}
@media(max-width:991px){.technical-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.technical-flow-steps li:before{display:none}}
@media(max-width:600px){.technical-flow>h2{font-size:29px}.technical-flow-steps{grid-template-columns:1fr;gap:20px}.technical-flow-steps li+li:before{display:block;content:'↓';top:-24px;left:36px;font-size:18px}.technical-flow-steps li{padding:22px}}
/* Override the demo template's hidden .success notification. */
#enquiry-form #form-status:not(:empty){display:block!important;margin:20px 0 0;padding:16px;border-radius:5px;line-height:1.6;font-size:15px;overflow-wrap:anywhere;scroll-margin:30px}
#enquiry-form #form-status.success{background:#e8f7ee;color:#125b39;border:1px solid #a2d7b9}
#enquiry-form #form-status.error{background:#fff0f0;color:#9a2626;border:1px solid #e7b5b5}