body, html {
    overflow-x: hidden;
}

.topbar {
    font-size: .72rem;
    letter-spacing: .04em;
    color: #e5f5f1;
    background: var(--ink);
    padding: 7px 0
}

.topbar a {
    color: #b5ded7
}

.site-header {
    height: 83px;
    display: flex;
    align-items: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 18px #132a3108
}

.brand-logo {
    display: flex;
    align-items: center;
    width: clamp(175px, 20vw, 235px);
    margin: 0;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68px;
    object-fit: contain;
}

.navbar {
    width: 100%
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--ink) !important
}

.navbar-brand span {
    font-family: 'DM Sans';
    font-size: .73rem;
    background: var(--teal);
    color: #fff;
    padding: 4px 5px;
    border-radius: 50%;
    letter-spacing: 0;
    margin-right: 4px
}

.navbar-brand em {
    font-weight: 600;
    color: var(--teal)
}

.navbar-nav {
    gap: 28px
}

.navbar-nav a {
    font-weight: 600;
    font-size: 1rem;
    transition: .2s
}

.navbar-nav a:hover {
    color: var(--teal)
}

.nav-cta,
.button-primary,
.button-light {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border-radius: 2px;
    padding: 12px 18px !important;
    background: var(--teal);
    color: #fff !important
}

.nav-cta b,
.button-primary span,
.button-light span {
    font-size: 1.2rem;
    line-height: 1
}

.navbar-toggler {
    border: 0;
    padding: 0;
    width: 35px
}

.navbar-toggler span {
    display: block;
    height: 2px;
    background: var(--ink);
    margin: 6px 0
}

.offcanvas {
    width: 80%;
    background: #fdfcf9
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 30px;
    font-weight: 600
}

.offcanvas .nav-cta {
    text-align: center;
    justify-content: center;
    margin-top: 10px
}

.button-primary {
    font-weight: 700;
    padding: 14px 20px !important;
    transition: transform .2s, background .2s
}

.button-primary:hover {
    transform: translateY(-3px);
    background: var(--teal-dark)
}

/* 
.hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    background: var(--sand);
    padding: 110px 0 90px
}

.hero-copy {
    max-width: 630px;
    position: relative;
    z-index: 2
}

.eyebrow {
    color: var(--teal);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .17em;
    margin-bottom: 14px
}

.hero h1,
h1,
h2 {
    font-family: 'Playfair Display', serif;
    letter-spacing: -.045em;
    line-height: 1.09
}

.hero h1 {
    font-size: clamp(3rem, 6.1vw, 5.7rem);
    margin: 0 0 22px
}

.hero h1 i,
h1 i,
h2 i {
    font-weight: 600;
    color: var(--teal)
}

.hero-copy>p:not(.eyebrow) {
    font-size: 1.05rem;
    max-width: 500px;
    color: #4e6267;
    margin-bottom: 30px
}

.button-primary {
    font-weight: 700;
    padding: 14px 20px !important;
    transition: transform .2s, background .2s
}

.button-primary:hover {
    transform: translateY(-3px);
    background: var(--teal-dark)
}

.hero-art {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -30px;
    top: -60px
}

.globe {
    width: 490px;
    height: 490px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e8fbf5 0 12%, #badfd5 13% 14%, #72b7a8 15% 30%, #187d79 70%);
    opacity: .9;
    position: absolute;
    right: 0;
    top: 0;
    box-shadow: inset -40px -35px 70px #075c5c55
}

.globe:after,
.globe:before {
    content: '';
    position: absolute;
    border: 1px solid #d9f6ed88;
    border-radius: 50%;
    inset: 15% 4%
}

.globe:before {
    inset: 4% 28%;
    transform: rotate(20deg)
}

.hero-card {
    position: absolute;
    background: #fff;
    box-shadow: 0 18px 40px #123a3930;
    padding: 14px 18px;
    min-width: 142px
}

.hero-card b {
    display: block;
    color: var(--teal);
    font-size: 1.2rem
}

.hero-card small {
    color: #718185
}

.card-one {
    top: 290px;
    left: 5px
}

.card-two {
    top: 145px;
    right: 0
}

.hero-line {
    height: 55px;
    background: var(--teal);
    clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%)
} */





