/* =========================================================
   HANGARO PULL & DRY — COMPLETE COMMON STYLE
   ========================================================= */

/* =========================================================
   2. GLOBAL VARIABLES
   ========================================================= */

:root{
    --body-font:'Poppins',sans-serif;
    --heading-font:'Poppins',sans-serif;

    --green:#1f8f50;
    --dark-green:#173b28;

    --blue-dark:#18233b;
    --blue-mid:#1b376d;
    --blue-light:#246abd;

    --yellow:#ffc400;
    --text:#17231b;
    --muted:#4c554f;

    --white:#ffffff;
    --border:#e4ebe5;
}


/* =========================================================
   3. RESET / GLOBAL
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,
body{
    width:100%;
    margin:0;
    padding:0;
}

body{
    font-family:var(--body-font);
    color:var(--text);
    background:#fff;
    line-height:1.6;
    font-size:20px;
    overflow-x:hidden;
}

button,
input,
textarea,
select{
    font-family:var(--body-font);
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--heading-font);
    color:var(--text);
    font-weight:600;
    line-height:1.25;
}

p{
    font-family:var(--body-font);
    font-weight:400;
    font-size:20px;
}

a{
    font-family:var(--body-font);
    text-decoration:none;
}

img{
    max-width:100%;
}


/* =========================================================
   4. HEADER
   ========================================================= */

.site-header{
    min-height:76px;

    display:flex;
    align-items:center;

    gap:28px;

    padding:14px 6%;

    border-bottom:1px solid #eee;

    position:sticky;
    top:0;

    background:#fff;

    z-index:100;
}

.brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.brand a{
    display:block;
}

.site-logo{
    display:block;
    width:auto;
    height:52px;
    max-width:260px;
    object-fit:contain;
}

.site-header nav{
    display:flex;
    align-items:center;
    gap:24px;
    margin-left:auto;
}

.site-header nav a{
    color:#17231b;
    font-size:20px;
    font-weight:500;
}

.site-header nav a:hover{
    color:var(--green);
}

.header-cta,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:var(--green);
    color:#fff !important;

    border-radius:10px;

    padding:12px 18px;

    font-size:20px;
    font-weight:700;
}

.header-cta:hover,
.btn:hover{
    opacity:.92;
}

.menu{
    display:none;

    margin-left:auto;

    border:0;
    background:none;

    font-size:28px;

    cursor:pointer;
}


/* =========================================================
   5. HERO
   ========================================================= */

.hero{
    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    min-height:680px;

    padding:60px 6%;

    gap:50px;

    background:#f7fbf8;
}

.hero-copy{
    min-width:0;
}

.eyebrow{
    margin:0 0 10px;

    font-size:20px;
    font-weight:800;

    letter-spacing:2px;

    color:var(--green);
}

.hero h1,
.hero h2{
    font-size:clamp(32px,4vw,52px);

    line-height:1.1;

    margin:10px 0 20px;
}

.hero p{
    max-width:650px;
    font-size:20px;
}

.hero-media{
    aspect-ratio:6 / 5;

    overflow:hidden;

    border-radius:28px;

    background:#eaf4ed;
}

.hero-media img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.actions{
    display:flex;
    gap:12px;
    margin-top:28px;
}

.secondary{
    background:var(--dark-green);
}


/* =========================================================
   6. GENERAL SECTIONS
   ========================================================= */

.site-header + main section{
    padding:80px 6%;
}

h2{
    font-size:38px;
    margin-top:0;
}

.grid{
    display:grid;
    gap:20px;
}

.three{
    grid-template-columns:repeat(3,1fr);
}

.four{
    grid-template-columns:repeat(4,1fr);
}

article{
    padding:28px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

    font-weight:700;
}

.cta{
    text-align:center;
    background:#eaf4ed;
}


/* =========================================================
   7. CONTAINER / PAGE
   ========================================================= */

.container{
    width:min(1180px,calc(100% - 32px));
    margin-inline:auto;
}

.page-shell{
    padding:64px 0;
}

.page-intro{
    max-width:760px;
    margin-bottom:36px;
}

.section-lead{
    max-width:760px;
    font-size:20px;
}


/* =========================================================
   8. SERVICES
   ========================================================= */

.service-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;
}

.service-card{
    min-width:0;

    overflow:hidden;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.media-frame{
    width:100%;

    overflow:hidden;

    background:#f4f7f4;
}

.service-frame{
    width:100%;
    height:300px;
}

.media-frame img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.service-card-body{
    padding:18px 10px 10px;
}

.service-card h2,
.service-card h3{
    margin:0 0 12px;

    font-size:20px;

    line-height:1.4;
}

.service-card p{
    margin:0 0 14px;

    color:var(--muted);

    font-size:20px;
    line-height:1.65;

    font-weight:400;
}

.text-link{
    display:inline-block;

    color:#087a35;

    font-size:20px;
    font-weight:700;
}

.text-link:hover{
    color:var(--green);
}


/* =========================================================
   9. HOME SERVICE GRID
   ========================================================= */

.services-home{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:6%;
    padding-right:6%;
}

.home-service-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

    width:100%;
}

.home-service-grid .service-card{
    width:100%;
    min-width:0;
}

.home-service-grid .service-frame{
    width:100%;
    height:320px;
}

.home-service-grid .service-frame img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.home-service-grid .service-card-body{
    padding:18px 5px 10px;
}

.home-service-grid .service-card-body h3{
    margin:0 0 10px;

    font-size:20px;
    line-height:1.35;
}

