:root {
    --navy:#06264b;
    --navy2:#031a35;
    --teal:#08bdb6;
    --ink:#12243a;
    --muted:#637286;
    --pale:#f3f8fa;
    --white:#fff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:#fff
}
a {
    color:inherit;
    text-decoration:none
}
.container {
    width:min(1160px,calc(100% - 48px));
    margin:auto
}
.site-header {
    height:88px;
    background:#fff;
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid #edf1f4
}
.nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand img {
    display:block;
    width:190px;
    height:auto;
    max-height:64px;
    object-fit:contain
}
.nav-links {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:13px;
    font-weight:700;
    color:#415167
}
.nav-links>a:not(.nav-cta):hover,.footer-links a:hover {
    color:var(--teal)
}
.nav-cta {
    background:#08bdb6;
    color:#fff;
    padding:13px 19px;
    border-radius:5px
}
.nav-cta span,.btn span {
    margin-left:12px
}
.menu-toggle {
    display:none;
    background:none;
    border:0;
    font-size:25px;
    color:var(--navy)
}
.hero {
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,#061f40 0%,#082c55 58%,#06465a 100%);
    color:white;
    padding:92px 0 25px;
    min-height:650px
}
.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(90deg,transparent,#000)
}
.hero-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    letter-spacing:2.1px;
    font-weight:700;
    color:#75e4df
}
.eyebrow i {
    width:7px;
    height:7px;
    background:var(--teal);
    border-radius:50%;
    box-shadow:0 0 0 5px #08bdb626
}
.hero h1,.section h2 {
    font-family:Manrope,sans-serif;
    font-weight:800;
    letter-spacing:-2.3px
}
.hero h1 {
    font-size:clamp(46px,5.5vw,69px);
    line-height:1.08;
    margin:26px 0 22px
}
.hero h1 span,.section h2 span {
    color:var(--teal)
}
.hero-copy>p {
    font-size:16px;
    line-height:1.8;
    color:#c3d1df;
    max-width:490px
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:34px
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 22px;
    border-radius:4px;
    font-weight:700;
    font-size:13px;
    transition:.2s
}
.btn-primary {
    background:var(--teal);
    color:#052744
}
.btn-primary:hover {
    background:#5be0d8;
    transform:translateY(-2px)
}
.text-link {
    font-size:13px;
    font-weight:700;
    color:#fff
}
.text-link span {
    color:var(--teal);
    margin-left:8px
}
.hero-note {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:55px
}
.note-mark {
    font-size:28px;
    color:var(--teal)
}
.hero-note strong,.hero-note small {
    display:block
}
.hero-note strong {
    font-size:12px
}
.hero-note small {
    font-size:11px;
    color:#9eb0c4;
    margin-top:4px
}
.hero-visual {
    height:440px;
    position:relative;
    display:grid;
    place-items:center
}
.visual-orbit {
    position:absolute;
    border:1px solid #2b6b84;
    border-radius:50%;
    transform:rotate(-24deg)
}
.orbit-a {
    width:420px;
    height:290px
}
.orbit-b {
    width:500px;
    height:355px;
    transform:rotate(28deg);
    border-color:#164f73
}
.visual-ring {
    position:absolute;
    width:270px;
    height:270px;
    border:1px solid #0b8290;
    border-radius:50%;
    opacity:.55
}
.visual-panel {
    position:relative;
    z-index:2;
    width:min(430px,100%);
    height:230px;
    border:1px solid #39728a;
    background:linear-gradient(145deg,#0d3c63dd,#052343ee);
    border-radius:14px;
    box-shadow:0 30px 80px #00132688;
    overflow:hidden;
    transform:rotate(-4deg)
}
.panel-top,.panel-bottom {
    height:45px;
    display:flex;
    align-items:center;
    padding:0 20px;
    gap:7px;
    color:#88aabc;
    font-size:8px;
    letter-spacing:1.6px
}
.panel-top b {
    margin-left:auto;
    font-size:8px
}
.panel-dot {
    height:5px;
    width:5px;
    border-radius:50%;
    background:#20c9bf
}
.pulse-area {
    height:140px;
    background:linear-gradient(180deg,transparent,#0bb9b51a,transparent);
    display:flex;
    align-items:center
}
.pulse-area svg {
    width:100%;
    overflow:visible
}
.pulse-line {
    fill:none;
    stroke:#20d1c7;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 7px #20d1c7)
}
.pulse-shadow {
    fill:none;
    stroke:#20d1c7;
    stroke-width:15;
    opacity:.08
}
.panel-bottom {
    justify-content:space-between
}
.panel-bar {
    height:3px;
    width:100px;
    background:linear-gradient(90deg,var(--teal),#1a5b7a);
    border-radius:5px
}
.floating-card {
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 16px;
    background:#fff;
    color:var(--navy);
    border-radius:8px;
    box-shadow:0 15px 35px #00172c55
}
.floating-card b,.floating-card small {
    display:block
}
.floating-card b {
    font-size:11px
}
.floating-card small {
    font-size:9px;
    color:#718093;
    margin-top:3px
}
.card-top {
    top:48px;
    right:0
}
.card-bottom {
    bottom:55px;
    left:0
}
.float-icon {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:7px;
    background:#e5f2ff;
    color:#0870b5;
    font-size:20px
}
.teal-icon {
    background:#e1f9f6;
    color:#00a9a0
}
.visual-cross {
    position:absolute;
    right:30px;
    bottom:50px;
    color:#18c6bf;
    font-size:40px;
    font-weight:300
}
.hero-bottom {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:55px;
    color:#7993a9;
    font-size:9px;
    letter-spacing:2px
}
.hero-bottom div {
    height:1px;
    flex:1;
    background:#31516d
}
.section {
    padding:105px 0
}
.intro-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px
}
.dark-eyebrow {
    color:#0a9e9a
}
.section h2 {
    font-size:clamp(34px,4vw,48px);
    line-height:1.17;
    margin:20px 0 0;
    color:var(--navy)
}
.intro-text {
    padding-top:27px
}
.intro-text p {
    font-size:14px;
    line-height:1.9;
    color:var(--muted)
}
.intro-text .lead {
    font-size:19px;
    line-height:1.55;
    color:#203850;
    font-weight:600;
    margin-top:0
}
.under-link {
    display:inline-block;
    margin-top:18px;
    padding-bottom:8px;
    border-bottom:1px solid var(--teal);
    font-size:12px;
    font-weight:700;
    color:var(--navy)
}
.under-link span {
    color:#00aaa4;
    margin-left:12px
}
.solutions {
    background:var(--pale)
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:48px
}
.section-heading>p {
    max-width:360px;
    font-size:13px;
    line-height:1.8;
    color:var(--muted);
    margin:0 0 5px
}
.solution-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.solution-card {
    position:relative;
    background:#fff;
    padding:30px 28px 26px;
    border:1px solid #e7eef1;
    min-height:300px;
    transition:.25s
}
.solution-card:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 45px #0c35500d
}
.solution-card.featured {
    border-top:3px solid var(--teal)
}
.solution-number {
    position:absolute;
    right:25px;
    top:25px;
    color:#b5c4cf;
    font-size:11px;
    letter-spacing:1px
}
.solution-icon {
    height:52px;
    width:52px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font-size:25px;
    margin-bottom:27px
}
.icon-blue {
    background:#e8f3ff;
    color:#0878ba
}
.icon-teal {
    background:#e2f9f6;
    color:#00a9a0
}
.icon-purple {
    background:#f0edff;
    color:#7564c8
}
.solution-card h3 {
    font-family:Manrope,sans-serif;
    font-size:18px;
    color:var(--navy);
    margin:0 0 12px
}
.solution-card p {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    min-height:66px
}
.solution-card>a {
    display:inline-block;
    margin-top:18px;
    font-size:11px;
    font-weight:700;
    color:#078e91
}
.solution-card>a span {
    margin-left:8px
}
.disclaimer {
    font-size:10px;
    color:#82909c;
    margin-top:20px
}
.commitment {
    background:var(--navy2);
    color:white;
    overflow:hidden
}
.commitment-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.commitment-art {
    height:420px;
    display:grid;
    place-items:center;
    position:relative
}
.big-circle {
    width:320px;
    height:320px;
    border:1px solid #17617a;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 0 0 35px #0c52621c,0 0 0 75px #0c526211;
    position:relative
}
.big-circle:before,.big-circle:after {
    content:"";
    position:absolute;
    border:1px dashed #167487;
    border-radius:50%;
    inset:-24px
}
.big-circle:after {
    inset:30px;
    border-style:solid;
    opacity:.45
}
.inner-circle {
    width:210px;
    height:210px;
    border-radius:50%;
    background:linear-gradient(145deg,#0d4567,#082541);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:1px solid #25768a;
    box-shadow:0 15px 60px #0005
}
.inner-circle span {
    font-family:Manrope,sans-serif;
    font-size:25px;
    font-weight:800;
    letter-spacing:3px
}
.inner-circle b {
    font-size:27px;
    color:var(--teal);
    margin:8px
}
.inner-circle small {
    font-size:8px;
    letter-spacing:3px;
    line-height:1.8;
    text-align:center;
    color:#a8c5d3
}
.art-caption {
    position:absolute;
    bottom:18px;
    color:#6e9aaa;
    font-size:9px;
    letter-spacing:2.5px
}
.commitment-copy h2 {
    color:white
}
.commitment-copy>p {
    font-size:13px;
    line-height:1.9;
    color:#a9bdcc;
    margin:22px 0 30px;
    max-width:490px
}
.values {
    border-top:1px solid #23435d
}
.values>div {
    display:flex;
    gap:22px;
    padding:18px 0;
    border-bottom:1px solid #23435d
}
.values>div>b {
    font-size:11px;
    color:var(--teal);
    padding-top:2px
}
.values strong,.values small {
    display:block
}
.values strong {
    font-size:12px
}
.values small {
    font-size:10px;
    color:#8da6b8;
    margin-top:5px
}
.contact {
    padding:90px 0
}
.contact-box {
    position:relative;
    overflow:hidden;
    background:linear-gradient(110deg,#08aaa9,#087f9d);
    padding:58px 65px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    border-radius:4px
}
.contact-box .eyebrow {
    color:#c8fffa
}
.contact-box h2 {
    font-size:37px;
    color:#fff;
    margin:16px 0
}
.contact-box p {
    font-size:13px;
    color:#d4f3f1
}
.contact-action {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px
}
.btn-light {
    background:#fff;
    color:var(--navy)
}
.btn-light:hover {
    transform:translateY(-2px);
    background:#eafffd
}
.contact-action small {
    max-width:230px;
    font-size:9px;
    line-height:1.6;
    color:#d4f3f1
}
.contact-decoration {
    position:absolute;
    right:25%;
    font-size:210px;
    color:#ffffff12;
    top:-65px
}
.footer {
    background:#03172d;
    color:#fff;
    padding:58px 0 20px
}
.footer-top {
    display:grid;
    grid-template-columns:1.45fr 1fr 1fr 1.25fr;
    gap:34px;
    padding-bottom:38px
}
.footer-brand img {
    width:185px;
    max-height:70px;
    object-fit:contain;
    margin-bottom:14px
}
.footer-about p {
    font-size:12px;
    line-height:1.85;
    color:#9db1c3;
    margin:0 0 12px;
    max-width:360px
}
.footer-tagline {
    color:#d7e6f0
}
.footer-tagline strong {
    color:#6fe7e1;
    font-weight:700
}
.footer-col h3 {
    font-family:Manrope,sans-serif;
    font-size:13px;
    letter-spacing:.4px;
    margin:6px 0 16px;
    color:#fff
}
.footer-list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:11px
}
.footer-list li,.footer-list a {
    font-size:12px;
    line-height:1.7;
    color:#b9cddd
}
.footer-list a:hover,.footer-legal a:hover {
    color:var(--teal)
}
.footer-contact li {
    color:#9db1c3
}
.footer-contact span {
    color:#e6f1f8;
    font-weight:600
}
.footer-contact small {
    display:block;
    font-size:10px;
    color:#7690a6;
    margin-top:2px
}
.footer-cta {
    display:inline-flex;
    margin-top:18px;
    padding:11px 15px;
    border:1px solid #1e5f73;
    border-radius:4px;
    color:#eafffd;
    background:#08324a;
    font-size:12px;
    font-weight:700
}
.footer-cta span {
    margin-left:10px;
    color:var(--teal)
}
.footer-cta:hover {
    background:#0a4360;
    border-color:#2a7f90
}
.footer-bottom {
    border-top:1px solid #1c354c;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    font-size:10px;
    color:#7890a5
}
.footer-bottom a {
    color:#9eb4c5
}
.footer-legal {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:flex-end
}
@media(max-width:850px) {
    .nav-links {
        gap:17px
    }
    .hero-grid {
        grid-template-columns:1fr 1fr;
        gap:15px
    }
    .hero-visual {
        transform:scale(.88)
    }
    .commitment-grid {
        gap:40px
    }
    .intro-grid {
        gap:45px
    }
    .footer-top {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:680px) {
    .container {
        width:min(100% - 36px,520px)
    }
    .site-header {
        height:72px
    }
    .brand img {
        width:155px
    }
    .menu-toggle {
        display:block
    }
    .nav-links {
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:white;
        padding:22px 25px 26px;
        box-shadow:0 15px 25px #0a27401a;
        flex-direction:column;
        align-items:stretch;
        gap:20px
    }
    .nav-links.open {
        display:flex
    }
    .nav-cta {
        text-align:center
    }
    .hero {
        padding:70px 0 25px
    }
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero h1 {
        font-size:48px
    }
    .hero-visual {
        height:340px;
        transform:none;
        margin-top:5px
    }
    .visual-panel {
        width:90%;
        height:205px
    }
    .orbit-a {
        width:330px;
        height:240px
    }
    .orbit-b {
        width:360px;
        height:270px
    }
    .visual-ring {
        width:220px;
        height:220px
    }
    .card-top {
        right:0;
        top:12px
    }
    .card-bottom {
        left:0;
        bottom:12px
    }
    .hero-bottom {
        margin-top:25px;
        font-size:7px;
        gap:10px
    }
    .section {
        padding:72px 0
    }
    .intro-grid,.commitment-grid {
        grid-template-columns:1fr;
        gap:25px
    }
    .intro-text {
        padding-top:0
    }
    .section-heading {
        display:block
    }
    .section-heading>p {
        margin-top:22px
    }
    .solution-grid {
        grid-template-columns:1fr
    }
    .solution-card {
        min-height:260px
    }
    .solution-card p {
        min-height:0
    }
    .commitment-art {
        height:350px
    }
    .big-circle {
        width:270px;
        height:270px
    }
    .inner-circle {
        width:180px;
        height:180px
    }
    .contact {
        padding:65px 0
    }
    .contact-box {
        padding:38px 27px;
        display:block
    }
    .contact-box h2 {
        font-size:31px
    }
    .contact-action {
        margin-top:28px
    }
    .contact-decoration {
        right:0;
        top:10px
    }
    .footer {
        padding:46px 0 18px
    }
    .footer-top {
        grid-template-columns:1fr;
        gap:28px
    }
    .footer-about p {
        max-width:none
    }
    .footer-bottom {
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        line-height:1.6
    }
    .footer-legal {
        justify-content:flex-start;
        gap:14px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important
    }
}
/* About enhancements */
.about-lead {
    font-size:16px;
    line-height:1.75;
    color:#203850;
    font-weight:600;
    margin:22px 0 0;
    max-width:520px
}
.about-highlights {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:42px 0 26px
}
.about-highlight {
    background:var(--pale);
    border:1px solid #e1ebef;
    border-top:3px solid var(--teal);
    padding:20px 18px;
    border-radius:4px
}
.about-highlight strong {
    display:block;
    font-family:Manrope,sans-serif;
    font-size:14px;
    color:var(--navy);
    margin-bottom:8px
}
.about-highlight span {
    display:block;
    font-size:12px;
    line-height:1.75;
    color:var(--muted)
}
.about-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.about-card {
    background:#fff;
    border:1px solid #e4edf0;
    padding:28px 26px;
    border-radius:4px;
    transition:.25s
}
.about-card:hover {
    transform:translateY(-4px);
    box-shadow:0 16px 36px #0c35500f
}
.about-card-label {
    display:inline-block;
    font-size:9px;
    letter-spacing:1.8px;
    font-weight:700;
    color:#079d99;
    margin-bottom:10px
}
.about-card h3 {
    font-family:Manrope,sans-serif;
    font-size:20px;
    line-height:1.3;
    color:var(--navy);
    margin:0 0 10px
}
.about-card p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted);
    margin:0
}
@media(max-width:850px) {
    .about-highlights {
        grid-template-columns:repeat(2,1fr)
    }
    .about-cards {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:680px) {
    .about-lead {
        font-size:15px
    }
    .about-highlights,.about-cards {
        grid-template-columns:1fr;
        gap:14px
    }
    .about-highlight,.about-card {
        padding:22px 20px
    }
}
/* Featured product range */
.products {
    background:#fff
}
.product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.product-card {
    border:1px solid #e4edf0;
    background:#fff;
    overflow:hidden;
    transition:.25s
}
.product-card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 45px #0c355012
}
.product-visual {
    height:260px;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:radial-gradient(circle at 50% 42%,#e5f8f7 0,#f2f8fa 48%,#eaf1f5 100%)
}
.product-visual:before,.product-visual:after {
    content:"";
    position:absolute;
    border:1px solid #c9e7e7;
    border-radius:50%;
    width:260px;
    height:260px
}
.product-visual:after {
    width:340px;
    height:340px;
    border-color:#d9e9ed
}
.product-visual-label {
    position:absolute;
    bottom:17px;
    left:22px;
    font-size:9px;
    letter-spacing:2px;
    color:#6a8796;
    font-weight:700
}
.machine {
    position:relative;
    z-index:1;
    filter:drop-shadow(0 16px 13px #173b5025)
}
.autoclave-machine {
    width:155px;
    height:175px;
    border-radius:17px 17px 12px 12px;
    background:linear-gradient(100deg,#c8d5dc,#f8fbfc 25%,#dce6eb 75%,#aebfc9);
    border:2px solid #9aadb8;
    padding:15px 13px
}
.machine-top {
    position:absolute;
    left:12px;
    right:12px;
    top:-7px;
    height:12px;
    border-radius:8px;
    background:#9babb5
}
.machine-display {
    height:22px;
    background:#092c4d;
    border-radius:4px;
    margin:0 0 10px;
    display:flex;
    align-items:center;
    justify-content:space-evenly
}
.machine-display i {
    width:5px;
    height:5px;
    background:#16c7bc;
    border-radius:50%
}
.machine-door {
    height:82px;
    width:82px;
    border-radius:50%;
    margin:auto;
    background:linear-gradient(145deg,#8298a4,#dce6e9 38%,#8296a1);
    border:7px solid #edf2f4;
    box-shadow:inset 0 0 0 4px #718894;
    display:grid;
    place-items:center
}
.machine-door span {
    width:49px;
    height:49px;
    border-radius:50%;
    background:linear-gradient(145deg,#173e5b,#7d9aa9);
    border:2px solid #b8c9d0
}
.machine-controls {
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:9px
}
.machine-controls i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#0a9e9a
}
.machine-foot {
    position:absolute;
    bottom:-9px;
    left:18px;
    right:18px;
    height:8px;
    background:#8297a2;
    border-radius:0 0 5px 5px
}
.ultrasonic-machine {
    width:205px;
    height:130px;
    margin-top:20px
}
.cleaner-lid {
    position:absolute;
    left:9px;
    right:9px;
    top:-17px;
    height:20px;
    border-radius:9px 9px 3px 3px;
    background:linear-gradient(#f8fbfc,#b8c9d1);
    border:2px solid #9aadb8
}
.cleaner-rim {
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:13px;
    border-radius:5px;
    background:#849ba7
}
.cleaner-tank {
    height:43px;
    background:linear-gradient(180deg,#9de8e3,#d8f5f1);
    border:4px solid #b9cbd2;
    border-radius:3px 3px 8px 8px;
    display:flex;
    align-items:center;
    justify-content:space-evenly
}
.cleaner-tank span {
    height:23px;
    width:23px;
    border:2px solid #65b9bd;
    border-radius:50%;
    background:#e7ffffaa
}
.cleaner-front {
    height:72px;
    background:linear-gradient(100deg,#aebfc8,#f7fafb 35%,#c5d3da);
    border:2px solid #9eafb9;
    border-top:0;
    border-radius:0 0 12px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px
}
.cleaner-display {
    height:27px;
    width:55px;
    background:#082c4b;
    border-radius:4px;
    box-shadow:inset 0 0 0 2px #6d8795
}
.cleaner-buttons {
    display:flex;
    gap:5px
}
.cleaner-buttons i {
    height:9px;
    width:9px;
    border-radius:50%;
    background:#09aaa6;
    border:1px solid #eff
}
.cleaner-feet {
    display:flex;
    justify-content:space-between;
    padding:0 16px
}
.cleaner-feet i {
    height:8px;
    width:13px;
    background:#718792;
    border-radius:0 0 4px 4px
}
.product-card-body {
    padding:27px 29px 30px
}
.product-kicker {
    font-size:9px;
    letter-spacing:1.6px;
    color:#079d99;
    font-weight:700
}
.product-card h3 {
    font-family:Manrope,sans-serif;
    font-size:23px;
    color:var(--navy);
    margin:12px 0
}
.product-card p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted);
    min-height:70px
}
.product-link {
    display:inline-block;
    margin-top:12px;
    color:#078e91;
    font-size:12px;
    font-weight:700
}
.product-link span {
    margin-left:8px
}
@media(max-width:680px) {
    .product-grid {
        grid-template-columns:1fr
    }
    .product-visual {
        height:235px
    }
    .product-card p {
        min-height:0
    }
}