:root{
  --bg:#FFFFFF;
  --bg-alt:#F2F4F5;
  --ink:#1B262E;
  --ink-soft:#5C6B73;
  --teal:#1D2A33;
  --teal-deep:#141D24;
  --teal-tint:#E4E9EB;
  --graphite:#2E3436;
  --graphite-deep:#23282A;
  --graphite-tint:#E7E9E9;
  --green:#B5651D;
  --green-text:#8B4A16;
  --green-tint:#F6E8DA;
  --line:#DCE2E5;
  --card-bg:#FFFFFF;
  --nav-bg:rgba(255,255,255,0.92);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12181D;
    --bg-alt:#172329;
    --ink:#E8ECEE;
    --ink-soft:#9FB0B8;
    --teal:#7FA3B8;
    --teal-deep:#141D24;
    --teal-tint:#233039;
    --graphite:#D7DEE1;
    --graphite-deep:#1E252A;
    --graphite-tint:#1A2227;
    --green:#D98A4A;
    --green-text:#E3A06B;
    --green-tint:#3A2415;
    --line:#29343B;
    --card-bg:#182229;
    --nav-bg:rgba(18,24,29,0.9);
  }
}
:root[data-theme="dark"]{
  --bg:#12181D;
  --bg-alt:#172329;
  --ink:#E8ECEE;
  --ink-soft:#9FB0B8;
  --teal:#7FA3B8;
  --teal-deep:#141D24;
  --teal-tint:#233039;
  --graphite:#D7DEE1;
  --graphite-deep:#1E252A;
  --graphite-tint:#1A2227;
  --green:#D98A4A;
  --green-text:#E3A06B;
  --green-tint:#3A2415;
  --line:#29343B;
  --card-bg:#182229;
  --nav-bg:rgba(18,24,29,0.9);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',Arial,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Oswald',Arial,sans-serif; font-weight:600; letter-spacing:0.2px; margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.narrow{max-width:760px;}

/* NAV */
header.site-nav{
  position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto; gap:18px;}
.logo{font-family:'Oswald',Arial,sans-serif; font-weight:700; font-size:19px; letter-spacing:0.3px; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--teal); display:inline-block;}
nav.links{display:flex; gap:19px; align-items:center;}
nav.links a{font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;}
nav.links a.active, nav.links a:hover{color:var(--ink); border-bottom-color:var(--teal);}
.nav-right{display:flex; align-items:center; gap:18px;}
.lang-switch{display:flex; gap:2px; background:var(--bg-alt); border-radius:20px; padding:3px;}
.lang-switch a{
  border:none; background:transparent; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700;
  padding:6px 11px; border-radius:16px; cursor:pointer; color:var(--ink-soft);
}
.lang-switch a.active{background:var(--teal); color:#fff;}
.btn{
  display:inline-block; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:3px; cursor:pointer; border:1.5px solid transparent;
}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--bg);}
.btn-ghost-light{border-color:rgba(255,255,255,0.55); color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,0.12);}
.mobile-toggle{display:none; background:none; border:none; font-size:22px; color:var(--ink); cursor:pointer; padding:4px 6px;}
.mobile-menu{display:none; flex-direction:column; padding:6px 28px 18px; border-top:1px solid var(--line); background:var(--bg);}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:15.5px; font-weight:600; color:var(--ink-soft); padding:12px 0; border-bottom:1px solid var(--line);}
.mobile-menu a.active{color:var(--teal);}

/* HERO */
.hero{padding:76px 0 64px;}
.eyebrow-line{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.eyebrow-line svg{flex-shrink:0;}
.eyebrow-line span{font-size:14px; color:var(--ink-soft); font-weight:600;}
.hero h1{font-size:52px; line-height:1.08; max-width:820px; margin-bottom:22px;}
.hero .lead{font-size:18px; color:var(--ink-soft); max-width:600px; margin-bottom:34px;}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.cta-band .cta-row{display:flex; gap:12px; flex-wrap:wrap;}

/* FLOW MOTIF (process line svg wrapper) */
.flow-strip{padding:34px 0 10px;}
.flow-strip svg{width:100%; height:auto;}

/* SERVICE TILES on home */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
.service-tile{background:var(--card-bg); padding:34px 30px 30px; display:flex; flex-direction:column; min-height:300px;}
.service-tile .tag{font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:16px;}
.service-tile h3{font-size:24px; margin-bottom:12px; line-height:1.18;}
.service-tile p{font-size:14.5px; color:var(--ink-soft); flex-grow:1; margin-bottom:20px;}
.service-tile .mini-cta{font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px;}
.service-tile.water{border-top:3px solid var(--teal);}
.service-tile.procurement{border-top:3px solid var(--graphite);}
.service-tile.safety{border-top:3px solid var(--green);}

/* SECTION generic */
section{padding:70px 0;}
.section-alt{background:var(--bg-alt);}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:34px; margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16px;}