.home-service-grid .service-card-body p{
    margin:0 0 12px;

    font-size:20px;
    line-height:1.6;
}

.home-service-grid .text-link{
    font-size:20px;
}


/* CENTER HOME SERVICES HEADING */

.services-home > .eyebrow,
.services-home > h2,
.services-home > .section-lead{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.services-home > .eyebrow{
    margin-bottom:8px;
}

.services-home > h2{
    margin-top:0;
    margin-bottom:15px;
}

.services-home > .section-lead{
    max-width:760px;
    margin-bottom:35px;
}


/* =========================================================
   10. SERVICE DETAIL HERO
   IMAGE LEFT + CONTENT RIGHT
   ========================================================= */

.service-hero{
    display:grid;

    grid-template-columns:45% 55%;

    gap:45px;

    align-items:center;

    width:100%;
    max-width:none;

    padding:56px 6%;
}

.service-hero-frame{
    width:100%;

    height:420px;

    aspect-ratio:auto;

    border-radius:22px;

    overflow:hidden;
}

.service-hero-frame img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.service-copy{
    width:100%;
    max-width:none;
}

.service-copy h1,
.service-copy h2,
.service-copy h3{
    margin-top:0;
}


/* FULL WIDTH CONTENT BELOW HERO */

.service-hero + .content-section{
    width:100%;
    max-width:none;

    margin:0;

    padding:40px 6%;
}

.service-hero + .content-section > *{
    max-width:none;
}


/* =========================================================
   11. GENERAL CONTENT SECTION
   ========================================================= */

.content-section{
    padding:34px 0;
}

.content-section h1{
    font-size:clamp(36px,4vw,52px);
}

.content-section h2{
    font-size:38px;
}

.content-section h3{
    font-size:28px;
}

.content-section p{
    font-size:20px;
    line-height:1.75;
}

.related-links{
    display:grid;
    gap:10px;
}

.related-links a{
    padding:12px 14px;

    border:1px solid var(--border);

    border-radius:10px;

    color:#087a35;

    font-size:20px;
}


/* =========================================================
   12. BLOG
   ========================================================= */

.blog-layout{
    display:grid;

    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);

    gap:45px;

    align-items:start;
}

.blog-main,
.blog-sidebar{
    min-width:0;
}

.recent-posts{
    position:sticky;
    top:100px;
}

.recent-posts h3{
    margin-top:0;
    font-size:28px;
}

.recent-posts a{
    display:block;

    padding:10px 0;

    border-bottom:1px solid #e7ece8;

    color:var(--text);

    font-size:20px;

    line-height:1.45;
}

.recent-posts a:hover{
    color:#087a35;
}

.prose{
    max-width:100%;

    font-size:20px;

    line-height:1.75;
}

.prose h1{
    font-size:clamp(36px,4vw,52px);
    line-height:1.2;
}

.prose h2{
    font-size:38px;
    line-height:1.25;
}

.prose h3{
    font-size:28px;
    line-height:1.3;
}

.prose h4{
    font-size:24px;
    line-height:1.3;
}

.prose img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:18px;
}

.prose p{
    margin:0 0 20px;
    font-size:20px;
}

.prose ul,
.prose ol{
    padding-left:25px;
    font-size:20px;
}


/* =========================================================
   13. VISIBLE CONTENT LINKS
   ========================================================= */

.prose a,
.content-section a,
.page-content a,
.blog-content a{
    color:#087a35;

    text-decoration:underline;

    text-decoration-thickness:1.5px;

    text-underline-offset:3px;

    font-weight:500;

    transition:
        color .2s ease,
        text-decoration-thickness .2s ease;
}

.prose a:hover,
.content-section a:hover,
.page-content a:hover,
.blog-content a:hover{
    color:#173b28;

    text-decoration-thickness:2px;
}


/* =========================================================
   14. BOTTOM H1
   ========================================================= */

.bottom-h1-box{
    background:#f7faf8;

    border-top:1px solid #e4ebe6;

    padding:56px 20px;

    text-align:center;
}

.bottom-h1-inner{
    max-width:900px;
    margin:0 auto;
}

.bottom-h1-box h1{
    margin:0 auto 12px;

    font-size:clamp(30px,4vw,46px);

    line-height:1.12;

    letter-spacing:-.02em;
}

.bottom-h1-box p{
    max-width:760px;

    margin:0 auto 22px;

    font-size:20px;

    line-height:1.7;
}


/* =========================================================
   15. HANGARO FOOTER
   ========================================================= */

.site-footer{
    width:100%;

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        minmax(0,1fr)
        minmax(0,1.45fr);

    column-gap:60px;
    row-gap:35px;

    padding:58px 7% 0;

    color:#fff;

    background:linear-gradient(
        180deg,
        var(--blue-dark) 0%,
        var(--blue-mid) 55%,
        var(--blue-light) 100%
    );

    overflow:hidden;
}


/* =========================================================
   16. FOOTER HEADINGS
   ========================================================= */

.site-footer h3{
    position:relative;

    margin:0 0 18px;

    padding-bottom:12px;

    color:#fff;

    font-family:var(--heading-font);

    font-size:20px;

    line-height:1.2;

    font-weight:800;
}

.site-footer h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:82px;
    height:3px;

    background:linear-gradient(
        to right,
        var(--yellow) 0 45%,
        #315da8 45% 100%
    );

    border-radius:5px;
}


/* =========================================================
   17. FOOTER ABOUT — FIXED
   ========================================================= */

.footer-about{
    min-width:0;
}