.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--sand);
    padding: 145px 0 95px
}

.hero:after {
    content: '';
    position: absolute;
    inset: 0 0 0 54%;
    background: linear-gradient(90deg, rgba(9, 42, 60, .03), rgba(9, 42, 60, .4)), url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?auto=format&fit=crop&w=1400&q=85') center/cover
}

.hero .container {
    position: relative;
    z-index: 1
}

.hero-copy {
    max-width: 690px
}

.hero-copy h1 em {
    font-style: normal;
    color: var(--teal)
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px
}

.btn-outline-brand {
    border: 1px solid #b8c8c9;
    border-radius: 0;
    color: var(--ink);
    padding: .7rem 1.1rem;
    font-weight: 700
}

.btn-outline-brand:hover {
    border-color: var(--teal);
    color: var(--teal)
}

.hero-proof {
    margin-top: 58px;
    display: flex;
    gap: 38px
}

.hero-proof b {
    font: 700 1.6rem 'Playfair Display';
    display: block;
    color: var(--navy)
}

.hero-proof span {
    font-size: .8rem;
    color: #5a7279
}




.section-tint {
    background: #f2f7f5
}

.about h2,
.section-heading h2,
.mission h2,
.cta h2 {
    font-size: clamp(2.3rem, 4.2vw, 4rem);
    margin-bottom: 22px
}

.about p:not(.eyebrow),
.section-heading>p:last-child {
    color: var(--muted);
    max-width: 620px
}

.text-link {
    color: var(--teal);
    font-weight: 700;
    display: inline-block;
    margin-top: 12px
}

.text-link span {
    margin-left: 9px;
    font-size: 1.2rem
}

.about-image {
    height: 465px;
    position: relative;
    transition: transform .2s
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-image div {
    position: absolute;
    bottom: -22px;
    left: -20px;
    background: var(--coral);
    color: #fff;
    padding: 16px 22px;
    box-shadow: 0 13px 24px #0002
}

.services-grid {
    margin-top: 40px
}

.service-card {
    height: 100%;
    background: #fff;
    padding: 28px 23px;
    position: relative;
    border: 1px solid #e1ece8;
    transition: .3s
}

.service-card:hover {
    background: var(--teal);
    transform: translateY(-8px);
    color: #fff;
    box-shadow: 0 16px 32px #075f7330
}

.service-card>span {
    font-size: .75rem;
    color: var(--coral);
    font-weight: 700
}

.service-card h3 {
    font-family: 'Playfair Display';
    font-size: 1.55rem;
    margin: 20px 0 10px
}

.service-card p {
    font-size: .88rem;
    color: #66777a
}

.service-card:hover p {
    color: #e1f5ef
}

.service-card>b {
    position: absolute;
    bottom: 20px;
    right: 22px;
    font-size: 1.3rem
}

.category-card {
    display: block;
    height: 395px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--ink);
    transition: .25s
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
    opacity: .77
}

.category-card:hover img {
    transform: scale(1.1)
}