/* ABOUT / bio */
.bio-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
.bio-list{display:flex; flex-direction:column; gap:26px;}
.bio-item{display:flex; gap:18px;}
.bio-item .num{font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:var(--teal); min-width:26px;}
.bio-item h4{font-size:16.5px; margin-bottom:5px;}
.bio-item p{font-size:14.5px; color:var(--ink-soft); margin:0;}
.stat-pair{display:flex; gap:16px; margin-top:8px;}
.stat-box{background:var(--card-bg); border:1px solid var(--line); padding:22px 20px; flex:1;}
.stat-box .big{font-family:'Oswald',sans-serif; font-size:40px; font-weight:600; color:var(--teal); line-height:1;}
.stat-box .lbl{font-size:13px; color:var(--ink-soft); margin-top:8px;}

/* CASES */
.cases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.case-card{border:1px solid var(--line); padding:26px 24px; background:var(--card-bg);}
.case-card .kicker{font-size:12.5px; font-weight:700; color:var(--teal); margin-bottom:14px;}
.case-card h4{font-size:19px; margin-bottom:12px; line-height:1.2;}
.case-card p{font-size:14px; color:var(--ink-soft); margin-bottom:16px;}
.case-card .proof{font-size:13px; font-weight:700; font-style:italic; color:var(--ink);}

/* PAGE HERO (service pages) */
.page-hero{padding:64px 0 54px; color:#fff;}
.page-hero.pg-water{background:var(--teal-deep);}
.page-hero.pg-procurement{background:var(--graphite-deep);}
.page-hero.pg-safety{background:#3E2A14;}
.page-hero.pg-news{background:var(--graphite-deep);}
.page-hero.pg-bio{background:var(--teal-deep);}

/* NEWS */
.news-list{display:flex; flex-direction:column;}
.news-item{display:grid; grid-template-columns:160px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line);}
.news-item:last-child{border-bottom:1px solid var(--line);}
.news-item .date{font-size:13px; font-weight:700; color:var(--ink-soft); padding-top:2px;}
.news-item h4{font-size:19px; margin-bottom:8px; line-height:1.25;}
.news-item p{font-size:14.5px; color:var(--ink-soft); margin:0; max-width:640px;}
.news-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.news-teaser-card{border:1px solid var(--line); padding:24px 22px; background:var(--card-bg);}
.news-teaser-card .date{font-size:12.5px; font-weight:700; color:var(--teal); margin-bottom:12px; display:block;}
.news-teaser-card h4{font-size:17px; margin-bottom:10px; line-height:1.25;}
.news-teaser-card p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.section-head-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; flex-wrap:wrap; gap:16px;}
.section-head-row .section-head{margin-bottom:0;}
.text-link{font-size:14px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:8px;}

