/* Extra sections (Who we are -> Footer). Everything is scoped inside .tpl so it never touches the old styles. Colours: top of this file. */
.tpl{
/* ===== COLOURS ===== */
&{font-family:'Poppins',sans-serif;color:var(--ink);--g1:#008088;--g2:#4fd0d6;--accent:#00767e;--d1:#00474d;--d2:#007a82;--d3:#00282c;--tint:#e6f4f5;--ink:#111;--mute:#444;--sage:#cfe5e6;--ph:#e4e9e8}

img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}
.tw{max-width:2200px;margin:0 auto;padding:0 96px}
section{padding:60px 0}
h2.title{font-size:60px;font-weight:700;margin:0;position:relative;padding-bottom:22px}
h2.title::after{content:"";position:absolute;left:3px;bottom:0;width:105px;height:10px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.head{display:flex;gap:90px;align-items:flex-start;margin-bottom:40px}
.head p{max-width:420px;margin:6px 0 0;font-size:18px;line-height:1.6;color:var(--mute)}
.pill{background:#e9e9e9;border-radius:22px;padding:18px 30px;font-size:30px;font-weight:500;color:#2b2b2b;white-space:nowrap}
/* Add an image inside each frame to replace its placeholder. */
.frame{background:var(--ph);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#7a8785;font-size:14px;text-align:center}
.frame:empty::before{content:attr(data-size) "\A Image placeholder";white-space:pre;line-height:1.6}
.frame img{position:absolute;inset:0}
.arrow{display:inline-flex;width:34px;height:26px;border:1.5px solid currentColor;align-items:center;justify-content:center;font-size:16px}
/* WHO WE ARE */
.tmission{display:grid;grid-template-columns:repeat(3,1fr);gap:100px;padding:0 18px}
.tmission .frame{aspect-ratio:471/357}
.tmission small{display:block;color:var(--accent);font-weight:600;font-size:19px;margin:36px 0 8px;padding-left:15px}
.tmission h3{font-size:34px;margin:0 0 18px;padding-left:15px}
.tmission p{margin:0;padding:0 40px 0 15px;font-size:19px;line-height:1.55;color:var(--mute)}
/* SOLUTIONS */
.vert{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcard{color:#fff;display:flex;flex-direction:column}
.vcard .txt{padding:44px 38px 38px;min-height:500px;display:flex;flex-direction:column}
.vcard h3{font-size:28px;margin:0 0 30px}.vcard p{margin:0 0 22px;font-size:17px;line-height:1.55}
.vcard ul{margin:0 0 20px;padding-left:25px;font-size:17px;line-height:1.8}.vcard li span,.vcard p span{color:#4fd0d6}
.vcard .arrow{margin-top:auto}.vcard .frame{height:320px}
.vcard:nth-child(1) .txt{background:var(--d1)}.vcard:nth-child(2) .txt{background:var(--d2)}.vcard:nth-child(3) .txt{background:var(--d3)}
/* SUB VERTICAL (4 cards) */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.four .frame{aspect-ratio:410/320}
.four .txt{background:var(--tint);padding:20px 20px 28px;min-height:300px;display:flex;flex-direction:column}
.four h3{font-size:30px;margin:12px 0 26px}.four p{margin:0 0 24px;font-size:17px;line-height:1.5}.four .arrow{margin-top:auto}
/* PRODUCTS */
.tabs{display:flex;justify-content:flex-end;gap:0;flex-wrap:wrap;margin:-50px 0 50px}
.tabs button{background:none;border:0;border-left:1px solid #bbb;padding:2px 20px;font:400 26px 'Poppins';color:#666;cursor:pointer;position:relative}
.tabs button:first-child{border:0}
.tabs button.on{color:#000;font-weight:600}.tabs button.on::after{content:"";position:absolute;left:20px;right:20px;bottom:-12px;height:3px;background:var(--g1)}
.prod{display:none;grid-template-columns:1.2fr 1fr;align-items:center;gap:0}.prod.on{display:grid}
.prod .frame{height:610px;margin-left:-96px}
.prod .info{padding:0 140px 0 170px}.prod h3{font-size:36px;line-height:1.35;margin:0 0 12px}
.prod p{margin:0 0 26px;font-size:20px;line-height:1.5}.prod a{color:var(--accent);font-weight:700;font-size:15px;text-transform:uppercase}
/* TESTIMONIALS */
.testi{background:var(--sage);overflow:hidden}
.testi .top{display:flex;justify-content:space-between;align-items:flex-start}
.tnav{display:flex;gap:30px;margin-top:70px}.tnav button{width:40px;height:40px;border-radius:50%;border:0;background:#5f9096;color:#fff;font-size:20px;cursor:pointer}
.track{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0 20px}
.tcard{flex:0 0 466px;min-height:536px;background:#fff;scroll-snap-align:start;position:relative;padding:58px 50px 40px 76px;display:flex;flex-direction:column}
.tcard::before{content:"";position:absolute;right:50px;top:0;width:36px;height:52px;background:linear-gradient(#f7931e,#e8620c);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.tcard:nth-child(even)::before{background:linear-gradient(#8e44ad,#5b21a8)}
.tcard .logo{height:70px;width:230px;margin-left:-20px;background:#fff}
.tcard .logo img{object-fit:contain;padding:8px;box-sizing:border-box}
.tcard blockquote{margin:22px 0 auto;font-size:19px;line-height:1.5;color:#222;max-height:215px;overflow:hidden}
.tcard b{display:block;font-weight:400;font-size:20px;margin-top:40px}.tcard small{font-size:12px;font-weight:700;line-height:1.5;display:block}
.tcard i{display:block;width:125px;height:3px;background:linear-gradient(90deg,#222,#f7931e);margin-top:14px}
/* WHY */
.why{padding:0;position:relative}
.why .dark{background:var(--d3);position:absolute;top:42px;bottom:0;left:calc(50% - 142px);right:0}
.why .in{position:relative;padding:42px 0 0}
.why .top{display:grid;grid-template-columns:722px 1fr;min-height:382px}
.why .top h2{margin-top:92px}
.iso{display:grid;grid-template-columns:1fr 1fr;color:#fff;padding:55px 0 0 60px;position:relative}
.iso::after{content:"";position:absolute;right:96px;top:-42px;width:55px;height:80px;background:linear-gradient(#f7931e,#e8620c);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.iso .c{text-align:center}.iso .c .frame{width:133px;height:100px;margin:0 auto 10px;border-radius:14px;background:#fff}
.iso .c .frame img{object-fit:contain;padding:6px;box-sizing:border-box}
.iso .c strong{font-size:56px;font-weight:300;display:block}.iso p{font-size:19px;line-height:1.5;margin:8px 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);color:#fff;margin-bottom:40px}
.tiles div{padding:78px 54px 64px;font-size:24px;line-height:1.5}
.tiles div:nth-child(1){background:#0b4a4f}.tiles div:nth-child(2){background:#1f7b81}.tiles div:nth-child(3){background:#007a82}.tiles div:nth-child(4){background:#00585e}
.tiles .frame{width:151px;height:151px;padding:0;border-radius:50%;background:#8fe3e8;margin-bottom:0}
.tiles .frame svg{display:block;width:128px;height:128px;flex-shrink:0}
/* CLIENTS + PARTNERS */
.logos{position:relative;padding:0 80px}
.lgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px 50px}
.lgrid .frame{height:130px;background:transparent;border:1.5px dashed #cfd6d4;border-radius:8px}
.lgrid .frame img{object-fit:contain;padding:14px;box-sizing:border-box}
.lgrid .frame:empty::before{content:"Logo"}
.arr{position:absolute;top:50%;width:40px;height:40px;border-radius:50%;border:0;background:#b9bfbe;color:#fff;font-size:20px;cursor:pointer;transform:translateY(-50%)}
.arr.l{left:-40px}.arr.r{right:-40px}
.dots{display:flex;justify-content:center;gap:9px;margin:50px 0 0}.dots i{width:16px;height:16px;border-radius:50%;background:#bbb}.dots i:first-child{width:48px;border-radius:9px;background:var(--g1)}
.ctabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 36px}
.ctabs button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;border:1px solid #cfd6d4;border-radius:5px;background:#fff;color:#394546;font:500 15px 'Poppins';line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.ctabs button:hover{border-color:var(--g1);background:#f0f8f8;color:var(--d1)}
.ctabs button.on{border-color:var(--d1);background:var(--d1);color:#fff}
.ctabs button:focus-visible{outline:3px solid var(--g2);outline-offset:2px}
/* AWARDS */
.awards{background:linear-gradient(90deg,#fff,#cfe5e6);padding:20px 0 70px}
.abox{position:relative;margin-top:40px;border:19px solid;border-image:linear-gradient(90deg,#008088,#5a6be0 60%,#7a2fbd) 1;padding:70px 56px 90px;background:rgba(255,255,255,.55)}
.abox h2{position:absolute;top:-62px;left:285px;background:#f1f6f5;padding:0 20px;font-size:clamp(40px,5vw,72px);font-weight:700;margin:0;line-height:1.1}
.abox .tnav{position:absolute;right:100px;top:-8px;margin:0;gap:18px}.abox .tnav button{width:36px;height:36px;background:#86aab0}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.agrid .frame{width:90px;height:90px;background:transparent;border:1.5px dashed #aab5b3;border-radius:6px;margin-bottom:18px}
.agrid h3{font-size:34px;line-height:1.45;margin:0;padding-bottom:26px;border-bottom:1px solid #bbb;font-weight:500}
.agrid p{font-size:19px;line-height:1.6;margin:26px 0 0 3px;color:#222}
.trophy{position:absolute;right:30px;bottom:-110px;width:200px;height:230px}
.trophy.frame{background:transparent;border:1.5px dashed #aab5b3}
/* MAP */
.mapbar{background:#006970;color:#fff;display:flex;align-items:center;gap:70px;padding:28px 68px 40px}
.mapbar h2{font-size:clamp(36px,4.4vw,60px);font-weight:500;margin:0;position:relative;padding-bottom:12px}
.mapbar h2::after{content:"";position:absolute;left:3px;bottom:0;width:95px;height:9px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.mapbar p{font-size:18px;line-height:1.5;max-width:520px;margin:0}
.mapbar a{margin-left:auto;border:1px solid #fff;border-radius:8px;padding:12px 18px;font-size:18px}
.map{height:700px;background:#dcecee}.map.frame:empty::before{content:"Map placeholder (Leaflet, Google Maps, or image)"}
/* CTA + FOOTER */
.tcta{background:#00282c;color:#fff;text-align:center;padding:90px 20px 110px;position:relative;overflow:hidden}
.tcta h2{font-size:56px;margin:0 0 14px;font-weight:600}.tcta p{font-size:30px;margin:0 0 30px;font-weight:300}
.tcta a{display:inline-block;background:linear-gradient(90deg,#4fd0d6,#007a82);padding:15px 20px;border-radius:6px;font-weight:700;font-size:20px;color:#fff}
.foot{background:var(--tint);padding:70px 96px 40px;display:grid;grid-template-columns:1.6fr 1fr .5fr;gap:60px;font-size:22px}
.foot .logo{height:44px;width:200px;margin-bottom:24px}.foot p{margin:0 0 18px;line-height:1.6}.foot .soc{display:flex;gap:6px;margin-bottom:22px}
.foot .soc span{width:32px;height:32px;border:1.5px solid #222;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:26px}
.foot .copy{grid-column:1/-1;color:#566668;margin:0}
@media(max-width:1100px){.logos{padding:0 20px}.lgrid{grid-template-columns:repeat(2,1fr);gap:20px}.arr{display:none}.ctabs{gap:8px;margin:16px 0 28px}.ctabs button{min-height:40px;padding:8px 12px;font-size:14px}.agrid{grid-template-columns:1fr}.abox{padding:60px 20px}.abox h2{left:20px}.abox .tnav,.trophy{display:none}.mapbar{flex-direction:column;align-items:flex-start;gap:14px;padding:28px 24px}.mapbar a{margin:0}.map{height:420px}.foot{grid-template-columns:1fr;padding:50px 24px}.tw{padding:0 24px}.head{flex-direction:column;gap:18px}.tmission,.vert,.four,.tiles{grid-template-columns:1fr;gap:32px}.tabs{margin:20px 0;justify-content:flex-start}.tabs button{font-size:16px;padding:6px 12px}.prod.on{grid-template-columns:1fr}.prod .frame{margin:0;height:320px}.prod .info{padding:24px 0}.why .dark{display:none}.why .top{grid-template-columns:1fr}.why .top h2{margin-top:30px}.iso{background:var(--d3);padding:30px;grid-template-columns:1fr}.tcard{flex-basis:85%}.pill{font-size:22px}.tiles div{padding:40px 30px}.testi .tnav{margin-top:0}}
}

.tpl #about h2.title{font-size:40px;padding-bottom:18px}.tpl #about h2.title::after{width:70px;height:7px}
@media(min-width:1101px){.tpl .tmission{grid-template-columns:repeat(3,1fr);gap:105px;padding:0 38px}}
.tpl .abox h2{font-size:75px}
.tpl .mapbar h2{font-size:59px}
/* ===== CTA (height 395) ===== */
.tpl .tcta{height:395px;padding:84px 20px 0!important;box-sizing:border-box;position:relative;overflow:hidden}
.tpl .tcta h2{font-size:50px;line-height:62px;margin:0 0 13px;position:relative}
.tpl .tcta p{font-size:30px;line-height:45px;margin:0 0 18px;position:relative}
.tpl .tcta a{width:160px;height:59px;line-height:59px;padding:0;border-radius:6px;font-size:20px;position:relative}
.tpl .tcta svg.ic{position:absolute;fill:none;stroke:#0d5a5f;stroke-width:1.5;opacity:.9}
/* ===== FOOTER (height 473) ===== */
.tpl .foot{display:block;position:relative;height:473px;padding:0;font-size:22px;box-sizing:border-box}
.tpl .foot .fl{position:absolute;left:96px;top:80px;width:calc(56% - 140px)}
.tpl .foot .fl .logo{width:168px;height:40px;margin:0 0 24px}
.tpl .foot .fl p{font-size:22px;line-height:36px;margin:0}
.tpl .foot .fm{position:absolute;left:56%;top:94px}
.tpl .foot .soc{display:flex;gap:10px;margin:0 0 17px}.tpl .foot .soc span{width:33px;height:33px}
.tpl .foot .fm p{font-size:22px;line-height:30px;margin:0 0 19px;color:#333}.tpl .foot .fm p:nth-of-type(3),.tpl .foot .fm p:nth-of-type(4){margin-bottom:30px}
.tpl .foot .fr{position:absolute;left:85%;top:80px}.tpl .foot .fr li{font-size:22px;line-height:30px;margin:0 0 30px}
.tpl .foot .copy{position:absolute;left:96px;bottom:24px;font-size:22px;line-height:30px;margin:0}
@media(max-width:1100px){.tpl .tcta{height:auto;padding:60px 20px!important}.tpl .tcta svg.ic{display:none}.tpl .foot{height:auto;padding:50px 24px}.tpl .foot>div,.tpl .foot>ul,.tpl .foot>p{position:static!important;width:auto!important;margin-bottom:24px}.tpl #about h2.title{font-size:32px}.tpl .tmission{padding:0}}
.tpl .foot .fl .flogo{height:44px;width:auto;margin:0 0 20px;mix-blend-mode:multiply}
.tpl{overflow-x:clip}

/* ===== PRODUCTS: title left, tabs right (like reference) ===== */
.tpl .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:76px}
.tpl .tabs{margin:70px 0 0;flex-wrap:nowrap;justify-content:flex-end}
.tpl .tabs button{font-size:24px;padding:2px 20px;white-space:nowrap;line-height:1.4}
.tpl .tabs button.on::after{bottom:-8px}
.tpl .prod .info h3{font-size:36px;line-height:48px;margin:0 0 12px}
.tpl .prod .info p{font-size:20px;line-height:30px;margin:0 0 20px}
.tpl .prod .info a{font-size:15px}
@media(min-width:1101px){
 .tpl .prod.on{grid-template-columns:58.2% 1fr}
 .tpl .prod .info{padding:0 57px 0 171px}
}
@media(max-width:1100px){.tpl .phead{flex-direction:column;gap:0;margin-bottom:30px}.tpl .tabs{margin:10px 0 0;flex-wrap:wrap;justify-content:flex-start}.tpl .tabs button{font-size:16px;padding:6px 12px}.tpl .prod .info{padding:24px 0}}

/* ===== FOOTER: match original exactly ===== */
.tpl .foot .fl{width:712px}
.tpl .foot .fl p,.tpl .foot .fm p,.tpl .foot .fr li{font-size:24px}
.tpl .foot .fl p{color:#111}
.tpl .foot .fm{left:1076px;top:93px}.tpl .foot .fr{left:1633px}
.tpl .foot .soc{gap:7px;margin:0 0 15px;height:36px}.tpl .foot .soc span{display:none}
.tpl .foot .soc svg{display:block}
.tpl .foot .fm p{margin:0 0 21px;color:#222}
.tpl .foot .fm p:nth-of-type(2),.tpl .foot .fm p:nth-of-type(3){margin-bottom:30px}
.tpl .foot .fm p:nth-of-type(4){margin-bottom:0}
.tpl .foot .copy{font-size:23px}
.tpl .fbar{height:9px;background:linear-gradient(90deg,#00282c 0%,#f7931e 20%,#fbd9b0 50%,#d9c4ee 50%,#8a3fc7 85%,#1c0a2e 100%)}
.tpl .fdark{height:56px;background:#00282c}
@media(max-width:1100px){.tpl .foot .fl{width:auto}.tpl .foot .fm,.tpl .foot .fr{left:auto}}

/* ===== MAP ===== */
.tpl .map{position:relative;z-index:0;isolation:isolate;height:700px;background:#dfeee8}
.tpl .map .leaflet-control-attribution{font-size:11px}
.aq-pin{display:flex;flex-direction:column;align-items:center;font-family:Poppins,sans-serif;min-width:96px;transform:translate(-50%,-100%);position:absolute;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.aq-pin span{background:#fff;font-size:10px;font-weight:600;padding:3px 10px;border-radius:6px 6px 0 0;width:100%;text-align:center;color:#222}
.aq-pin b{font-size:16px;color:#fff;width:100%;text-align:center;padding:4px 10px;border-radius:0 0 6px 6px}
.aq-pin::after{content:"";width:0;height:0;border:6px solid transparent;border-top-color:currentColor}

/* ===== MOBILE & TABLET POLISH ===== */
@media(max-width:1100px){
  .tpl{overflow-x:clip}
  .tpl section{padding:44px 0}
  .tpl .tw{padding:0 20px}
  .tpl h2.title{font-size:34px;padding-bottom:16px}
  .tpl h2.title::after{width:70px;height:7px}
  .tpl .head{gap:14px;margin-bottom:28px}
  .tpl .head p,.tpl .head p[style]{margin:0!important;max-width:none;font-size:16px}
  .tpl .pill{white-space:normal;font-size:22px;padding:14px 22px;align-self:flex-start}
  .tpl .tmission{gap:36px}
  .tpl .tmission small{margin:20px 0 6px;font-size:15px;padding-left:0}
  .tpl .tmission h3{font-size:26px;margin-bottom:10px;padding-left:0}
  .tpl .tmission p{padding:0;font-size:16px}
  .tpl .vcard .txt{min-height:0;padding:30px 24px}
  .tpl .vcard h3{font-size:24px;margin-bottom:16px}
  .tpl .vcard p,.tpl .vcard ul{font-size:16px}
  .tpl .vcard .arrow{margin-top:12px}
  .tpl .vcard .frame{height:240px}
  .tpl .four{gap:22px}
  .tpl .four .txt{min-height:0}
  .tpl .four h3{font-size:24px;margin:8px 0 12px}
  .tpl .four p{font-size:16px;margin-bottom:18px}
  .tpl .tabs{align-self:stretch;min-width:0;overscroll-behavior-x:contain;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:14px;margin:6px -20px 0;padding-left:20px;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tpl .tabs::-webkit-scrollbar{display:none}
  .tpl .tabs button{flex:0 0 auto;font-size:15px;padding:8px 14px;border:1px solid #cfd6d4;border-radius:22px;background:#fff}
  .tpl .tabs button:first-child{border:1px solid #cfd6d4}
  .tpl .tabs button.on{background:var(--g1);border-color:var(--g1);color:#fff}
  .tpl .tabs button.on::after{display:none}
  .tpl .prod .frame{height:auto;aspect-ratio:16/9;margin:0}
  .tpl .prod .info{padding:22px 0 0}
  .tpl .prod .info h3{font-size:24px;line-height:1.3}
  .tpl .prod .info p{font-size:16px;line-height:1.6}
  .tpl .testi .top{flex-direction:column;gap:10px}
  .tpl .tnav{margin-top:0;gap:16px}
  .tpl .track{gap:16px;padding-right:20px}
  .tpl .tcard{flex:0 0 84%;min-height:0;padding:44px 24px 28px}
  .tpl .tcard blockquote{font-size:16px;max-height:none}
  .tpl .tcard b{margin-top:24px;font-size:18px}
  .tpl .tcard::before{right:24px}
  .tpl .why .top h2{margin-top:30px}
  .tpl .iso{padding:30px 24px}
  .tpl .iso::after{right:24px;top:-42px}
  .tpl .iso strong{font-size:40px}
  .tpl .iso p{font-size:16px}
  .tpl .tiles div{padding:32px 24px;font-size:18px}
  .tpl .tiles .frame{width:100px;height:100px}
  .tpl .tiles .frame svg{width:72px;height:72px}
  .tpl .lgrid .frame{height:90px}
  .tpl .abox h2{font-size:38px}
  .tpl .mapbar h2{font-size:32px}
  .tpl .mapbar p{font-size:16px}
  .tpl .map{height:360px}
  .tpl .tcta h2{font-size:36px;line-height:1.2}
  .tpl .tcta p{font-size:20px;line-height:1.4}
  .tpl .foot .fl p,.tpl .foot .fm p,.tpl .foot .fr li,.tpl .foot .copy{font-size:16px;line-height:1.6}
  .tpl .foot .fr li{margin-bottom:14px}
  .tpl .foot .copy{position:static;margin:0}
}
@media(max-width:480px){
  .tpl h2.title{font-size:30px}
  .tpl .lgrid{gap:14px}
  .tpl .tcard{flex-basis:90%}
  .tpl .tcta a{width:auto;padding:0 28px}
}

/* ===== SECTION HEADINGS + DESCRIPTIONS (same framing everywhere) ===== */
.tpl .head{display:flex;align-items:center;gap:56px;margin-bottom:48px}
.tpl .head p,.tpl .head p[style]{max-width:820px;margin:0!important;font-size:20px;line-height:1.65;color:var(--mute);border-left:4px solid var(--g2);padding-left:26px}
.tpl .testi .top{align-items:flex-start}
.tpl .testi .top .head{margin-bottom:0}

/* ===== KEY VERTICALS: shorter green panel, same image height ===== */
.tpl .vcard .txt{padding:30px 32px 26px;min-height:360px}
.tpl .vcard h3{font-size:25px;margin:0 0 14px}
.tpl .vcard p{margin:0 0 12px;font-size:16px;line-height:1.5}
.tpl .vcard ul{margin:0 0 12px;font-size:16px;line-height:1.7;padding-left:22px}

/* ===== PRODUCTS ===== */
.tpl .ptrack{position:relative}
.tpl .prod .info h3{font-size:34px;line-height:1.3}
.tpl .prod .info p{font-size:19px;line-height:1.6}
.tpl .dl-label{font-size:16px!important;font-weight:600;color:var(--d1);margin:6px 0 12px!important;line-height:1.2!important}
.tpl .store-row{display:flex;flex-wrap:wrap;gap:14px}
.tpl .store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #777;border-radius:10px;padding:8px 18px 8px 14px;min-width:170px;transition:transform .15s,background .15s}
.tpl .store:hover{background:#1c1c1c;transform:translateY(-2px)}
.tpl .store svg{flex-shrink:0;display:block}
.tpl .store span{display:flex;flex-direction:column;font-size:19px;font-weight:600;line-height:1.1;text-transform:none}
.tpl .store small{font-size:10px;font-weight:400;letter-spacing:.5px;margin-bottom:2px}

/* ===== AWARDS: certificate images ===== */
.tpl .agrid .frame.cert{width:100%;height:230px;border:1px solid #cfd6d4;background:#fff;border-radius:6px;margin-bottom:22px}
.tpl .agrid .frame.cert img{object-fit:contain;padding:8px;box-sizing:border-box}

/* ===== MAP ===== */
.tpl .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:1100px){
  .tpl .head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}
  .tpl .head p,.tpl .head p[style]{font-size:16px;padding-left:16px;border-left-width:3px}
  .tpl .vcard .txt{min-height:0;padding:24px 22px}
  .tpl .vcard h3{font-size:22px}
  .tpl .vcard p,.tpl .vcard ul{font-size:15px}
  /* products: swipe sideways, one at a time */
  .tpl .ptrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 10px}
  .tpl .ptrack::-webkit-scrollbar{display:none}
  .tpl .ptrack .prod,.tpl .ptrack .prod.on{display:flex!important;flex-direction:column;flex:0 0 88%;scroll-snap-align:start;scroll-snap-stop:always}
  .tpl .prod .frame{aspect-ratio:16/10;width:100%;align-self:stretch;flex:none}
  .tpl .prod .info{align-self:stretch}
  .tpl .prod .info{padding:18px 4px 0}
  .tpl .prod .info h3{font-size:21px}
  .tpl .prod .info p{font-size:15px}
  .tpl .store{min-width:0;padding:7px 14px 7px 10px}
  .tpl .store span{font-size:16px}
  .tpl .agrid .frame.cert{height:200px}
  .tpl .map{height:380px}
}

/* ===== FAQ ===== */
.tpl .faqlist{max-width:1200px;margin:0 auto;display:grid;gap:14px}
.tpl .faqlist details{background:var(--tint);border-radius:10px;padding:0 26px;border:1px solid #cfe5e6}
.tpl .faqlist summary{cursor:pointer;list-style:none;font-size:22px;font-weight:600;padding:22px 30px;text-align:center;position:relative}
.tpl .faqlist summary::-webkit-details-marker{display:none}
.tpl .faqlist summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:30px;color:var(--g1)}
.tpl .faqlist details[open] summary::after{content:"\2212"}
.tpl .faqlist details p{margin:0 0 24px;font-size:19px;line-height:1.65;color:var(--mute)}
@media(max-width:1100px){.tpl .faqlist summary{font-size:17px;padding:16px 28px;text-align:center}.tpl .faqlist details p{font-size:15px}.tpl .faqlist details{padding:0 18px}}
/* ===== AWARDS: mobile polish (added in Phase 2, when the Awards section was restored) ===== */
@media(max-width:1100px){
  .tpl .abox{border-width:12px;margin-top:34px}
  .tpl .abox h2{font-size:32px;top:-34px}
  .tpl .agrid{gap:34px}
  .tpl .agrid h3{font-size:22px;padding-bottom:16px}
  .tpl .agrid p{font-size:16px;margin-top:16px}
}

/* ===== FOOTER COLOURS (change only these three lines to recolour the footer) ===== */
.tpl{--foot-bg:linear-gradient(135deg,#d9efef 0%,#bfe2e4 100%);--foot-bar:linear-gradient(90deg,#00474d 0%,#008088 30%,#4fd0d6 55%,#008088 80%,#00474d 100%);--foot-base:#00474d}
.tpl .foot{background:var(--foot-bg)}
.tpl .fbar{background:var(--foot-bar)}
.tpl .fdark{background:var(--foot-base)}

/* ===== SPACE BETWEEN SECTIONS (home and inner pages). Change only these two numbers to make every gap bigger or smaller ===== */
:root{--sec-gap:36px;--sec-gap-sm:26px}
.tpl section:not(.hero):not(.tcta):not(.awards):not(.sl-section):not([style]){padding-top:var(--sec-gap);padding-bottom:var(--sec-gap)}
.tpl .sl-section{padding-top:var(--sec-gap);padding-bottom:calc(var(--sec-gap) + 8px)}
body .inner-section{padding-top:calc(var(--sec-gap) + 8px);padding-bottom:calc(var(--sec-gap) + 8px)}
@media(max-width:768px){
  .tpl section:not(.hero):not(.tcta):not(.awards):not(.sl-section):not([style]){padding-top:var(--sec-gap-sm);padding-bottom:var(--sec-gap-sm)}
  .tpl .sl-section{padding-top:var(--sec-gap-sm);padding-bottom:calc(var(--sec-gap-sm) + 6px)}
  body .inner-section{padding-top:calc(var(--sec-gap-sm) + 6px);padding-bottom:calc(var(--sec-gap-sm) + 6px)}
}

/* ===== CLIENTS FILTER (phone): one row, swipe sideways ===== */
@media(max-width:768px){
  .tpl .ctabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin:16px -20px 24px;padding:2px 20px 8px;scroll-snap-type:x proximity}
  .tpl .ctabs::-webkit-scrollbar{display:none}
  .tpl .ctabs button{flex:0 0 auto;scroll-snap-align:start}
}

/* ===== FOOTER: shorter and tighter (change the numbers here to adjust) ===== */
.tpl .foot{height:360px}
.tpl .foot .fl{top:60px}
.tpl .foot .fl p{line-height:32px}
.tpl .foot .fl .flogo{margin:0 0 14px}
.tpl .foot .fm{top:66px}
.tpl .foot .soc{margin:0 0 12px}
.tpl .foot .fm p{margin:0 0 12px;line-height:28px}
.tpl .foot .fm p:nth-of-type(2),.tpl .foot .fm p:nth-of-type(3){margin-bottom:18px}
.tpl .foot .fm p:nth-of-type(4){margin-bottom:0}
.tpl .foot .fr{top:60px}
.tpl .foot .fr li{line-height:28px;margin:0 0 12px}
.tpl .foot .copy{bottom:18px}
.tpl .fdark{height:34px}
@media(max-width:1100px){
  .tpl .foot{height:auto;padding:30px 20px 22px}
  .tpl .foot>div,.tpl .foot>ul,.tpl .foot>p{margin-bottom:14px!important}
  .tpl .foot>p.copy{margin-bottom:0!important}
  .tpl .foot .fl .flogo{margin:0 0 12px}
  .tpl .foot .fl p,.tpl .foot .fm p,.tpl .foot .fr li{line-height:1.5}
  .tpl .foot .fm p,.tpl .foot .fm p:nth-of-type(n){margin-bottom:6px}
  .tpl .foot .fr li{margin-bottom:8px}
  .tpl .foot .fr li:last-child{margin-bottom:0}
  .tpl .fdark{height:26px}
}

/* ===== JUSTIFIED TEXT (all pages). Paragraphs in the page body are justified.
   To turn it off everywhere, delete this whole block. To keep one paragraph left-aligned, add its class to the "keep left" list below. ===== */
body main p, body .tpl section p, body .inner-section p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* keep left: short labels, hero text, form notes, buttons, footer */
body .hero p, body .hero-text p, body .hero-lead, body .hero-kicker, body .inner-hero p, body .badge, body .btn, body .sc-date,
body .dl-label, body .store, body .store span, body form p, body .form-note, body .field-error, body .breadcrumb p,
body .aqi-card-msg, body .aqi-meta, body .foot p, body .copy, body .muted-note { text-align: left; hyphens: manual; }
/* keep centred: strips and boxes designed to be centred */
body .tcta p, body .tcta h2, body .iso .c, body [style*="text-align:center"] p, body p[style*="text-align:center"], body p[style*="text-align: center"] { text-align: center; hyphens: manual; }

/* "Let's Talk" strip: keep the longer line neat and centred */
.tpl .tcta p{max-width:900px;margin-left:auto;margin-right:auto;text-wrap:balance}