.category-overlay {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: linear-gradient(transparent 25%, #092b30d9)
}

.category-overlay>span {
    font-size: 1.5rem;
    color: var(--sky)
}

.category-overlay h3 {
    font-family: 'Playfair Display';
    font-size: 1.75rem;
    margin: 9px 0
}

.category-overlay p {
    font-size: .78rem;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    transition: .35s;
    margin: 0
}

.category-card:hover p {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 10px
}

.category-overlay b {
    font-size: .85rem
}

.category-overlay i {
    font-style: normal;
    color: var(--sky);
    margin-left: 5px
}

.numbers {
    background: var(--ink);
    color: #fff;
    padding: 72px 0
}

.numbers strong {
    display: block;
    font-family: 'Playfair Display';
    font-size: 3.5rem;
    color: var(--sky);
    line-height: 1.2
}

.numbers span {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em
}

.mission ol {
    list-style: none;
    counter-reset: mission;
    padding: 0;
    margin: 0
}

.mission li {
    counter-increment: mission;
    border-top: 1px solid #cbdad6;
    padding: 17px 0 17px 52px;
    position: relative;
    font-size: 1.02rem
}

.mission li:before {
    content: '0' counter(mission);
    position: absolute;
    left: 0;
    top: 19px;
    color: var(--teal);
    font-weight: 700
}

.offices {
    background: var(--sand)
}

.office-card {
    height: 100%;
    background: #fff;
    padding: 27px;
    transition: .3s;
    border-bottom: 3px solid transparent
}

.office-card:hover {
    transform: translateY(-6px);
    border-color: var(--coral);
    box-shadow: 0 10px 22px #132a3115
}

.office-card>span {
    color: var(--coral);
    font-size: .65rem
}

.office-card small {
    display: block;
    text-transform: uppercase;
    color: var(--teal);
    letter-spacing: .1em;
    font-weight: 700;
    margin: 10px 0
}

.office-card h3 {
    font-family: 'Playfair Display';
    font-size: 1.5rem
}

.office-card p {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.6
}

.cta {
    padding: 64px 0;
    background: linear-gradient(115deg, var(--teal), var(--teal-dark));
    color: #fff;
    text-align: center
}

.cta .eyebrow {
    color: var(--orange-soft)
}

.cta h2 {
    font-size: clamp(2.5rem, 5vw, 4.6rem)
}

.cta h2 i {
    color: var(--orange-soft)
}

.cta>div>p:not(.eyebrow) {
    max-width: 510px;
    margin: 0 auto 27px;
    color: #ddf2ee
}

.button-light {
    background: var(--coral);
    color: var(--white) !important;
    font-weight: 700;
    transition: .2s
}

.button-light:hover {
    background: var(--orange-dark);
    color: var(--white) !important;
    transform: translateY(-3px)
}

footer {
    background: #0e242a;
    color: #b6c6c7;
    padding: 65px 0 20px
}

footer .navbar-brand {
    color: #fff !important
}

footer .footer-copy {
    max-width: 300px;
    font-size: .88rem;
    margin-top: 15px
}

footer h6 {
    color: var(--sky);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    margin-bottom: 15px
}

footer a {
    display: block;
    margin-bottom: 8px;
    font-size: .87rem
}

footer a:hover {
    color: #fff
}

footer p {
    font-size: .84rem
}

.footer-bottom {
    border-top: 1px solid #ffffff1c;
    margin-top: 40px;
    padding-top: 18px;
    font-size: .75rem
}

.footer-bottom span {
    float: right
}

.page-hero {
    background: var(--sand);
    padding: 68px 0
}

.crumb {
    display: inline-block;
    color: var(--teal);
    font-weight: 700;
    font-size: .86rem;
    margin-bottom: 32px
}

.page-hero h1,
.product-detail h1 {
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    margin: 8px 0 13px
}

.page-hero p:last-child {
    max-width: 600px;
    color: var(--muted)
}

.product-card {
    display: block;
    color: var(--ink);
    height: 100%;
    transition: .25s
}

.product-card:hover {
    color: var(--teal)
}

.product-image {
    height: 295px;
    overflow: hidden;
    background: var(--sand)
}

.product-image img,
.detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s
}

.product-card:hover img {
    transform: scale(1.08)
}

.product-card>div:last-child {
    padding: 18px 6px
}