.footer-about h2{
    margin:0 0 18px;

    color:#fff !important;

    font-family:var(--heading-font);

    font-size:30px;

    line-height:1.2;

    font-weight:800;
}

.footer-about p{
    max-width:560px;

    margin:0;

    color:#fff;

    font-size:20px;

    line-height:1.65;

    font-weight:500;
}


/* =========================================================
   18. SOCIAL ICONS
   ========================================================= */

.footer-social{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:22px;

    flex-wrap:nowrap;
}

.footer-social .social-box{
    width:44px;
    height:44px;

    min-width:44px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#fff;

    color:#f4b900;

    border-radius:9px;

    text-decoration:none;

    flex-shrink:0;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.footer-social .social-box:hover{
    transform:translateY(-4px);

    box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.footer-social .social-box span{
    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;
}

.footer-social .social-box svg{
    width:22px;
    height:22px;

    display:block;

    color:#f4b900;
}

.footer-social .social-box svg path{
    fill:currentColor;
}

.footer-social .social-box svg rect{
    fill:none;
    stroke:currentColor;
}

.footer-social .social-box svg circle{
    stroke:currentColor;
}


/* =========================================================
   19. QUICK LINKS
   ========================================================= */

.footer-links{
    min-width:0;
}

.footer-links a{
    display:block;

    margin:11px 0;

    color:#fff;

    font-size:20px;

    line-height:1.4;

    font-weight:500;

    text-decoration:none;
}

.footer-links a::before{
    content:"›";

    color:var(--yellow);

    font-size:20px;

    font-weight:900;

    margin-right:8px;
}

.footer-links a:hover{
    color:var(--yellow);
}


/* =========================================================
   20. CONTACT AREA
   ========================================================= */

.footer-contact{
    min-width:0;
}

.contact-item{
    display:grid;

    grid-template-columns:52px minmax(0,1fr);

    column-gap:14px;

    align-items:start;

    width:100%;

    margin:13px 0;

    color:#fff;

    font-size:20px;

    line-height:1.55;

    font-weight:500;

    text-decoration:none;

    word-break:normal;

    transition:
        transform .25s ease,
        color .25s ease;
}

.contact-item:hover{
    color:#ffc400;
    transform:translateY(-2px);
}

.contact-item > span:last-child{
    min-width:0;

    display:block;

    padding-top:8px;
}


/* =========================================================
   21. CONTACT ICON
   ========================================================= */

.contact-icon{
    width:52px;
    height:52px;

    min-width:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--yellow);

    color:#fff;

    border-radius:10px;

    box-sizing:border-box;
}

.contact-icon svg{
    width:23px;
    height:23px;

    display:block;

    color:#fff;
}

.contact-icon svg path{
    fill:currentColor;
}


/* ADDRESS */

.address-item{
    margin-top:16px;
}

.address-item > span:last-child{
    padding-top:4px;

    line-height:1.65;
}


/* =========================================================
   22. COPYRIGHT
   ========================================================= */

.footer-bottom{
    grid-column:1 / -1;

    width:100%;

    border-top:1px solid rgba(255,255,255,.35);

    padding:22px 0 30px;

    margin-top:5px;

    color:#fff;

    font-size:20px;

    line-height:1.5;

    font-weight:500;

    text-align:left;
}


/* =========================================================
   23. FOOTER YELLOW STRIP
   ========================================================= */

.site-footer::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:6px;

    background:var(--yellow);
}


/* =========================================================
   24. PREMIUM HOVER / UI EFFECTS
   ========================================================= */

a,
button,
article,
.service-card,
.related-links a,
.text-link,
.btn,
.header-cta{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.service-card:hover,
article:hover{
    transform:translateY(-5px);

    box-shadow:0 14px 35px rgba(0,0,0,.10);
}

.btn:hover,
.header-cta:hover{
    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.text-link:hover{
    transform:translateY(-2px);
}

.related-links a:hover{
    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);
}


/* IMAGE LIGHT ZOOM */

.service-card .service-frame img{
    transition:transform .35s ease;
}

.service-card:hover .service-frame img{
    transform:scale(1.03);
}


/* =========================================================
   25. TABLET
   ========================================================= */

@media(max-width:900px){

    .service-grid,
    .home-service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:24px;
    }

    .service-hero{
        grid-template-columns:1fr;

        gap:28px;
    }

    .service-hero-frame{
        order:1;
    }

    .service-copy{
        order:2;
    }

    .blog-layout{
        grid-template-columns:1fr;

        gap:35px;
    }

    .recent-posts{
        position:static;
    }

    .site-footer{
        grid-template-columns:
            minmax(0,1.5fr)
            minmax(0,1fr)
            minmax(0,1.3fr);

        column-gap:30px;

        padding-left:5%;
        padding-right:5%;
    }
}


/* =========================================================
   26. MOBILE
   ========================================================= */

