:root {
  --navy:#102d40;
  --deep:#0a2535;
  --teal:#008b8e;
  --mint:#a4e8d2;
  --paper:#f5f7f6;
  --line:#d7e1df;
  --muted:#536972;
  --white:#fff;
  --shell:1240px;
  color-scheme:light
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font:16px/1.7 'Segoe UI',Arial,sans-serif
}
img {
  max-width:100%;
  height:auto;
  display:block
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  line-height:1.14;
  letter-spacing:-.045em
}
h1 {
  font-size:clamp(42px,5.6vw,79px);
  font-weight:650
}
h2 {
  font-size:clamp(31px,3.7vw,51px);
  font-weight:600
}
h3 {
  font-size:23px;
  font-weight:650
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid #138d99;
  outline-offset:4px
}
.shell {
  max-width:var(--shell);
  width:calc(100% - 96px);
  margin-inline:auto
}
.skip {
  position:fixed;
  z-index:40;
  top:10px;
  left:10px;
  background:white;
  padding:10px 18px;
  transform:translateY(-150%)
}
.skip:focus {
  transform:none
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--teal)
}
.eyebrow::before {
  content:'';
  width:22px;
  height:2px;
  background:currentColor
}
.lead {
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  max-width:650px;
  margin-top:18px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:12px 19px;
  border:1px solid transparent;
  border-radius:5px;
  background:var(--teal);
  color:white;
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  transition:background .18s
}
.button:hover {
  background:#006d73
}
.button-light {
  background:var(--mint);
  color:var(--deep)
}
.button-light:hover {
  background:#d1f6e8
}
.button-outline {
  background:transparent;
  border-color:#90a7b1;
  color:inherit
}
.button-outline:hover {
  background:#ffffff18
}
.text-link {
  font-size:14px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#006e73;
  border-bottom:1px solid #8cb6b7;
  padding-bottom:3px
}
.text-link:hover {
  color:var(--deep);
  border-color:var(--deep)
}
.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:27px
}
.section {
  padding-block:83px
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:36px
}
.section-head h2 {
  margin-top:13px
}
.section-head>p {
  max-width:360px;
  color:var(--muted);
  font-size:15px
}
.topbar {
  background:var(--deep);
  color:#b6ccd3;
  font-size:11px;
  letter-spacing:.025em
}
.topbar .shell {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:32px
}
.topbar a {
  color:white
}
.site-header {
  background:#fffffff2;
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:82px;
  gap:26px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.brand-icon {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1.5px solid #16858a;
  border-radius:3px;
  color:#007f86;
  font-size:22px;
  font-weight:300
}
.brand-name {
  font-size:23px;
  font-weight:750;
  letter-spacing:-.04em;
  line-height:1
}
.brand-note {
  display:block;
  font-size:8px;
  font-weight:650;
  letter-spacing:.19em;
  margin-top:6px;
  text-transform:uppercase;
  color:var(--muted)
}
.site-nav {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:13px;
  font-weight:600
}
.site-nav>a:hover {
  color:var(--teal)
}
.water-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-left:1px solid var(--line);
  padding-left:22px;
  color:#006d72
}
.header-quote {
  font-size:12px;
  min-height:40px;
  padding:10px 13px
}
.menu-button {
  display:none;
  min-width:43px;
  min-height:43px;
  border:1px solid var(--line);
  background:white;
  color:var(--navy);
  border-radius:3px
}
.hero {
  background:var(--deep);
  color:white;
  overflow:hidden;
  position:relative
}
.hero .eyebrow {
  color:#83cbbb
}
.hero-inner {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:50px;
  padding-block:67px
}
.hero h1 {
  margin-top:22px
}
.hero h1 span {
  color:var(--mint)
}
.hero .lead {
  color:#b6ced5;
  font-size:17px;
  max-width:540px
}
.hero-bottom {
  display:flex;
  gap:24px;
  border-top:1px solid #527181;
  margin-top:35px;
  padding-top:18px;
  font-size:11px;
  color:#bcd5d9
}
.hero-bottom b {
  color:#fff;
  font-weight:600
}
.machine {
  border:1px solid #4b6c78;
  border-radius:6px;
  background:radial-gradient(ellipse at 53% 40%,#204d60,#0d3042 65%);
  position:relative;
  min-width:0;
  padding:18px 19px 12px
}
.machine-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:9px;
  letter-spacing:.13em;
  color:#b1cdd3
}
.machine-top span:last-child {
  padding:4px 7px;
  border:1px solid #65828b;
  border-radius:3px;
  color:var(--mint)
}
.machine img {
  width:100%;
  margin-block:8px 5px
}
.machine figcaption {
  border-top:1px solid #486776;
  padding-top:10px;
  font-size:9px;
  color:#b0c7d0;
  display:flex;
  justify-content:space-between;
  gap:10px
}
.strip {
  background:#e3ede8;
  border-bottom:1px solid #cddcd5
}
.strip-inner {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.strip a {
  padding:18px 14px;
  border-right:1px solid #c6d7cf;
  font-size:13px;
  font-weight:600
}
.strip a:first-child {
  border-left:1px solid #c6d7cf
}
.strip a span {
  color:#438578;
  font-size:10px;
  margin-right:12px
}
.strip a:hover {
  background:#d5e7de
}
.system-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden
}
.system-card {
  background:white;
  padding:25px 23px 21px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-width:0
}
.system-card:last-child {
  border:0
}
.system-number {
  font-size:11px;
  color:var(--teal);
  letter-spacing:.1em
}
.system-symbol {
  width:45px;
  height:45px;
  border:1px solid #b5d5ce;
  border-radius:9px;
  display:grid;
  place-items:center;
  margin-block:25px 18px;
  font-size:26px;
  font-weight:300;
  color:#127978;
  background:#f1f9f5
}
.system-card h3 {
  min-height:54px;
  font-size:24px
}
.system-card p {
  color:var(--muted);
  font-size:14px;
  margin-top:13px;
  margin-bottom:25px
}
.system-card a {
  margin-top:auto;
  font-size:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-weight:650;
  display:flex;
  justify-content:space-between;
  gap:10px
}
.system-card:hover {
  background:#fafffd
}
.approach {
  background:#e9f0ec;
  border-block:1px solid var(--line)
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start
}
.two-col h2 {
  margin-top:14px
}
.two-col .intro {
  font-size:22px;
  line-height:1.7
}
.two-col p {
  color:var(--muted);
  margin-bottom:18px
}
.checks {
  list-style:none;
  padding:0;
  margin:24px 0 0
}
.checks li {
  border-top:1px solid #c0d2c8;
  padding:13px 0;
  display:flex;
  gap:13px;
  font-size:14px
}
.checks li::before {
  content:'↗';
  color:var(--teal)
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-top:36px
}
.step {
  border-top:1px solid #a8c4bd;
  padding-top:17px
}
.step>span {
  font-size:11px;
  color:var(--teal)
}
.step h3 {
  margin-block:22px 12px;
  font-size:22px
}
.step p {
  color:var(--muted);
  font-size:14px
}
.article-section {
  background:#edf2ef;
  border-block:1px solid var(--line)
}
.article-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.article-card {
  background:white;
  border:1px solid var(--line);
  padding:25px;
  border-radius:4px;
  display:flex;
  flex-direction:column
}
.article-card .tag {
  font-size:10px;
  color:var(--teal);
  letter-spacing:.06em;
  font-weight:650
}
.article-card h2,.article-card h3 {
  font-size:22px;
  line-height:1.3;
  margin-top:24px;
  margin-bottom:12px
}
.article-card p {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:22px
}
.article-card .text-link {
  font-size:12px;
  margin-top:auto
}
.sales-banner {
  background:#deebe4;
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:32px;
  border-radius:4px
}
.sales-banner h3 {
  font-size:24px
}
.sales-banner p {
  color:var(--muted);
  font-size:14px;
  margin-top:6px
}
.sales-banner .button {
  flex-shrink:0
}
.quote-section {
  background:var(--deep);
  color:white
}
.quote-section .eyebrow {
  color:var(--mint)
}
.quote-section h2 {
  margin-top:17px
}
.quote-section .lead {
  color:#b3cdd5;
  font-size:16px
}
.quote-layout {
  display:grid;
  grid-template-columns:.87fr 1fr;
  gap:85px
}
.contact-list {
  display:grid;
  gap:12px;
  margin-top:29px;
  color:#c7dbe0;
  font-size:14px;
  overflow-wrap:anywhere
}
.contact-list a {
  width:fit-content;
  color:white
}
.contact-list a:hover {
  text-decoration:underline
}
.contact-list address {
  font-style:normal;
  max-width:340px
}
.quote-form {
  padding:27px;
  background:white;
  color:var(--navy);
  border-radius:5px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px
}
.field {
  display:flex;
  flex-direction:column;
  gap:6px
}
.field.full {
  grid-column:1/-1
}
.field label {
  font-size:12px;
  font-weight:650
}
.field input,.field select,.field textarea {
  width:100%;
  min-width:0;
  border:1px solid #b7ccc7;
  background:#fbfdfc;
  border-radius:3px;
  padding:10px 11px;
  font-size:14px;
  color:var(--navy)
}
.field textarea {
  resize:vertical;
  min-height:95px
}
.form-note {
  color:var(--muted);
  font-size:11px;
  margin-top:14px
}
.form-actions {
  margin-top:17px
}
.form-actions .button {
  width:100%
}
.form-result {
  margin-top:13px;
  font-size:13px
}
.footer {
  background:#f5f8f6;
  border-top:1px solid var(--line)
}
.footer-main {
  padding-block:38px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:35px
}
.footer-main p {
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
  max-width:300px
}
.footer-links {
  display:grid;
  gap:7px;
  font-size:12px
}
.footer-links strong {
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:5px
}
.footer-links a:hover {
  color:var(--teal);
  text-decoration:underline
}
.copyright {
  border-top:1px solid var(--line);
  padding-block:15px;
  font-size:11px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:20px
}
.crumb {
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  padding-block:25px
}
.crumb a:hover {
  text-decoration:underline
}
.page-hero {
  background:#e5eeea;
  border-block:1px solid var(--line);
  padding-block:47px
}
.page-hero h1 {
  font-size:clamp(38px,5.2vw,67px);
  margin-top:17px;
  max-width:920px
}
.page-hero .lead {
  max-width:790px
}
.service-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 315px;
  gap:70px
}
.prose {
  max-width:800px
}
.prose h2 {
  font-size:29px;
  margin-top:35px;
  margin-bottom:15px
}
.prose h2:first-child {
  margin-top:0
}
.prose h3 {
  font-size:23px;
  margin-block:25px 12px
}
.prose p {
  color:var(--muted);
  margin-bottom:17px;
  line-height:1.9
}
.prose ul {
  color:var(--muted);
  padding-left:20px
}
.prose li {
  margin-bottom:8px
}
.sidebox {
  position:sticky;
  top:112px;
  border:1px solid var(--line);
  background:white;
  padding:25px;
  border-radius:4px
}
.sidebox h2 {
  font-size:21px
}
.sidebox p {
  font-size:13px;
  color:var(--muted);
  margin-top:13px;
  margin-bottom:20px
}
.sidebox ul {
  padding-left:18px;
  font-size:13px;
  color:var(--muted)
}
.sidebox li {
  margin-bottom:9px
}
.flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid #c2d6cd;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:40px;
  background:#eaf4ee
}
.flow span {
  padding:13px 9px;
  border-right:1px solid #c2d6cd;
  font-size:11px;
  text-align:center
}
.flow span:last-child {
  border:0
}
.flow i {
  display:block;
  font-size:10px;
  color:var(--teal);
  font-style:normal;
  margin-bottom:4px
}
.faq {
  margin-top:39px
}
.faq h2 {
  font-size:29px;
  margin-bottom:19px
}
details.faq-item {
  border-top:1px solid var(--line);
  padding:17px 0
}
summary {
  cursor:pointer;
  font-size:15px;
  font-weight:600
}
details.faq-item p {
  font-size:14px;
  color:var(--muted);
  margin-top:12px
}
.source-note {
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:17px;
  font-size:12px;
  color:var(--muted)
}
.source-note a {
  text-decoration:underline
}
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px
}
.filter {
  padding:8px 13px;
  border:1px solid #b6ccc5;
  background:white;
  color:var(--navy);
  border-radius:20px;
  font-size:12px
}
.filter[aria-pressed=true] {
  background:var(--deep);
  color:white;
  border-color:var(--deep)
}
.filter-result {
  font-size:12px;
  color:var(--muted);
  margin-bottom:17px
}
.wp-block-image img {
  max-width:100%;
  height:auto
}
body.admin-bar .site-header {
  top:32px
}
@media(max-width:1050px) {
  .shell {
    width:calc(100% - 56px)
  }
  .site-nav {
    gap:17px
  }
  .hero-inner {
    gap:30px
  }
  .quote-layout {
    gap:40px
  }
  .system-card {
    padding:20px 17px
  }
  .system-card h3 {
    font-size:21px
  }
  .service-layout {
    gap:35px;
    grid-template-columns:minmax(0,1fr) 285px
  }
  
}
@media(max-width:800px) {
  .hero-inner {
    grid-template-columns:1fr;
    padding-block:43px
  }
  .hero h1 {
    max-width:700px
  }
  .hero .lead {
    max-width:620px
  }
  .machine {
    max-width:630px;
    width:100%;
    margin:auto
  }
  .machine img {
    max-height:390px;
    object-fit:contain
  }
  .section {
    padding-block:57px
  }
  .header-inner {
    flex-wrap:wrap;
    gap:15px;
    padding-block:15px;
    min-height:70px
  }
  .menu-button:not([hidden]) {
    display:block;
    margin-left:auto
  }
  .site-nav {
    width:100%;
    order:3;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:0;
    border-top:1px solid var(--line);
    padding-top:7px
  }
  .header-inner:has(.menu-button:not([hidden])) .site-nav:not(.open) {
    display:none
  }
  .site-nav>a {
    padding:9px 12px
  }
  .water-link {
    border-left:0
  }
  .site-nav .button {
    margin-left:10px
  }
  .system-grid {
    grid-template-columns:1fr 1fr
  }
  .system-card:nth-child(2) {
    border-right:0
  }
  .system-card:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .system-card h3 {
    min-height:0
  }
  .two-col {
    gap:30px
  }
  .quote-layout {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .service-layout {
    grid-template-columns:1fr
  }
  .sidebox {
    position:static
  }
  .article-grid {
    gap:13px
  }
  .article-card {
    padding:19px
  }
  .article-card h2,.article-card h3 {
    font-size:20px
  }
  .footer-main {
    gap:20px
  }
  body.admin-bar .site-header {
    top:46px
  }
  
}
@media(max-width:600px) {
  .shell {
    width:calc(100% - 32px)
  }
  .topbar .shell {
    justify-content:center;
    font-size:10px
  }
  .topbar .shell>a {
    display:none
  }
  .brand-name {
    font-size:21px
  }
  .brand-note {
    font-size:7px
  }
  .hero h1 {
    font-size:48px
  }
  .hero-inner {
    padding-block:33px;
    gap:27px
  }
  .hero-bottom {
    gap:13px;
    flex-wrap:wrap
  }
  .hero .lead {
    font-size:16px
  }
  .machine {
    padding:13px
  }
  .machine-top {
    font-size:8px
  }
  .machine figcaption {
    font-size:8px
  }
  .strip-inner {
    grid-template-columns:1fr 1fr
  }
  .strip a {
    font-size:11px;
    padding:13px 10px
  }
  .strip a:nth-child(-n+2) {
    border-bottom:1px solid #c6d7cf
  }
  .strip a:nth-child(3) {
    border-left:1px solid #c6d7cf
  }
  .section {
    padding-block:43px
  }
  .section-head {
    display:block;
    margin-bottom:25px
  }
  .section-head>p {
    margin-top:17px
  }
  .section-head>.text-link {
    margin-top:15px
  }
  .system-grid,.article-grid,.two-col,.steps,.quote-layout,.footer-main {
    grid-template-columns:1fr
  }
  .system-card {
    border-right:0;
    border-bottom:1px solid var(--line)!important
  }
  .system-card:last-child {
    border-bottom:0!important
  }
  .system-symbol {
    margin-block:16px 14px
  }
  .system-card h3 {
    font-size:25px
  }
  .system-card p {
    max-width:400px
  }
  .two-col {
    gap:22px
  }
  .two-col .intro {
    font-size:20px
  }
  .steps {
    gap:23px
  }
  .step h3 {
    margin-top:14px
  }
  .sales-banner {
    padding:23px;
    align-items:flex-start;
    flex-direction:column;
    gap:17px
  }
  .quote-layout {
    gap:28px
  }
  .quote-form {
    padding:20px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .page-hero {
    padding-block:34px
  }
  .page-hero h1 {
    font-size:41px
  }
  .service-layout {
    gap:30px
  }
  .flow {
    grid-template-columns:1fr 1fr
  }
  .flow span:nth-child(-n+2) {
    border-bottom:1px solid #c2d6cd
  }
  .flow span:nth-child(2) {
    border-right:0
  }
  .prose h2 {
    font-size:27px
  }
  .footer-main {
    gap:26px
  }
  .copyright {
    flex-direction:column;
    gap:5px
  }
  body.admin-bar .site-header {
    top:0
  }
  
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
  
}


.brand{gap:8px;flex-direction:column;align-items:flex-start}
.brand-logo{width:160px;height:54px;object-fit:contain}
.brand-note{font-size:9px;letter-spacing:2px}
.photo-machine{background:#fff;border-color:#b7d4d6}
.photo-machine .machine-top{color:#45616a;background:#edf5f3;margin:0;padding:16px}
.photo-machine>img{height:390px;width:100%;object-fit:contain;background:#fff;padding:20px}
.photo-machine figcaption{color:#45616a;background:#edf5f3;padding:14px}
.system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.system-card .system-image{display:block;border:0;margin:-1px -1px 22px;padding:0}
.system-image img{width:100%;height:190px;object-fit:contain;background:#fff}
.strip-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.device-card{background:#fff;border:1px solid var(--line);overflow:hidden}
.device-card>a{display:block;background:#fff;border-bottom:1px solid var(--line)}
.device-card>a img{width:100%;height:230px;object-fit:contain;padding:16px}
.device-card>div{padding:25px}
.device-card h3{font-size:23px;margin:12px 0}
.device-card p{color:var(--muted);line-height:1.7;min-height:58px}
.device-card .text-link{display:block;margin-top:20px}
.device-price{display:block;color:var(--teal);font-size:17px;font-weight:700;margin:18px 0}
.device-detail{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start}
.device-detail h1{font-size:clamp(34px,4.5vw,58px);margin:14px 0 25px}
.device-detail h2{font-size:26px;margin:32px 0 18px}
.device-detail figure{margin:0;background:#fff;border:1px solid var(--line);padding:20px}
.device-detail figure img{width:100%;height:400px;object-fit:contain}
.device-detail figcaption,.service-photo figcaption,.context-photo figcaption{font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px}
.service-photo img{width:100%;height:420px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:20px}
.context-photo{margin:32px 0 0}
.context-photo img{width:100%;height:260px;object-fit:cover}
@media(max-width:1000px){.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.device-detail{gap:25px}.brand-logo{width:140px}.site-nav{gap:16px}}
@media(max-width:650px){.device-grid,.device-detail{grid-template-columns:1fr}.system-grid{grid-template-columns:1fr}.strip-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-machine>img{height:280px}.device-detail figure img,.service-photo img{height:280px}.device-detail h1{font-size:36px}}