.product-card small {
    color: var(--teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .67rem
}

.product-card h3 {
    font-family: 'Playfair Display';
    font-size: 1.65rem;
    margin: 6px 0
}

.product-card p {
    color: var(--muted);
    display: none;
    font-size: .87rem
}

.product-card b {
    font-size: .85rem
}

.product-card b span {
    margin-left: 8px
}

.product-detail {
    padding-top: 65px
}

.detail-image {
    height: 450px;
    overflow: hidden;
    background: var(--sand);
    transition: .2s
}

.product-detail .lead {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 20px 0
}

.spec {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #dbe5e2;
    padding: 15px 0;
    font-size: .9rem
}

.spec span {
    color: var(--muted)
}

.spec b {
    text-align: right
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:991px) {
    .hero {
        min-height: 690px;
        padding-top: 75px
    }

    .hero-art {
        right: -160px;
        top: 285px;
        transform: scale(.7);
        transform-origin: top
    }

    .hero-line {
        height: 35px
    }

    .about-image {
        height: 380px
    }

    .category-overlay p {
        max-height: 100px;
        opacity: 1;
        margin-bottom: 10px
    }

    .detail-image {
        height: 430px
    }
}

@media(max-width:575px) {
    .topbar span {
        display: none
    }

    .topbar .container {
        justify-content: center
    }

    .site-header {
        height: 70px
    }

    .hero {
        min-height: 650px;
        padding-top: 62px
    }

    body .hero h1 {
        font-size: 3.15rem !important; 
    }

.navbar {
    padding-right: 20px;
}
    .hero-art {
        right: -195px;
        top: 335px;
        transform: scale(.56)
    }

    .section {
        padding: 72px 0
    }

    .about-image {
        height: 330px
    }

    .about-image div {
        left: 0
    }

    .section-heading h2 {
        font-size: 2.55rem
    }

    .numbers {
        padding: 50px 0
    }

    .numbers strong {
        font-size: 2.7rem
    }

    .numbers .col-6:nth-child(-n+2) {
        margin-bottom: 30px
    }

    .footer-bottom span {
        float: none;
        display: block;
        margin-top: 3px
    }

    .page-hero {
        padding: 50px 0
    }

    .product-detail {
        padding-top: 42px
    }

    .detail-image {
        height: 360px
    }

    .spec {
        flex-direction: column;
        gap: 2px
    }

    .spec b {
        text-align: left
    }
}

/* Refined responsive layout */
.hero:not(.hero-modern) {
    display: none;
}

.hero-modern {
    min-height: 600px;
    padding: 64px 0;
    background: linear-gradient(118deg, var(--sand) 0%, var(--sand) 59%, var(--mint) 100%);
}

.hero-modern:after {
    display: none;
}

.hero-modern h1 {
    font: 700 clamp(2rem, 3.5vw, 2.45rem)/1.03 'Playfair Display', serif;
    font-size: 4.5rem !important;
    letter-spacing: -.055em; 
    margin: 14px 0 24px;
}

.hero-modern h1 em,
h1 i,
h2 i {
    color: var(--teal);
    font-style: normal;
}

.hero-modern .lead {
    color: #51666b;
    max-width: 590px;
    font-size: 1.08rem;
    line-height: 1.75;
}

.btn-brand {
    background: var(--teal);
    color: #fff;
    border-radius: 2px;
    padding: .78rem 1.15rem;
    font-weight: 700;
}

.btn-brand:hover {
    background: var(--teal-dark);
    color: #fff;
    transform: translateY(-2px);
}

.hero-visual {
    position: relative;
    min-height: 490px;
    padding: 25px 0 0 28px;
}

.hero-visual:before {
    content: '';
    position: absolute;
    width: 86%;
    height: 94%;
    right: 0;
    top: 0;
    background: var(--teal);
    border-radius: 150px 0 0 0;
}

.hero-visual img {
    position: relative;
    z-index: 1;
    width: 92%;
    height: 440px;
    object-fit: cover;
    border-radius: 110px 0 0 0;
    box-shadow: 18px 20px 0 var(--coral);
}

.hero-float-card {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 20px;
    background: #fff;
    padding: 18px 22px;
    box-shadow: 0 18px 35px #132a3124;
}

.hero-float-card span,
.contact-details small {
    display: block;
    color: var(--teal);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.hero-float-card strong {
    font: 700 1.35rem/1.15 'Playfair Display', serif;
}

.hero-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid #fff8;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -45px;
    top: 50px;
}

.hero-proof {
    gap: clamp(18px, 3.5vw, 42px);
}

.hero-proof b {
    color: var(--ink);
}

.page-hero-rich {
    padding: 100px 0;
    background: linear-gradient(120deg, var(--orange-soft), var(--mint));
}

.page-hero-rich h1 {
    max-width: 750px;
}

.value-grid {
    margin-top: 38px;
}

.value-grid article {
    height: 100%;
    background: #fff;
    padding: 31px;
    border-top: 4px solid var(--teal);
    box-shadow: 0 12px 30px #132a310c;
}

.value-grid span {
    color: var(--coral);
    font-weight: 700;
    font-size: .78rem;
}

.value-grid h3 {
    font: 700 1.7rem 'Playfair Display', serif;
    margin: 18px 0 10px;
}

.value-grid p,
.contact-section>.container p {
    color: var(--muted);
}

.contact-form {
    background: var(--sand);
    padding: clamp(24px, 4vw, 44px);
}

.contact-form label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 7px;
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #cfddd9;
    background: #fff;
    padding: 12px 14px;
    outline-color: var(--teal);
    font: inherit;
}