@media(max-width:800px){

    .site-header nav,
    .header-cta{
        display:none;
    }

    .menu{
        display:block;
    }

    .site-logo{
        height:42px;
        max-width:180px;
    }

    .hero{
        grid-template-columns:1fr;

        padding:42px 5%;

        min-height:auto;
    }

    .hero-copy{
        order:1;
    }

    .hero-media{
        order:2;
    }

    .hero h1,
    .hero h2{
        font-size:42px;
    }

    .site-header + main section{
        padding:55px 5%;
    }

    .three,
    .four{
        grid-template-columns:1fr;
    }


    /* FOOTER SINGLE COLUMN */

    .site-footer{
        grid-template-columns:1fr;

        column-gap:0;

        row-gap:32px;

        padding:48px 7% 0;
    }

    .site-footer h3{
        font-size:20px;

        margin-bottom:17px;
    }

    .footer-about h2{
        color:#fff !important;
    }

    .footer-about p{
        font-size:20px;

        line-height:1.65;
    }

    .footer-social{
        gap:8px;

        margin-top:20px;
    }

    .footer-social .social-box{
        width:44px;
        height:44px;

        min-width:44px;
    }

    .footer-links a{
        font-size:20px;

        margin:12px 0;
    }

    .contact-item{
        grid-template-columns:52px minmax(0,1fr);

        column-gap:14px;

        font-size:20px;
    }

    .contact-icon{
        width:52px;
        height:52px;

        min-width:52px;
    }

    .footer-bottom{
        padding:20px 0 28px;

        font-size:20px;
    }

    .page-shell{
        padding:42px 0;
    }

    .service-card-body{
        padding:18px 5px 5px;
    }

    .service-hero{
        grid-template-columns:1fr;

        gap:28px;

        padding:42px 5%;
    }

    .service-hero-frame{
        order:1;

        height:auto;

        aspect-ratio:4 / 3;
    }

    .service-copy{
        order:2;
    }

    .service-hero + .content-section{
        padding:35px 5%;
    }

    .content-section{
        padding:25px 5%;
    }

    .content-section h2{
        font-size:34px;
    }

    .content-section h3{
        font-size:26px;
    }

    .content-section p{
        font-size:20px;
    }

    .home-service-grid{
        gap:32px;
    }

    .home-service-grid .service-frame{
        height:auto;

        aspect-ratio:4 / 3;
    }

    .bottom-h1-box{
        padding:40px 18px;
    }

    .bottom-h1-box h1{
        font-size:30px;
    }

    .prose{
        max-width:100%;
        font-size:20px;
        line-height:1.7;
    }

    .prose h1{
        font-size:34px;
    }

    .prose h2{
        font-size:32px;
    }

    .prose h3{
        font-size:25px;
    }

    .prose p{
        font-size:20px;
    }
}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media(max-width:600px){

    .service-grid,
    .home-service-grid{
        grid-template-columns:1fr;

        gap:30px;
    }

    .services-home{
        width:100%;

        padding-left:5%;
        padding-right:5%;
    }

    .home-service-grid .service-card{
        width:100%;
    }

    .home-service-grid .service-frame{
        width:100%;

        height:auto;

        aspect-ratio:4 / 3;
    }

    .home-service-grid .service-frame img{
        width:100%;
        height:100%;

        object-fit:cover;
    }

    .home-service-grid .service-card-body h3,
    .home-service-grid .service-card-body p,
    .home-service-grid .text-link{
        font-size:20px;
    }

    .contact-item{
        font-size:20px;
    }

    .address-item > span:last-child{
        line-height:1.65;
    }
}


/* =========================================================
   28. VERY SMALL PHONE
   ========================================================= */

@media(max-width:360px){

    .site-footer{
        padding-left:6%;
        padding-right:6%;
    }

    .footer-social{
        gap:6px;
    }

    .footer-social .social-box{
        width:42px;
        height:42px;

        min-width:42px;
    }

    .contact-item{
        grid-template-columns:48px minmax(0,1fr);

        column-gap:12px;
    }

    .contact-icon{
        width:48px;
        height:48px;

        min-width:48px;
    }
}


/* =========================================================
   29. TOUCH DEVICES
   ========================================================= */

@media (hover:none){

    .service-card:hover,
    article:hover,
    .btn:hover,
    .header-cta:hover,
    .text-link:hover,
    .related-links a:hover,
    .footer-social .social-box:hover,
    .contact-item:hover,
    .site-header nav a:hover{
        transform:none;
        box-shadow:none;
    }

    .service-card:hover .service-frame img{
        transform:none;
    }
}


/* =========================================================
   30. HANGARO — FINAL HOME BLOCK
   CTA LEFT + SEO CONTENT RIGHT
   ========================================================= */

.final-home-block{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:60px 6%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:30px;

    align-items:stretch;
}

.final-home-cta{
    width:100%;

    margin:0;

    min-height:260px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:45px 35px;

    border-radius:18px;

    background:#eaf4ed;
}

.final-home-cta h2{
    margin:0 0 14px;

    font-size:32px;

    line-height:1.25;
}

.final-home-cta p{
    max-width:520px;

    margin:0 0 22px;

    font-size:20px;

    line-height:1.6;
}

.final-home-seo{
    width:100%;

    min-height:260px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:45px 35px;

    border-radius:18px;

    background:#f7faf8;

    border:1px solid var(--border);

    text-align:left;
}

.final-home-seo h1{
    margin:0 0 16px;

    font-size:clamp(30px,3.2vw,44px);

    line-height:1.15;

    font-weight:700;
}

.final-home-seo p{
    margin:0;

    font-size:20px;

    line-height:1.7;

    color:var(--muted);
}

