/* Sustainable Green — premium eco-construction presentation */
.template-4 {
    --navy: #1c5a43;
    --navy-dark: #0d3528;
    --red: #c86f4b;
    --gold: #e6bd69;
    --ink: #17372c;
    --muted: #687a70;
    --paper: #fbfcf7;
    --soft: #edf2e9;
    --line: #d5dfd2;
    --success: #2c7b55;
    --radius: 18px;
    --shadow: 0 24px 65px rgba(18, 68, 50, .13);
    --heading: Georgia, 'Times New Roman', serif;
    --body: Arial, Helvetica, sans-serif;
    --container: 1220px;
    background: #fbfcf7;
}
.template-4 h1,
.template-4 h2,
.template-4 h3 { letter-spacing: -.045em; }
.template-4 .eyebrow { color: #b45f3f; letter-spacing: .17em; }
.template-4 .eyebrow::before { width: 40px; height: 1px; }

/* Dedicated floating navigation */
.template-4 .eco-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-bottom: 11px;
    color: #17372c;
    background: rgba(238, 244, 235, .96);
    border: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
}
.template-4 .eco-header.scrolled { box-shadow: 0 13px 38px rgba(12, 49, 36, .1); }
.template-4 .eco-utility {
    max-height: 38px;
    color: #dfece3;
    background: #0d3528;
    overflow: hidden;
    transition: max-height .28s ease, opacity .28s ease;
}
.template-4 .eco-header.scrolled .eco-utility { max-height: 0; opacity: 0; }
.template-4 .eco-utility-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.template-4 .eco-utility-message { display: inline-flex; align-items: center; gap: 9px; font-size: .69rem; font-weight: 700; letter-spacing: .025em; }
.template-4 .eco-utility-message i { width: 7px; height: 7px; background: #e6bd69; border-radius: 50%; box-shadow: 0 0 0 5px rgba(230,189,105,.13); }
.template-4 .eco-utility-inner > div { display: flex; gap: 25px; color: #c3d7ca; font-size: .68rem; font-weight: 700; }
.template-4 .eco-utility a { transition: color .2s; }
.template-4 .eco-utility a:hover { color: #e6bd69; }
.template-4 .eco-nav-wrap {
    min-height: 82px;
    margin-top: 11px;
    padding: 9px 12px 9px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: rgba(255,255,251,.96);
    border: 1px solid rgba(28,90,67,.13);
    border-radius: 23px;
    box-shadow: 0 15px 42px rgba(16,58,43,.1);
    transition: min-height .25s, margin .25s, box-shadow .25s;
}
.template-4 .eco-header.scrolled .eco-nav-wrap { min-height: 72px; margin-top: 8px; box-shadow: 0 12px 32px rgba(16,58,43,.14); }
.template-4 .eco-brand { min-width: 285px; gap: 13px; }
.template-4 .eco-logo-shell { width: 58px; height: 58px; padding: 3px; display: block; background: #edf3e9; border: 1px solid #d3e0d5; border-radius: 17px; }
.template-4 .eco-brand img { width: 100%; height: 100%; border-radius: 13px; }
.template-4 .eco-brand .brand-text strong { color: #123c2d; font-family: Arial, Helvetica, sans-serif; font-size: 1.02rem; font-weight: 900; letter-spacing: -.025em; }
.template-4 .eco-brand .brand-text small { margin-top: 5px; color: #718079; font-size: .61rem; letter-spacing: .045em; }
.template-4 .eco-primary-nav { gap: 4px; color: #244a3b; font-size: .76rem; font-weight: 800; }
.template-4 .eco-primary-nav > a { padding: 12px 14px; border-radius: 999px; transition: color .22s, background .22s, transform .22s; }
.template-4 .eco-primary-nav > a:not(.nav-cta)::after { display: none; }
.template-4 .eco-primary-nav > a:not(.nav-cta):hover,
.template-4 .eco-primary-nav > a:not(.nav-cta).active { color: #0f3c2c; background: #e5eee2; }
.template-4 .eco-primary-nav > a:not(.nav-cta).active::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: #bd724f; border-radius: 50%; content: ""; vertical-align: 1px; }
.template-4 .eco-primary-nav .nav-cta { margin-left: 5px; padding: 13px 19px; color: #fff; background: #bd6948; border-radius: 999px; box-shadow: 0 10px 25px rgba(189,105,72,.23); }
.template-4 .eco-primary-nav .nav-cta:hover { color: #fff; background: #123c2d; transform: translateY(-2px); }
.template-4 .eco-mobile-contact { display: none; }
.template-4 .eco-nav-toggle { position: relative; z-index: 1002; width: 48px; height: 48px; color: #153d30; background: #e9f0e6; border: 1px solid #ceddce; border-radius: 15px; }
.template-4 .eco-nav-toggle span { background: #153d30; border-radius: 4px; transform-origin: center; }

/* Homepage */
.template-4 .home-hero {
    margin: 0;
    color: #fff;
    background:
        radial-gradient(circle at 8% 8%, rgba(230,189,105,.2), transparent 24%),
        radial-gradient(circle at 94% 84%, rgba(90,151,113,.28), transparent 32%),
        linear-gradient(128deg, #0b3024 0%, #164b38 55%, #205f46 100%);
    border-radius: 0 0 48px 48px;
}
.template-4 .home-hero::before {
    display: block;
    opacity: .18;
    background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, #000, transparent 65%);
}
.template-4 .hero-grid { min-height: 760px; grid-template-columns: 1fr .96fr; gap: clamp(50px, 7vw, 95px); padding-top: 82px; padding-bottom: 86px; }
.template-4 .hero-copy h1 { max-width: 740px; color: #fff; font-size: clamp(3.4rem, 6.5vw, 6.5rem); font-weight: 400; line-height: .95; }
.template-4 .hero-copy > p { max-width: 620px; color: rgba(240,248,241,.75); font-size: 1.08rem; line-height: 1.78; }
.template-4 .hero-copy .eyebrow { color: #edc873; }
.template-4 .button { border-radius: 999px; }
.template-4 .hero-actions .button-primary { color: #15372b; background: #efca76; box-shadow: 0 16px 34px rgba(3,24,16,.2); }
.template-4 .hero-actions .button-primary:hover { color: #fff; background: #bd6948; }
.template-4 .hero-actions .button-ghost { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.32); backdrop-filter: blur(10px); }
.template-4 .hero-actions .button-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.template-4 .hero-proof { border-color: rgba(255,255,255,.18); }
.template-4 .hero-proof strong { color: #efca76; font-family: Arial, Helvetica, sans-serif; }
.template-4 .hero-proof span { color: rgba(240,248,241,.62); }
.template-4 .hero-visual { min-height: 600px; }
.template-4 .hero-visual > img {
    right: 0;
    width: 100%;
    border: 7px solid rgba(255,255,255,.12);
    border-radius: 240px 28px 28px 240px;
    box-shadow: 0 35px 85px rgba(3,25,17,.36);
}
.template-4 .hero-visual::before { position: absolute; z-index: -1; top: -28px; right: -27px; width: 70%; height: 54%; border: 1px solid rgba(239,202,118,.58); border-radius: 50%; content: ""; }
.template-4 .hero-visual::after { display: block; inset: auto -18px -22px 24%; width: 54%; height: 42%; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; }
.template-4 .hero-float-card { bottom: 30px; left: -35px; width: 255px; padding: 22px 24px; color: #17372c; background: rgba(255,255,250,.92); border: 1px solid rgba(255,255,255,.6); border-radius: 21px; box-shadow: 0 24px 55px rgba(3,25,17,.28); backdrop-filter: blur(14px); }
.template-4 .hero-float-card span { color: #aa5e41; }
.template-4 .hero-float-card strong { color: #153b2e; font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; }
.template-4 .hero-shape { top: 30px; left: -17px; width: 78px; height: 78px; background: #efca76; border: 10px solid rgba(255,255,255,.13); border-radius: 50% 50% 8px 50%; box-shadow: none; }
.template-4 .trust-strip { padding: 18px 0; background: #f0f4eb; }
.template-4 .trust-grid { min-height: 60px; gap: 8px; }
.template-4 .trust-grid span { padding: 11px 8px; color: #325a49; background: rgba(255,255,255,.7); border: 1px solid #d9e3d6; border-radius: 999px; font-size: .65rem; letter-spacing: .08em; }

.template-4 .about-preview { background: #fbfcf7; }
.template-4 .section-image > img { border-radius: 36px 160px 36px 36px; box-shadow: 0 25px 60px rgba(24,73,54,.14); }
.template-4 .section-image::before { top: -20px; left: -20px; width: 55%; height: 58%; background: #dbe8d8; border-radius: 34px 150px 34px 34px; }
.template-4 .image-stat { right: -25px; bottom: 28px; color: #fff; background: #bd6948; border-radius: 20px 20px 70px 20px; }
.template-4 .check-list li::before { background: #2d7755; }
.template-4 .text-link { color: #1c6548; }
.template-4 .services-section { background: #edf2e9; }
.template-4 .service-card { min-height: 315px; padding: 34px; background: rgba(255,255,251,.92); border-color: rgba(34,94,69,.12); border-radius: 25px; box-shadow: 0 12px 35px rgba(29,76,58,.06); }
.template-4 .service-card::after { height: 6px; background: #bd6948; }
.template-4 .service-card:hover { transform: translateY(-8px); box-shadow: 0 25px 55px rgba(29,76,58,.14); }
.template-4 .service-card:nth-child(1),
.template-4 .service-card:nth-child(5) { color: #fff; background: #164735; }
.template-4 .service-card:nth-child(1) h3,
.template-4 .service-card:nth-child(5) h3 { color: #fff; }
.template-4 .service-card:nth-child(1) p,
.template-4 .service-card:nth-child(5) p { color: #bfd2c5; }
.template-4 .service-card:nth-child(1) .service-number,
.template-4 .service-card:nth-child(5) .service-number { color: rgba(255,255,255,.28); }
.template-4 .service-icon { color: #143c2f; background: #e9c675; border-radius: 16px 16px 16px 5px; }
.template-4 .projects-section { background: #fbfcf7; }
.template-4 .project-card { border: 0; border-radius: 25px; box-shadow: 0 15px 42px rgba(24,73,54,.1); }
.template-4 .project-image { height: 300px; }
.template-4 .project-card-body { padding: 27px; }
.template-4 .status-badge { border-radius: 999px; }
.template-4 .process-section { position: relative; margin: 0; background: linear-gradient(125deg, #0d3528, #174d39); border-radius: 0; overflow: hidden; }
.template-4 .process-section::before { position: absolute; inset: 0; opacity: .11; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 25px 25px; content: ""; }
.template-4 .process-section .container { position: relative; }
.template-4 .process-grid article { border-color: rgba(255,255,255,.14); }
.template-4 .process-grid article > span { color: #e9c675; }

/* Portfolio showcase tuned to the green design */
.template-4 .home-signature-showcase { --signature-gold: #e7c16f; background: radial-gradient(circle at 88% 6%, rgba(78,145,104,.38), transparent 30%), linear-gradient(135deg, #082b21, #164c38 58%, #0a3024); }
.template-4 .signature-project-card { border-radius: 22px; }
.template-4 .signature-project-card img { border-radius: inherit; }
.template-4 .signature-evidence > a { color: #14372a; background: #e7c16f; }

/* Inner pages */
.template-4 .page-hero { margin: 0; background: radial-gradient(circle at 85% 20%, rgba(230,189,105,.18), transparent 25%), linear-gradient(125deg, #0d3528, #1b5b43); border-radius: 0 0 45px 45px; }
.template-4 .page-hero h1 { font-weight: 400; }
.template-4 .page-hero .eyebrow { color: #ebc774; }
.template-4 .value-card,
.template-4 .leader-card,
.template-4 .service-detail-card,
.template-4 .contact-form,
.template-4 .contact-cards > div,
.template-4 .template-showcase-card { background: #fffef9; border-color: #d9e2d6; border-radius: 24px; box-shadow: 0 13px 36px rgba(24,73,54,.07); }
.template-4 .values-section,
.template-4 .equipment-section,
.template-4 .contact-section,
.template-4 .template-showcase-section { background: #edf2e9; }
.template-4 .equipment-stat-grid { background: #123c2d; border-radius: 28px; }
.template-4 .project-sidebar,
.template-4 .project-filter { border-radius: 24px; box-shadow: 0 15px 40px rgba(24,73,54,.09); }
.template-4 .projects-portfolio-hero { background: #0c3326; border-radius: 0 0 45px 45px; }
.template-4 .projects-portfolio-veil { background: linear-gradient(90deg, rgba(5,35,25,.97), rgba(8,48,35,.76) 46%, rgba(8,48,35,.14) 82%), linear-gradient(0deg, rgba(5,35,25,.72), transparent 55%); }
.template-4 .projects-portfolio-kicker { color: #e9c675; }
.template-4 .projects-portfolio-facts { background: rgba(10,55,40,.72); border-radius: 22px; overflow: hidden; }
.template-4 .project-photo-library { background: #edf2e9; }
.template-4 .project-photo-library .photo-library-toolbar { border-color: #d4dfd2; border-radius: 17px; }
.template-4 .project-photo-library .photo-category-tabs button { border-radius: 999px; }
.template-4 .project-photo-library .photo-category-tabs button.active,
.template-4 .project-photo-library .photo-category-tabs button:hover,
.template-4 .project-photo-library .photo-category-tabs button:focus-visible { background: #174b38; }
.template-4 .project-photo-library .profile-photo-card { border-radius: 18px; }

/* Footer */
.template-4 .cta-band { margin: 0; background: #bd6948; border-radius: 45px 45px 0 0; }
.template-4 .cta-band .button-light { color: #133b2e; border-radius: 999px; }
.template-4 .site-footer { background: #092a20; }
.template-4 .site-footer h3 { color: #e8c675; font-family: Arial, Helvetica, sans-serif; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.template-4 .site-footer .brand-text strong { color: #fff; }
.template-4 .site-footer .brand-text small { color: #9ab4a6; }
.template-4 .site-footer a:hover { color: #e8c675; }
.template-4 .brand-footer img { border-radius: 18px; }
.template-4 .whatsapp-float { color: #fff; background: #2c7b55; border-radius: 50%; box-shadow: 0 14px 35px rgba(16,68,46,.3); }

@media (max-width: 1080px) {
    .template-4 .eco-brand { min-width: 225px; }
    .template-4 .eco-brand .brand-text small { display: none; }
    .template-4 .eco-primary-nav > a { padding-inline: 10px; }
    .template-4 .hero-grid { gap: 45px; }
}

@media (max-width: 860px) {
    body.template-4.nav-open::before { position: fixed; z-index: 997; inset: 0; background: rgba(4,27,19,.56); content: ""; backdrop-filter: blur(4px); }
    .template-4 .eco-header { padding-bottom: 8px; }
    .template-4 .eco-utility { display: none; }
    .template-4 .eco-nav-wrap,
    .template-4 .eco-header.scrolled .eco-nav-wrap { min-height: 70px; margin-top: 8px; padding: 7px 8px 7px 11px; border-radius: 18px; }
    .template-4 .eco-logo-shell { width: 52px; height: 52px; border-radius: 15px; }
    .template-4 .eco-brand { min-width: 0; }
    .template-4 .eco-brand .brand-text strong { font-size: .9rem; }
    .template-4 .eco-primary-nav {
        z-index: 999;
        top: 0;
        width: min(90vw, 420px);
        padding: 105px 24px 30px;
        gap: 4px;
        color: #17372c;
        background: #f8faf4;
        box-shadow: -25px 0 65px rgba(4,31,21,.25);
    }
    .template-4 .eco-primary-nav > a { padding: 16px 15px; border: 0; border-radius: 13px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.13rem; font-weight: 600; }
    .template-4 .eco-primary-nav > a:not(.nav-cta):hover,
    .template-4 .eco-primary-nav > a:not(.nav-cta).active { background: #e5eee2; }
    .template-4 .eco-primary-nav .nav-cta { margin: 14px 0 0; padding: 16px; text-align: center; }
    .template-4 .eco-mobile-contact { margin-top: auto; padding: 22px 15px; display: flex; flex-direction: column; color: #728178; border-top: 1px solid #d6e0d3; font-size: .68rem; }
    .template-4 .eco-mobile-contact a { margin-top: 4px; color: #173e30; font-size: 1rem; font-weight: 900; }
    .template-4.nav-open .eco-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .template-4.nav-open .eco-nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .template-4.nav-open .eco-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .template-4 .hero-grid { min-height: 0; padding-top: 75px; grid-template-columns: 1fr; }
    .template-4 .hero-visual { min-height: 535px; }
    .template-4 .hero-visual > img { border-radius: 180px 24px 24px 24px; }
    .template-4 .trust-grid { grid-template-columns: repeat(3, 1fr); }
    .template-4 .trust-grid span { min-height: 48px; display: grid; place-items: center; }
}

@media (max-width: 600px) {
    .template-4 .eco-nav-wrap { width: calc(100% - 20px); }
    .template-4 .eco-brand .brand-text strong { max-width: 150px; }
    .template-4 .home-hero { border-radius: 0 0 30px 30px; }
    .template-4 .hero-grid { padding-top: 60px; padding-bottom: 62px; }
    .template-4 .hero-copy h1 { font-size: clamp(3rem, 15.5vw, 4.6rem); }
    .template-4 .hero-copy > p { font-size: .98rem; }
    .template-4 .hero-visual { min-height: 410px; }
    .template-4 .hero-visual > img { border-width: 4px; border-radius: 100px 20px 20px 20px; }
    .template-4 .hero-visual::before,
    .template-4 .hero-visual::after { display: none; }
    .template-4 .hero-float-card { right: 13px; bottom: 13px; left: 13px; width: auto; }
    .template-4 .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
    .template-4 .section-image > img { border-radius: 28px 100px 28px 28px; }
    .template-4 .image-stat { right: 8px; border-radius: 18px 18px 52px 18px; }
    .template-4 .service-card { min-height: 0; }
    .template-4 .projects-portfolio-hero,
    .template-4 .page-hero { border-radius: 0 0 28px 28px; }
    .template-4 .cta-band { border-radius: 30px 30px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .template-4 .eco-utility,
    .template-4 .eco-nav-wrap,
    .template-4 .eco-primary-nav > a { transition: none; }
}