.contact-form textarea {
    resize: vertical;
}

.contact-details {
    margin-top: 35px;
    display: grid;
    gap: 25px;
}

.contact-details a {
    color: var(--teal);
    font-weight: 700;
    font-size: 1.08rem;
}

@media (max-width: 991px) {
    .hero-modern {
        min-height: auto;
        padding: 70px 0 80px;
    }

    .hero-visual {
        max-width: 570px;
        margin: 5px auto 0;
    }

    .navbar-nav {
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .hero-modern {
        padding: 58px 0 64px;
    }

    .hero-modern h1 {
        font-size: 3.05rem;
    }

    .hero-proof {
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-proof div:last-child {
        grid-column: span 2;
    }

    .hero-visual {
        min-height: 375px;
        padding-left: 14px;
    }

    .hero-visual img {
        height: 335px;
        width: 94%;
        border-radius: 72px 0 0 0;
        box-shadow: 10px 12px 0 var(--coral);
    }

    .hero-float-card {
        bottom: 0;
        padding: 13px 15px;
    }

    .hero-orbit {
        right: -30px;
        width: 130px;
        height: 130px;
    }

    .page-hero-rich {
        padding: 70px 0;
    }

    .page-hero-rich h1 {
        font-size: 2.85rem;
    }

    .contact-form {
        padding: 22px;
    }
}

/* Service, purpose and quote form components */
.purpose-section {
    background: #fff;
}

.purpose-cards {
    margin-top: 38px;
}

.purpose-cards article {
    height: 100%;
    padding: 34px 30px;
    background: linear-gradient(145deg, #f7f3ec, #fff);
    border: 1px solid #e2ebe7;
    transition: transform .25s, box-shadow .25s;
}

.purpose-cards article:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 38px #132a3112;
}

.purpose-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    font: 700 1.1rem 'Playfair Display', serif;
}

.purpose-cards h3 {
    margin: 20px 0 11px;
    font: 700 1.7rem 'Playfair Display', serif;
}

.purpose-cards p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.service-process {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: service;
}

.service-process li {
    counter-increment: service;
    position: relative;
    padding: 18px 0 18px 60px;
    border-top: 1px solid #cbdad6;
}

.service-process li:before {
    content: '0' counter(service);
    position: absolute;
    left: 0;
    top: 19px;
    color: var(--teal);
    font-weight: 800;
}

.service-process b {
    display: block;
    margin-bottom: 3px;
}

.service-process span {
    color: var(--muted);
    font-size: .92rem;
}

.quote-modal .modal-dialog {
    max-width: 620px;
    padding: 10px;
}

.quote-modal .modal-content {
    border: 0;
    border-radius: 0;
    box-shadow: 0 25px 65px #132a3140;
}

.quote-modal .modal-header {
    align-items: flex-start;
    padding: 28px 30px 16px;
    border: 0;
}

.quote-modal .modal-title {
    font: 700 clamp(1.7rem, 4vw, 2.25rem)/1.1 'Playfair Display', serif;
    color: var(--ink);
}

.quote-modal .modal-body {
    padding: 12px 30px 24px;
}

.quote-modal label {
    display: block;
    margin-bottom: 7px;
    font-size: .8rem;
    font-weight: 800;
}

.quote-modal input,
.quote-modal textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cbdad6;
    background: #fff;
    outline-color: var(--teal);
    font: inherit;
    font-size: .9rem;
}