.final-home-cta,
.final-home-seo{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.final-home-cta:hover,
.final-home-seo:hover{
    transform:translateY(-4px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.08);
}

@media(max-width:800px){

    .final-home-block{
        grid-template-columns:1fr;

        gap:20px;

        padding:45px 5%;
    }

    .final-home-cta,
    .final-home-seo{
        min-height:auto;

        padding:35px 25px;
    }

    .final-home-cta h2{
        font-size:28px;
    }

    .final-home-seo h1{
        font-size:30px;
    }
}


/* =========================================================
   31. HANGARO — STANDARD PAGE
   ========================================================= */

.standard-page-layout{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        340px;

    column-gap:28px;

    align-items:start;
}

.standard-page-main{
    width:100%;

    min-width:0;

    margin:0;

    padding:0;

    overflow:hidden;
}

.standard-page-featured-image{
    width:100%;

    margin:0 0 28px;

    padding:0;

    overflow:hidden;

    border-radius:18px;

    background:#f4f7f4;
}

.standard-page-featured-image img{
    width:100%;

    height:auto;

    max-width:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    border-radius:18px;
}

.standard-page-content{
    width:100%;

    min-width:0;

    max-width:100%;

    margin:0;

    padding:0;

    overflow:hidden;
}

.standard-page-content > .eyebrow{
    margin:0 0 8px;

    color:var(--green);

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;
}

.standard-page-content > h1{
    margin:0 0 24px;

    font-size:clamp(32px,4vw,48px);

    line-height:1.15;
}

.standard-page-content .prose{
    width:100%;

    max-width:100%;

    min-width:0;

    margin:0;

    font-size:20px;

    line-height:1.75;

    overflow:hidden;
}

.standard-page-content .prose h2{
    margin:38px 0 14px;

    font-size:32px;

    line-height:1.25;
}

.standard-page-content .prose h3{
    margin:30px 0 12px;

    font-size:26px;

    line-height:1.3;
}

.standard-page-content .prose h4{
    margin:25px 0 10px;

    font-size:23px;

    line-height:1.3;
}

.standard-page-content .prose p{
    margin:0 0 20px;

    font-size:20px;

    line-height:1.75;
}

.standard-page-content .prose strong{
    font-weight:700;
}

.standard-page-content .prose ul,
.standard-page-content .prose ol{
    margin:0 0 22px;

    padding-left:28px;
}

.standard-page-content .prose li{
    margin-bottom:8px;

    font-size:20px;

    line-height:1.7;
}

.standard-page-content .prose a{
    color:#087a35;

    font-size:1.03em;

    font-weight:600;

    text-decoration:underline;

    text-decoration-thickness:1.5px;

    text-underline-offset:3px;
}

.standard-page-content .prose a:hover{
    color:var(--green);

    text-decoration-thickness:2px;
}


/* =========================================================
   32. RIGHT PRODUCTS & SERVICES SIDEBAR
   ========================================================= */

.page-services-sidebar,
.products-services-sidebar{
    width:340px;

    max-width:340px;

    min-width:0;

    margin:0 0 0 auto;

    padding:0;

    justify-self:end;

    align-self:start;

    position:sticky;

    top:100px;

    overflow:hidden;
}

.page-services-box,
.products-services-heading{
    width:100%;

    margin:0 0 18px;

    padding:0;
}

.page-services-box > .eyebrow,
.products-services-heading .eyebrow{
    margin:0 0 7px;

    color:var(--green);

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;
}

.page-services-box > h2,
.products-services-heading h2{
    margin:0 0 18px;

    color:var(--text);

    font-size:30px;

    line-height:1.2;

    font-weight:600;
}

.page-service-list{
    width:100%;

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:0;

    padding:0;
}

.page-service-card{
    width:100%;

    min-width:0;

    min-height:98px;

    display:grid;

    grid-template-columns:
        82px
        minmax(0,1fr);

    gap:12px;

    align-items:center;

    margin:0;

    padding:8px;

    border:1px solid var(--border);

    border-radius:10px;

    background:#fff;

    box-shadow:0 4px 14px rgba(0,0,0,.045);

    overflow:hidden;
}

.page-service-card:hover{
    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(0,0,0,.09);
}

.page-service-image{
    width:82px;

    height:82px;

    min-width:82px;

    overflow:hidden;

    border-radius:8px;

    background:#f4f7f4;
}

.page-service-image img{
    width:100%;

    height:100%;

    display:block;

    object-fit:cover;
}

.page-service-body{
    width:100%;

    min-width:0;

    height:auto;

    padding:0;
}

.page-service-body h3{
    margin:0 0 5px;

    color:var(--text);

    font-size:14px;

    line-height:1.3;

    font-weight:700;
}

.page-service-body h3 a{
    color:var(--text);

    text-decoration:none;
}

.page-service-body h3 a:hover{
    color:var(--green);
}


/* DESKTOP DESCRIPTION HIDDEN */

@media(min-width:801px){

    .page-services-sidebar .page-service-card p,
    .products-services-sidebar .page-service-card p,
    .page-services-sidebar .service-card p,
    .products-services-sidebar .service-card p,
    .page-services-sidebar .page-service-body p,
    .products-services-sidebar .page-service-body p,
    .page-services-sidebar .service-card-body p,
    .products-services-sidebar .service-card-body p{
        display:none !important;

        visibility:hidden !important;

        height:0 !important;

        max-height:0 !important;

        margin:0 !important;

        padding:0 !important;

        overflow:hidden !important;
    }
}

.page-service-body .text-link,
.page-service-link{
    display:inline-block;

    color:#087a35;

    font-size:11px;

    line-height:1.3;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   33. DESKTOP STANDARD PAGE FIX
   ========================================================= */

@media(min-width:801px){

    .standard-page-layout{
        width:100% !important;

        max-width:none !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            340px !important;

        gap:28px !important;

        align-items:start !important;

        margin:0 !important;

        padding:0 !important;
    }

    .standard-page-main{
        grid-column:1 !important;

        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;

        margin:0 !important;

        padding:0 !important;

        overflow:hidden !important;
    }

    .standard-page-content{
        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;

        overflow:hidden !important;
    }

    .standard-page-content .prose{
        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;

        overflow:hidden !important;

        overflow-wrap:anywhere !important;

        word-wrap:break-word !important;
    }

    .standard-page-content .prose h1,
    .standard-page-content .prose h2,
    .standard-page-content .prose h3,
    .standard-page-content .prose h4,
    .standard-page-content .prose p,
    .standard-page-content .prose ul,
    .standard-page-content .prose ol,
    .standard-page-content .prose li{
        max-width:100% !important;

        min-width:0 !important;

        white-space:normal !important;

        overflow-wrap:break-word !important;

        word-wrap:break-word !important;

        word-break:normal !important;
    }

    .standard-page-content .prose img,
    .standard-page-content .prose video,
    .standard-page-content .prose iframe,
    .standard-page-content .prose table{
        max-width:100% !important;

        height:auto !important;
    }

    .page-services-sidebar,
    .products-services-sidebar{
        grid-column:2 !important;

        width:340px !important;

        max-width:340px !important;

        min-width:0 !important;

        justify-self:end !important;

        overflow:hidden !important;
    }

    .page-service-card{
        height:auto !important;

        min-height:98px !important;

        max-height:none !important;

        grid-template-columns:
            82px
            minmax(0,1fr) !important;

        align-items:center !important;
    }

    .page-service-image{
        width:82px !important;

        height:82px !important;
    }

    .page-service-body{
        height:auto !important;

        padding:0 !important;
    }

    .page-service-body h3{
        margin:0 0 5px !important;

        font-size:14px !important;

        line-height:1.3 !important;
    }

    .page-service-body .text-link,
    .page-service-link{
        font-size:11px !important;

        line-height:1.3 !important;
    }

}


/* =========================================================
   34. STANDARD PAGE — DESKTOP CONTAINER FIX
   NO :has() SELECTOR
   ========================================================= */

@media (min-width:801px){

    .standard-page-layout{
        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 !important;
    }

    .standard-page-main{
        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;

        margin:0 !important;

        padding:0 !important;
    }

    .standard-page-content{
        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;

        margin:0 !important;

        padding:0 !important;
    }

}


/* =========================================================
   35. MOBILE STANDARD PAGE
   ========================================================= */

@media(max-width:800px){

    .standard-page-layout{
        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        gap:40px !important;

        margin:0 !important;

        padding:0 !important;
    }

    .standard-page-main{
        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        order:1 !important;
    }

    .standard-page-featured-image{
        width:100% !important;

        margin:0 0 24px !important;

        border-radius:14px !important;

        overflow:hidden !important;
    }

    .standard-page-featured-image img{
        width:100% !important;

        height:auto !important;

        max-width:100% !important;

        display:block !important;

        object-fit:contain !important;

        border-radius:14px !important;
    }

    .standard-page-content{
        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;
    }

    .standard-page-content > h1{
        margin-bottom:20px;

        font-size:34px;

        line-height:1.15;
    }

    .standard-page-content .prose{
        width:100%;

        max-width:100%;

        font-size:20px;

        line-height:1.7;
    }

    .standard-page-content .prose p{
        font-size:20px;

        line-height:1.7;
    }

    .standard-page-content .prose h2{
        font-size:30px;
    }

    .standard-page-content .prose h3{
        font-size:25px;
    }

    .page-services-sidebar,
    .products-services-sidebar{
        width:100% !important;

        max-width:none !important;

        order:2 !important;

        position:static !important;

        margin:0 !important;

        padding:0 !important;
    }

    .page-services-box > .eyebrow,
    .products-services-heading .eyebrow{
        font-size:14px;
    }

    .page-services-box > h2,
    .products-services-heading h2{
        margin-bottom:20px;

        font-size:30px;
    }

    .page-service-list{
        width:100%;

        display:flex;

        flex-direction:column;

        gap:16px;
    }

    .page-service-card{
        width:100%;

        display:grid;

        grid-template-columns:
            90px
            minmax(0,1fr);

        gap:12px;

        padding:10px;

        border-radius:11px;
    }

    .page-service-image{
        width:90px;

        height:90px;

        min-width:90px;
    }

    .page-service-body{
        padding:2px 2px 2px 0;
    }

    .page-service-body h3{
        font-size:16px;
    }

    .page-service-body p{
        font-size:13px;
    }

    .page-service-body .text-link,
    .page-service-link{
        font-size:12px;
    }


    /* =====================================================
       MOBILE HEADER
       ===================================================== */

    .site-header{
        position:sticky;

        top:0;

        z-index:9999;

        display:flex;

        align-items:center;

        width:100%;

        min-height:72px;

        padding:12px 5%;

        background:#fff;
    }

    .site-header .brand{
        margin-right:auto;
    }

    .site-logo{
        height:42px;

        max-width:180px;
    }

    .site-header .menu{
        display:flex !important;

        align-items:center;

        justify-content:center;

        margin-left:auto;

        width:46px;

        height:46px;

        border:0;

        background:transparent;

        font-size:28px;

        cursor:pointer;

        z-index:10001;
    }

    .site-header nav,
    .site-header .main-navigation{
        display:none !important;
    }

    .site-header nav.mobile-open,
    .site-header .main-navigation.mobile-open{
        display:flex !important;

        position:absolute;

        top:100%;

        left:0;
        right:0;

        width:100%;

        margin:0;

        padding:12px 5% 20px;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        background:#fff;

        border-top:1px solid #eee;

        border-bottom:1px solid #e5ebe7;

        box-shadow:
            0 12px 30px rgba(0,0,0,.10);

        max-height:calc(100vh - 72px);

        overflow-y:auto;

        z-index:9998;
    }

    .site-header nav.mobile-open > a,
    .site-header .main-navigation.mobile-open > a{
        display:flex;

        align-items:center;

        min-height:48px;

        padding:10px 8px;

        color:#17231b;

        font-size:19px;

        font-weight:500;

        border-bottom:1px solid #f0f2f0;

        text-decoration:none;
    }

    .site-header .services-menu{
        display:block;

        width:100%;

        position:relative;
    }

    .site-header .services-toggle{
        width:100%;

        min-height:48px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:10px 8px;

        border:0;

        border-bottom:1px solid #f0f2f0;

        background:#fff;

        color:#17231b;

        font-family:var(--body-font);

        font-size:19px;

        font-weight:500;

        cursor:pointer;

        text-align:left;
    }

    .site-header .services-arrow{
        margin-left:auto;

        font-size:11px;

        transition:transform .2s ease;
    }

    .site-header .services-dropdown{
        position:static;

        width:100%;

        max-height:0;

        overflow:hidden;

        padding:0;

        margin:0;

        border:0;

        border-radius:0;

        box-shadow:none;

        background:#f7faf8;

        opacity:1;

        visibility:visible;

        pointer-events:none;

        transform:none;

        transition:
            max-height .25s ease;
    }

    .site-header
    .services-menu.services-open
    .services-dropdown{
        max-height:450px;

        overflow-y:auto;

        padding:8px 6px;

        pointer-events:auto;
    }

    .site-header
    .services-menu.services-open
    .services-arrow{
        transform:rotate(180deg);
    }

    .site-header .service-dropdown-link{
        display:block;

        padding:10px;

        color:#17231b;

        font-size:15px;

        line-height:1.4;

        text-decoration:none;

        border-radius:7px;
    }

    .site-header .service-dropdown-link:hover{
        background:#eaf4ed;

        color:var(--green);
    }

    .site-header .mobile-book-now{
        display:flex;

        align-items:center;

        justify-content:center;

        margin-top:12px;

        min-height:48px;

        padding:10px 16px;

        border-radius:10px;

        background:var(--green);

        color:#fff !important;

        font-size:18px !important;

        font-weight:700 !important;
    }

    .site-header > .header-cta{
        display:none !important;
    }


    /* MOBILE FOOTER */

    .site-footer{
        grid-template-columns:1fr;

        column-gap:0;

        row-gap:32px;

        padding:48px 7% 0;
    }

    .site-footer h3{
        font-size:20px;

        margin-bottom:17px;
    }

    .footer-about h2{
        color:#fff !important;

        font-size:30px;

        margin:0 0 18px;
    }

    .footer-about p{
        font-size:20px;

        line-height:1.65;
    }

    .footer-social{
        gap:8px;

        margin-top:20px;
    }

    .footer-social .social-box{
        width:44px;

        height:44px;

        min-width:44px;
    }

    .footer-links a{
        font-size:20px;

        margin:12px 0;
    }

    .contact-item{
        grid-template-columns:
            52px
            minmax(0,1fr);

        column-gap:14px;

        font-size:20px;
    }

    .contact-icon{
        width:52px;

        height:52px;

        min-width:52px;
    }

    .site-footer .address-item{
        display:grid !important;

        grid-template-columns:
            52px
            minmax(0,1fr) !important;

        column-gap:18px !important;

        align-items:start !important;

        width:100% !important;

        margin-top:16px !important;
    }

    .site-footer .address-item > span:last-child{
        min-width:0 !important;

        width:100% !important;

        padding-top:4px !important;

        font-size:18px !important;

        line-height:1.65 !important;

        word-break:normal !important;

        overflow-wrap:normal !important;
    }

    .site-footer .address-item .contact-icon{
        width:52px !important;

        height:52px !important;

        min-width:52px !important;
    }

    .footer-bottom{
        padding:20px 0 28px;

        font-size:20px;
    }


    /* MOBILE HERO */

    .hero h2{
        font-size:34px !important;

        line-height:1.15 !important;

        margin:8px 0 18px !important;
    }


    /* MOBILE CENTER WHY HANGARO */

    .hero + section h2{
        width:100% !important;

        text-align:center !important;

        margin-left:auto !important;

        margin-right:auto !important;
    }

    .hero + section .grid{
        width:100% !important;
    }

    .hero + section .grid article{
        width:100% !important;

        text-align:center !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;
    }


    /* MOBILE CENTER HOW IT WORKS */

    .services-home + section h2{
        width:100% !important;

        text-align:center !important;

        margin-left:auto !important;

        margin-right:auto !important;
    }

    .services-home + section .grid{
        width:100% !important;
    }

    .services-home + section .grid article{
        width:100% !important;

        text-align:center !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;
    }


    /* FINAL HOME BLOCK */

    .final-home-block{
        grid-template-columns:1fr;

        gap:20px;

        padding:45px 5%;
    }

    .final-home-cta,
    .final-home-seo{
        min-height:auto;

        padding:35px 25px;
    }

    .final-home-cta h2{
        font-size:28px;
    }

    .final-home-seo h1{
        font-size:30px;
    }
}


/* =========================================================
   36. SMALL MOBILE
   ========================================================= */

@media(max-width:600px){

    .service-grid,
    .home-service-grid{
        grid-template-columns:1fr;

        gap:30px;
    }

    .services-home{
        width:100%;

        padding-left:5%;
        padding-right:5%;
    }

    .home-service-grid .service-card{
        width:100%;
    }

    .home-service-grid .service-frame{
        width:100%;

        height:auto;

        aspect-ratio:4 / 3;
    }

    .home-service-grid .service-frame img{
        width:100%;

        height:100%;

        object-fit:cover;
    }

    .home-service-grid .service-card-body h3,
    .home-service-grid .service-card-body p,
    .home-service-grid .text-link{
        font-size:20px;
    }

    .contact-item{
        font-size:20px;
    }

    .address-item > span:last-child{
        line-height:1.65;
    }

    .standard-page-layout{
        gap:36px;
    }

    .standard-page-featured-image{
        margin-bottom:22px;

        border-radius:12px;
    }

    .standard-page-featured-image img{
        border-radius:12px;
    }

    .standard-page-content > h1{
        font-size:30px;
    }

    .standard-page-content .prose{
        font-size:20px;
    }

    .standard-page-content .prose p{
        font-size:20px;
    }

    .standard-page-content .prose h2{
        font-size:28px;
    }

    .standard-page-content .prose h3{
        font-size:24px;
    }

    .page-service-card{
        grid-template-columns:
            82px
            minmax(0,1fr);

        column-gap:12px;

        padding:8px;
    }

    .page-service-image{
        width:82px;

        height:82px;

        min-width:82px;
    }

    .page-service-body h3{
        font-size:15px;
    }

    .page-service-body p{
        font-size:12px;

        line-height:1.4;
    }

    .page-service-body .text-link,
    .page-service-link{
        font-size:12px;
    }
}


/* =========================================================
   37. VERY SMALL PHONE
   ========================================================= */

@media(max-width:360px){

    .site-footer{
        padding-left:6%;
        padding-right:6%;
    }

    .footer-social{
        gap:6px;
    }

    .footer-social .social-box{
        width:42px;
        height:42px;

        min-width:42px;
    }

    .contact-item{
        grid-template-columns:
            48px
            minmax(0,1fr);

        column-gap:12px;
    }

    .contact-icon{
        width:48px;
        height:48px;

        min-width:48px;
    }

    .page-service-card{
        grid-template-columns:
            76px
            minmax(0,1fr);

        column-gap:10px;
    }

    .page-service-image{
        width:76px;

        height:76px;

        min-width:76px;
    }

    .page-service-body h3{
        font-size:14px;
    }

    .page-service-body p{
        font-size:11px;
    }

    .page-service-body .text-link,
    .page-service-link{
        font-size:11px;
    }
}


/* =========================================================
   38. TOUCH DEVICES
   ========================================================= */

@media(hover:none){

    .service-card:hover,
    article:hover,
    .btn:hover,
    .header-cta:hover,
    .text-link:hover,
    .related-links a:hover,
    .footer-social .social-box:hover,
    .contact-item:hover,
    .page-service-card:hover,
    .final-home-cta:hover,
    .final-home-seo:hover,
    .site-header nav a:hover{
        transform:none;

        box-shadow:none;
    }

    .service-card:hover .service-frame img,
    .page-service-card:hover .page-service-image img{
        transform:none;
    }
}
/* =========================================================
   HANGARO DEFAULT IMAGE FRAME
   ANY IMAGE → FIXED 4:3 FRAME
   ========================================================= */

.media-frame,
.service-frame,
.post-image-frame,
.page-image-frame,
.blog-image-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    background: #f5f7f5;
}

.media-frame img,
.service-frame img,
.post-image-frame img,
.page-image-frame img,
.blog-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
}