/* FAQ */
.faq-list{display:flex; flex-direction:column; max-width:760px;}
.faq-item{border-top:1px solid var(--line); padding:20px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{font-family:'Oswald',sans-serif; font-size:17px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:'Manrope',sans-serif; font-size:22px; font-weight:400; color:var(--teal); flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{font-size:14.5px; color:var(--ink-soft); margin:12px 0 0; max-width:640px;}

/* CASE STUDY (detail page) */
.case-study{border-top:1px solid var(--line); padding:44px 0;}
.case-study:last-child{padding-bottom:0;}
.case-study .cs-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.case-study h3{font-size:26px;}
.case-study .cs-proof{font-size:13px; font-weight:700; color:var(--teal); background:var(--teal-tint); padding:7px 14px; white-space:nowrap;}
.cs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.cs-block h5{font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; text-transform:none;}
.cs-block p{font-size:14.5px; margin:0;}

/* BIO */
.bio-photo-grid{display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start;}
.bio-photo-grid img{width:100%; height:auto; border:1px solid var(--line);}
.bio-prose{max-width:680px;}
.bio-prose p{font-size:15.5px; color:var(--ink); margin:0 0 20px; line-height:1.65;}

/* EXPERTISE */
.expertise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.expertise-card{border:1px solid var(--line); border-top:3px solid var(--teal); padding:24px 22px; background:var(--card-bg);}
.expertise-card h4{font-size:16px; margin-bottom:10px; line-height:1.25;}
.expertise-card p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
.page-hero .tag{font-size:13.5px; font-weight:700; letter-spacing:0.3px; opacity:0.85; margin-bottom:18px;}
.page-hero h1{font-size:42px; max-width:680px; margin-bottom:18px; color:#fff;}
.page-hero .lead{font-size:17px; max-width:600px; opacity:0.92;}

/* PROCESS STEPS (genuine sequence) */
.process-rail{position:relative; margin-top:10px;}
.process-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.process-steps::before{content:"";position:absolute; top:19px; left:6%; right:6%; height:2px; background:var(--line); z-index:0;}
.pstep{position:relative; z-index:1; padding-right:18px;}
.pstep .circ{width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; margin-bottom:18px;}
.pstep h4{font-size:16px; margin-bottom:8px;}
.pstep p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* INCLUDES LIST */
.includes-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 32px;}
.inc-item{display:flex; gap:12px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line);}
.inc-item svg{flex-shrink:0; margin-top:3px;}
.inc-item p{margin:0; font-size:15px;}

/* PRICE CARD */
.price-band{padding:56px 0; background:var(--bg-alt);}
.price-card{display:grid; grid-template-columns:1fr 1.4fr; border:1px solid var(--line); background:var(--card-bg);}
.price-left{padding:40px 36px; border-right:1px solid var(--line);}
.price-left .amount{font-family:'Oswald',sans-serif; font-size:56px; font-weight:600; color:var(--ink); line-height:1;}
.price-left .unit{font-size:15px; color:var(--ink-soft); margin-top:6px;}
.price-left .note{font-size:13.5px; color:var(--ink-soft); margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.price-right{padding:40px 36px;}
.price-right h4{font-size:16px; margin-bottom:16px;}
.price-right ul{margin:0; padding:0; list-style:none;}
.price-right li{font-size:14.5px; padding:8px 0; display:flex; gap:10px;}
.price-right li:before{content:"—"; color:var(--teal); flex-shrink:0;}

/* SAFETY audience cards */
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.aud-card{border:1px solid var(--line); border-top:3px solid var(--green); padding:26px 22px; background:var(--card-bg);}
.aud-card h4{font-size:17px; margin-bottom:10px;}
.aud-card p{font-size:14px; color:var(--ink-soft); margin:0;}

/* CTA band */
.cta-band{padding:64px 0; background:var(--teal-deep); color:#fff; text-align:left;}
.cta-band h2{color:#fff; font-size:32px; max-width:560px; margin-bottom:14px;}
.cta-band p{color:#D8ECE9; max-width:520px; margin-bottom:26px; font-size:15.5px;}

/* FOOTER */
footer{background:var(--graphite-tint); padding:48px 0 30px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
.footer-grid h5{font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:14px; text-transform:none;}
.footer-grid p, .footer-grid a{font-size:14px; color:var(--ink); display:block; margin-bottom:8px;}
.footer-bottom{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* misc */
.badge-inline{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--bg-alt); padding:6px 12px; border-radius:20px; margin-bottom:18px;}

@media(max-width:900px){
  .hero h1{font-size:36px;}
  .services-grid{grid-template-columns:1fr;}
  .bio-grid{grid-template-columns:1fr; gap:34px;}
  .cases-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr 1fr; row-gap:28px;}
  .process-steps::before{display:none;}
  .includes-grid{grid-template-columns:1fr;}
  .price-card{grid-template-columns:1fr;}
  .price-left{border-right:none; border-bottom:1px solid var(--line);}
  .aud-grid{grid-template-columns:1fr;}
  .news-item{grid-template-columns:1fr; gap:6px;}
  .news-teaser-grid{grid-template-columns:1fr;}
  .cs-grid{grid-template-columns:1fr; gap:16px;}
  .expertise-grid{grid-template-columns:1fr;}
  .bio-photo-grid{grid-template-columns:1fr; gap:24px;}
  .bio-photo-grid img{max-width:220px;}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  nav.links{display:none;}
  .mobile-toggle{display:block;}
  .page-hero h1{font-size:30px;}
}
@media(max-width:480px){
  .nav-inner{padding:13px 16px; gap:8px;}
  .logo{font-size:15px;}
  .nav-right{gap:8px;}
  #navCta{display:none;}
  .lang-switch a{padding:6px 8px; font-size:11.5px;}
  .wrap{padding:0 18px;}
  .hero{padding:48px 0 40px;}
  .hero h1{font-size:28px;}
  .price-left .amount{font-size:44px;}
}

/* ===== ONSITE additions ===== */
.summary-strip{max-width:820px; font-size:15px; color:var(--ink); background:var(--bg-alt); border-left:3px solid var(--teal); padding:16px 20px; margin:0;}
.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.product-card{border:1px solid var(--line); border-top:3px solid var(--teal); background:var(--card-bg); padding:30px 28px; scroll-margin-top:90px;}
.product-card.alt{border-top-color:var(--green);}
.product-card .tag{font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:12px;}
.product-card h3{font-size:30px; margin-bottom:10px;}
.product-card > p{font-size:14.5px; color:var(--ink-soft); margin:0 0 20px;}
.spec-table{width:100%; border-collapse:collapse; font-size:14px;}
.spec-table th,.spec-table td{text-align:left; padding:10px 0; border-top:1px solid var(--line); vertical-align:top;}
.spec-table th{font-weight:700; color:var(--ink-soft); width:40%; padding-right:14px;}
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.ind-case{font-size:13px; font-weight:700; font-style:italic; color:var(--ink); margin-top:14px;}
.expert-note{margin-top:34px; font-size:14.5px; color:var(--ink-soft); border-left:3px solid var(--green); padding:4px 0 4px 16px; max-width:720px;}
@media(max-width:900px){
  .product-grid{grid-template-columns:1fr;}
  .ind-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .ind-grid{grid-template-columns:1fr;}
}