.quote-modal input[readonly] {
    background: var(--sand);
    color: var(--teal);
    font-weight: 700;
}

.quote-modal .modal-footer {
    justify-content: flex-start;
    border: 0;
    padding: 0 30px 30px;
}

@media (max-width: 575px) {
    .brand-logo {
        width: 170px;
    }

    .brand-logo img {
        max-height: 54px;
    }

    .purpose-cards article {
        padding: 27px 24px;
    }

    .quote-modal .modal-dialog {
        margin: .5rem;
        padding: 0;
    }

    .quote-modal .modal-header {
        padding: 24px 20px 12px;
    }

    .quote-modal .modal-body {
        padding: 12px 20px 20px;
    }

    .quote-modal .modal-footer {
        padding: 0 20px 24px;
    }

    .quote-modal .button-primary {
        width: 100%;
        justify-content: center;
    }
}



.hero-modern h1,
.page-hero h1,
.product-detail h1 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    font-size: var(--page-heading-size);
    line-height: var(--heading-line-height);
}

.navbar-brand span {
    font-family: var(--font-body);
}

.section {
    position: relative;
}

.service-showcase {
    overflow: hidden;
}

.service-intro {
    max-width: 720px;
    margin-bottom: 58px;
}

.service-zigzag {
    display: grid;
    gap: 46px;
}

.service-feature {
    background: #fff;
    box-shadow: 0 18px 45px #132a310d;
}

.service-feature-image {
    height: 100%;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.service-feature-image:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, transparent 45%, #092a3033);
}

.service-feature-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    transition: transform .6s ease;
}

.service-feature:hover .service-feature-image img {
    transform: scale(1.06);
}

.service-feature-image span {
    position: absolute;
    z-index: 1;
    left: 26px;
    top: 24px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--teal);
    font-size: .82rem;
    font-weight: 800;
}

.service-feature-content {
    padding: clamp(34px, 5vw, 70px);
}

.service-feature-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: var(--heading-weight);
    line-height: 1.08;
    margin: 12px 0 18px;
}

.service-feature-content>p:not(.eyebrow) {
    color: var(--muted);
    max-width: 490px;
}

.service-feature-content ul {
    list-style: none;
    padding: 0;
    margin: 25px 0 16px;
}

.service-feature-content li {
    position: relative;
    padding: 7px 0 7px 25px;
    font-size: .89rem;
    font-weight: 600;
}

.service-feature-content li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 800;
}

.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 60px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    z-index: 9999;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .service-zigzag {
        gap: 30px;
    }

    .service-feature-image {
        min-height: 330px;
    }
}

@media (max-width: 575px) {
    :root {
        --section-heading-size: 2.5rem;
        --page-heading-size: 3rem;
    }

    .service-intro {
        margin-bottom: 36px;
    }

    .service-feature-image {
        min-height: 270px;
    }

    .service-feature-content {
        padding: 31px 24px;
    }

    .service-feature-content h3 {
        font-size: 2.2rem;
    }
}