@media (max-width: 800px) {
    .media-frame,
    .service-frame,
    .post-image-frame,
    .page-image-frame,
    .blog-image-frame {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        border-radius: 12px;
    }
}
/* =========================================================
   HANGARO — GLOBAL IMAGE ROUNDED CORNERS
   ========================================================= */

/* All normal website images */
img {
    border-radius: 14px;
}

/* Service / product / content image frames */
.media-frame,
.service-frame,
.post-image-frame,
.page-image-frame,
.blog-image-frame,
.standard-page-featured-image {
    border-radius: 16px;
    overflow: hidden;
}

/* Images inside frames */
.media-frame img,
.service-frame img,
.post-image-frame img,
.page-image-frame img,
.blog-image-frame img,
.standard-page-featured-image img {
    border-radius: 0;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-media {
    border-radius: 22px;
    overflow: hidden;
}

.hero-media img {
    border-radius: 0;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.service-card {
    border-radius: 16px;
    overflow: hidden;
}


/* =========================================================
   SIDEBAR SERVICE IMAGES
   ========================================================= */

.page-service-image {
    border-radius: 10px;
    overflow: hidden;
}

.page-service-image img {
    border-radius: 0;
}


/* =========================================================
   BLOG / POST IMAGES
   ========================================================= */

.prose img,
.blog-content img {
    border-radius: 16px;
}


/* =========================================================
   LOGO — KEEP CLEAN
   ========================================================= */

.site-logo {
    border-radius: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .media-frame,
    .service-frame,
    .post-image-frame,
    .page-image-frame,
    .blog-image-frame,
    .standard-page-featured-image {
        border-radius: 12px;
    }

    .hero-media {
        border-radius: 16px;
    }

    .service-card {
        border-radius: 14px;
    }

    .prose img,
    .blog-content img {
        border-radius: 12px;
    }

}