*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:#123024;background:#fff;line-height:1.6}h1,h2,h3,h4{font-family:"Manrope",Inter,sans-serif;line-height:1.08;margin:0 0 18px}h1{font-size:clamp(44px,6vw,82px);letter-spacing:-.045em}h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.03em}h3{font-size:23px}p{margin:0 0 18px}.container{width:min(1160px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #e5ece7}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;color:#0c4729;text-decoration:none}.brand-mark{width:43px;height:43px;border-radius:14px 14px 14px 4px;background:#5eaa12;color:#fff;display:grid;place-items:center;font-weight:800}.brand strong{display:block;font-family:"Manrope";font-size:18px;letter-spacing:.04em}.brand small{display:block;letter-spacing:.28em;font-size:9px}.nav{display:flex;align-items:center;gap:24px}.nav a{color:#19382a;text-decoration:none;font-size:14px;font-weight:600}.nav-cta{padding:11px 17px;background:#0c4729;color:#fff!important;border-radius:999px}.nav-toggle{display:none;border:0;background:none;font-size:25px}.hero{min-height:690px;position:relative;overflow:hidden;background:#092f1f;color:#fff}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,35,23,.94),rgba(3,35,23,.54),rgba(3,35,23,.2)),url('../images/green-hatch-services-flyer.png') center/cover}.hero-inner{position:relative;z-index:1;min-height:690px;display:grid;grid-template-columns:1.2fr .8fr;align-items:end;padding-bottom:90px;gap:50px}.hero-copy{max-width:760px}.hero-copy p{font-size:19px;max-width:680px;color:#e2eee7}.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;color:#61ad21;margin-bottom:18px}.hero .eyebrow{color:#a8e65e}.hero-card{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.25);padding:30px;border-radius:24px;backdrop-filter:blur(12px);max-width:360px;justify-self:end}.hero-card span{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#a8e65e}.hero-card strong{display:block;font-size:29px;line-height:1.1;margin:12px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 21px;text-decoration:none;font-weight:800;border:1px solid transparent;font-size:14px;cursor:pointer}.button-primary{background:#66b518;color:#082a19}.button-outline{border-color:rgba(255,255,255,.5);color:#fff}.button-light{background:#fff;color:#0b4427}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.section{padding:92px 0}.intro{background:#f5f8f4}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.lead{font-size:21px;color:#496254}.text-link{display:inline-block;color:#0d5a31;font-weight:800;text-decoration:none}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px;gap:20px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{border:1px solid #dfe9e2;padding:30px;border-radius:22px;min-height:290px;display:flex;flex-direction:column;transition:.25s}.service-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(20,70,40,.08)}.service-number{color:#66b518;font-weight:800;font-size:13px;letter-spacing:.1em}.service-card p{color:#607267}.service-card a{margin-top:auto;color:#0c542e;text-decoration:none;font-weight:800}.tree-banner{background:#0a3b26;color:#fff}.tree-inner{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:60px}.tree-inner p{color:#cfe1d5;max-width:560px}.tree-visual{overflow:hidden;border-radius:28px;aspect-ratio:16/9}.tree-visual img{width:100%;height:100%;object-fit:cover}.project-grid,.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-grid{grid-template-columns:repeat(4,1fr)}.project-card,.product-card{border:1px solid #e0e9e3;border-radius:22px;overflow:hidden;background:#fff}.project-card img,.product-card img{width:100%;height:210px;object-fit:cover}.project-card>div,.product-card>div{padding:24px}.product-card img{height:190px}.tag{display:inline-block;background:#edf6df;color:#396d18;border-radius:999px;padding:5px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:12px}.product-card strong{display:block;margin:12px 0;color:#0b4c2a}.muted{background:#f6f8f5}.cta-box{border-radius:28px;background:#eaf4e5;padding:45px;display:flex;align-items:center;justify-content:space-between;gap:30px}.page-hero{padding:100px 0 80px;background:#eff5ed}.page-hero h1{max-width:900px}.page-hero p{font-size:19px;max-width:760px;color:#55695d}.narrow{max-width:900px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.values-grid>div{padding:25px;border-top:3px solid #65ad1b;background:#f7faf6}.values-grid span{font-weight:800;color:#65ad1b}.service-list{max-width:900px}.service-row{display:grid;grid-template-columns:80px 1fr;gap:25px;padding:38px 0;border-bottom:1px solid #dde7e0}.service-row .service-number{font-size:18px}.service-row h2{font-size:31px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.filters a{border:1px solid #d9e4dc;padding:8px 15px;border-radius:999px;text-decoration:none;color:#365646;font-size:13px}.filters a.active{background:#0b4c2a;color:#fff}.rounded-img{width:100%;border-radius:26px}.initiative{align-items:start}.check-list{padding-left:20px}.check-list li{margin:9px 0}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.contact-form{background:#f5f8f4;padding:35px;border-radius:25px}.contact-form label,.admin-form label{display:block;font-weight:700;font-size:13px;margin-bottom:15px}.contact-form input,.contact-form textarea,.admin-form input,.admin-form textarea,.admin-form select{width:100%;border:1px solid #cedbd2;border-radius:11px;padding:12px 13px;font:inherit;margin-top:7px;background:#fff}.alert{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:14px}.alert.success{background:#e7f5e7;color:#1c6b2a}.alert.error{background:#fdecec;color:#a72d2d}.site-footer{background:#092f1f;color:#cfe1d5;padding-top:65px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:55px}.footer-brand{color:#fff;margin-bottom:18px}.site-footer h4{color:#fff;font-size:15px}.site-footer a{display:block;color:#cfe1d5;text-decoration:none;margin:7px 0;font-size:14px}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;display:flex;justify-content:space-between;font-size:12px}@media(max-width:900px){.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.nav-toggle{display:block}.hero-inner,.split,.tree-inner,.contact-grid{grid-template-columns:1fr}.hero-card{justify-self:start}.service-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr 1fr}.values-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.cta-box{display:block}.cta-box .button{margin-top:20px}}@media(max-width:600px){h1{font-size:46px}.section{padding:65px 0}.service-grid,.project-grid,.product-grid,.footer-grid{grid-template-columns:1fr}.hero{min-height:620px}.hero-inner{min-height:620px;padding-bottom:55px}.section-heading{display:block}.section-heading .text-link{margin-top:10px}.service-row{grid-template-columns:45px 1fr}.footer-bottom{display:block}.footer-bottom a{margin-top:8px}}

/* =========================================================
   GREEN HATCH INVESTMENTS
   PROFESSIONAL TYPOGRAPHY SYSTEM
   ========================================================= */

:root {
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Manrope', sans-serif;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.hero-title,
.hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.section-title,
.section-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
}

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

nav,
.nav,
.nav-link {
    font-family: var(--font-body);
    font-weight: 600;
}

/* ============================================================
   GREEN HATCH — PREMIUM HERO VISUAL SYSTEM
   CSS-BASED / NO BACKGROUND PHOTO
   ============================================================ */

/* ---------- HERO FOUNDATION ---------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(139, 255, 57, 0.34) 0%,
            rgba(72, 180, 62, 0.16) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(0, 185, 118, 0.25) 0%,
            transparent 42%
        ),
        linear-gradient(
            118deg,
            #003f32 0%,
            #00583d 34%,
            #08733f 61%,
            #3c9d3d 82%,
            #a5e84f 125%
        );
}

/* Remove the old photograph/image completely */
.hero-bg {
    background-image: none !important;
    background: transparent !important;
    opacity: 1;
}

/* ---------- ANIMATED LIGHT ---------- */

.hero::before {
    content: "";
    position: absolute;
    width: 850px;
    height: 850px;
    right: -330px;
    top: -430px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(202, 255, 82, 0.30) 0%,
            rgba(132, 231, 67, 0.14) 30%,
            transparent 70%
        );
    filter: blur(8px);
    animation: greenHatchGlow 12s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: -360px;
    bottom: -430px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0, 214, 157, 0.30) 0%,
            rgba(20, 142, 91, 0.14) 38%,
            transparent 70%
        );
    filter: blur(10px);
    animation: greenHatchGlowBottom 14s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes greenHatchGlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-35px, 30px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-65px, 10px, 0) scale(1.15);
    }
}

@keyframes greenHatchGlowBottom {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(45px, -25px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(75px, -45px, 0) scale(1.15);
    }
}

/* ---------- ORGANIC CURVES ---------- */

.hero-bg::before,
.hero-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.hero-bg::before {
    width: 1050px;
    height: 1050px;
    right: -390px;
    top: -610px;
    border: 1px solid rgba(220, 255, 180, 0.20);
    box-shadow:
        0 0 0 55px rgba(220, 255, 180, 0.035),
        0 0 0 110px rgba(220, 255, 180, 0.025);
    animation: greenHatchOrbit 24s linear infinite;
}

.hero-bg::after {
    width: 820px;
    height: 820px;
    left: -520px;
    bottom: -570px;
    border: 1px solid rgba(140, 255, 180, 0.18);
    box-shadow:
        0 0 0 60px rgba(140, 255, 180, 0.025);
    animation: greenHatchOrbitReverse 28s linear infinite;
}

@keyframes greenHatchOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes greenHatchOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* ---------- SUBTLE MOVING LIGHT ---------- */

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg::marker {
    display: none;
}

/* ---------- CONTENT LAYER ---------- */

.hero-inner {
    position: relative;
    z-index: 5;
}

/* ---------- HERO COPY ENTRANCE ---------- */

.hero-copy {
    animation: heroCopyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy h1 {
    animation: heroHeadingIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.hero-copy p {
    animation: heroParagraphIn 0.9s ease-out 0.22s both;
}

.hero-actions {
    animation: heroActionsIn 0.9s ease-out 0.34s both;
}

@keyframes heroCopyIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroHeadingIn {
    from {
        opacity: 0;
        transform: translateY(32px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroParagraphIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroActionsIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- OUR APPROACH CARD ---------- */

.hero-card {
    position: relative;
    z-index: 6;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0.055)
    );
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 24px 70px rgba(0, 35, 22, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation:
        heroCardIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
        heroCardFloat 7s ease-in-out 1.5s infinite;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.hero-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(190, 255, 120, 0.45);
    box-shadow:
        0 32px 85px rgba(0, 35, 22, 0.30),
        0 0 45px rgba(150, 255, 75, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@keyframes heroCardIn {
    from {
        opacity: 0;
        transform: translateX(35px) translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes heroCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* ---------- BUTTONS ---------- */

.hero-actions .button {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.hero-actions .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255, 255, 255, 0.30),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.hero-actions .button:hover {
    transform: translateY(-3px);
}

.hero-actions .button:hover::before {
    left: 140%;
}

.hero-actions .button-primary:hover {
    box-shadow:
        0 12px 28px rgba(104, 225, 44, 0.28);
}

/* ---------- NAVIGATION HOVER ---------- */

.site-header nav a,
header nav a {
    position: relative;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.site-header nav a:not(.button)::after,
header nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 2px;
    border-radius: 20px;
    background: #61c928;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.site-header nav a:not(.button):hover::after,
header nav a:not(.button):hover::after {
    width: 70%;
}

/* ---------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after,
    .hero-bg::before,
    .hero-bg::after,
    .hero-copy,
    .hero-copy h1,
    .hero-copy p,
    .hero-actions,
    .hero-card {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
    .hero {
        background:
            radial-gradient(
                circle at 85% 10%,
                rgba(151, 255, 68, 0.24),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                #003f32 0%,
                #00613f 52%,
                #239044 100%
            );
    }

    .hero::before {
        width: 600px;
        height: 600px;
        right: -300px;
        top: -300px;
    }

    .hero-bg::before {
        width: 650px;
        height: 650px;
        right: -350px;
        top: -400px;
    }

    .hero-bg::after {
        width: 500px;
        height: 500px;
        left: -350px;
        bottom: -350px;
    }

    .hero-card:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 600px) {
    .hero {
        min-height: auto;
    }

    .hero-card {
        animation:
            heroCardIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }
}




/* ============================================================
   GREEN HATCH INVESTMENTS
   PREMIUM CORPORATE DESIGN SYSTEM
   ============================================================ */

:root {
    --gh-forest: #063C2B;
    --gh-deep: #032F23;
    --gh-green: #08753F;
    --gh-emerald: #14915A;
    --gh-lime: #8FE63E;
    --gh-lime-bright: #A8F34F;
    --gh-soft: #F4F8F2;
    --gh-soft-green: #EAF4E6;
    --gh-border: #DCE8DF;
    --gh-text: #123024;
    --gh-muted: #627268;
    --gh-white: #FFFFFF;
    --gh-radius-lg: 28px;
    --gh-radius-md: 20px;
    --gh-shadow: 0 24px 70px rgba(8, 58, 36, 0.10);
    --gh-shadow-hover: 0 30px 80px rgba(8, 58, 36, 0.16);
}

/* ============================================================
   GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--gh-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Manrope', sans-serif;
}

a {
    transition:
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

::selection {
    background: var(--gh-lime);
    color: var(--gh-deep);
}

/* ============================================================
   HEADER / BRAND
   ============================================================ */

.site-header {
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(12,71,41,.08);
    box-shadow: 0 5px 25px rgba(5,45,28,.035);
}

.nav-wrap {
    height: 82px;
}

.brand {
    display: inline-flex;
    align-items: center;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.brand:hover {
    transform: translateY(-1px);
}

.brand-logo {
    display: block;
    width: 190px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
}

.nav {
    gap: 26px;
}

.nav a:not(.nav-cta) {
    position: relative;
    padding: 8px 0;
}

.nav a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--gh-lime);
    transform: translateX(-50%);
    transition: width .3s cubic-bezier(.22,1,.36,1);
}

.nav a:not(.nav-cta):hover::after {
    width: 70%;
}

.nav-cta {
    box-shadow: 0 8px 20px rgba(8,71,41,.14);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.nav-cta:hover {
    transform: translateY(-2px);
    background: var(--gh-green);
    box-shadow: 0 13px 30px rgba(8,71,41,.22);
}

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

.hero {
    min-height: 700px;
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(170,255,76,.30),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(0,210,157,.20),
            transparent 38%
        ),
        linear-gradient(
            118deg,
            #033D2E 0%,
            #075E3E 34%,
            #087940 62%,
            #42A43E 88%,
            #A8ED52 125%
        );
}

.hero-bg {
    background: transparent !important;
}

.hero-inner {
    min-height: 700px;
    padding-top: 85px;
    padding-bottom: 85px;
    align-items: center;
    gap: 70px;
}

.hero-copy {
    max-width: 780px;
}

.hero-copy h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(50px, 6vw, 82px);
    line-height: 1.01;
    letter-spacing: -.055em;
    font-weight: 800;
    max-width: 820px;
    margin-bottom: 28px;
}

.hero-accent {
    color: var(--gh-lime-bright);
}

.hero-copy p {
    max-width: 690px;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.7;
    color: rgba(255,255,255,.86);
}

.hero-actions {
    margin-top: 28px;
}

.hero-actions .button {
    min-height: 52px;
    padding: 14px 24px;
}

.button-primary {
    background: var(--gh-lime);
    color: #092A1A;
    box-shadow: 0 12px 28px rgba(143,230,62,.16);
}

.button-primary:hover {
    background: var(--gh-lime-bright);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(143,230,62,.25);
}

.button-outline {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(8px);
}

.button-outline:hover {
    border-color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.10);
    transform: translateY(-3px);
}

/* ============================================================
   HERO CARD
   ============================================================ */

.hero-card {
    max-width: 390px;
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.16),
        rgba(255,255,255,.055)
    );
    border: 1px solid rgba(255,255,255,.25);
    box-shadow:
        0 28px 80px rgba(0,38,24,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.hero-card span {
    color: var(--gh-lime-bright);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}

.hero-card strong {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(26px, 2.5vw, 32px);
    line-height: 1.12;
}

.hero-card p {
    color: rgba(255,255,255,.80);
}

/* ============================================================
   SECTION SYSTEM
   ============================================================ */

.section {
    padding: clamp(72px, 8vw, 110px) 0;
}

.section-heading {
    margin-bottom: 42px;
}

.section-heading h2,
.intro h2,
.tree-inner h2 {
    letter-spacing: -.035em;
}

.eyebrow {
    color: #4D8C1A;
    font-size: 11px;
    letter-spacing: .2em;
    font-weight: 800;
}

/* ============================================================
   ABOUT / INTRO
   ============================================================ */

.intro {
    background:
        linear-gradient(
            180deg,
            #F5F9F3 0%,
            #FFFFFF 100%
        );
    border-top: 1px solid rgba(8,71,41,.04);
}

.intro .split {
    gap: clamp(45px, 8vw, 100px);
}

.intro h2 {
    font-size: clamp(34px, 4vw, 54px);
}

.lead {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.75;
    color: #52665A;
}

.text-link {
    position: relative;
}

.text-link::after {
    content: "";
    display: block;
    width: 35px;
    height: 2px;
    margin-top: 6px;
    background: var(--gh-lime);
    transition: width .3s ease;
}

.text-link:hover::after {
    width: 70px;
}

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

.services {
    background: #FFFFFF;
}

.service-grid {
    gap: 18px;
}

.service-card {
    position: relative;
    min-height: 310px;
    padding: 32px;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-md);
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FBF7
        );
    overflow: hidden;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(143,230,62,.12);
    transition: transform .5s ease;
}

.service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(100,175,27,.32);
    box-shadow: var(--gh-shadow-hover);
}

.service-card:hover::before {
    transform: scale(1.6);
}

.service-number {
    position: relative;
    z-index: 2;
    font-size: 12px;
    color: #66B518;
}

.service-card h3 {
    position: relative;
    z-index: 2;
    margin-top: 38px;
    font-size: 24px;
    letter-spacing: -.025em;
}

.service-card p {
    position: relative;
    z-index: 2;
    color: var(--gh-muted);
    line-height: 1.7;
}

.service-card a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap .3s ease;
}

.service-card:hover a {
    gap: 13px;
}

/* ============================================================
   TREE INITIATIVE
   ============================================================ */

.tree-banner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(143,230,62,.18),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #063A29,
            #075B3B 55%,
            #0B7043
        );
}

.tree-banner::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(160,240,91,.16);
    border-radius: 50%;
    right: -250px;
    top: -250px;
}

.tree-inner {
    position: relative;
    z-index: 2;
}

.tree-inner h2 {
    font-size: clamp(34px, 4vw, 54px);
}

.tree-visual {
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,30,20,.25);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.tree-visual:hover {
    transform: translateY(-6px) scale(1.01);
}

.tree-visual img {
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.tree-visual:hover img {
    transform: scale(1.035);
}

/* ============================================================
   PROJECTS
   ============================================================ */

.project-grid {
    gap: 22px;
}

.project-card {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-md);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(10,55,33,.035);
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--gh-shadow-hover);
    border-color: rgba(100,175,27,.30);
}

.project-card img {
    height: 240px;
    transition: transform .65s cubic-bezier(.22,1,.36,1);
}

.project-card:hover img {
    transform: scale(1.045);
}

.project-card > div {
    padding: 28px;
}

.project-card h3 {
    letter-spacing: -.025em;
}

/* ============================================================
   MARKETPLACE / PRODUCTS
   ============================================================ */

.product-grid {
    gap: 18px;
}

.product-card {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-md);
    overflow: hidden;
    background: #fff;
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}

.product-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--gh-shadow-hover);
}

.product-card img {
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

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

.product-card strong {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 9vw, 125px) 0 90px;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(143,230,62,.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #EDF5EA,
            #F8FBF7
        );
}

.page-hero::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -230px;
    top: -230px;
    border: 1px solid rgba(83,151,38,.12);
    border-radius: 50%;
}

.page-hero > * {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    max-width: 900px;
    font-size: clamp(44px, 6vw, 76px);
    letter-spacing: -.05em;
}

.page-hero p {
    max-width: 760px;
    line-height: 1.75;
}

/* ============================================================
   VALUES
   ============================================================ */

.values-grid {
    gap: 20px;
}

.values-grid > div {
    position: relative;
    padding: 32px;
    border: 1px solid var(--gh-border);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.values-grid > div::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,var(--gh-lime),var(--gh-green));
    transform: scaleX(.25);
    transform-origin: left;
    transition: transform .4s ease;
}

.values-grid > div:hover {
    transform: translateY(-6px);
    box-shadow: var(--gh-shadow);
}

.values-grid > div:hover::after {
    transform: scaleX(1);
}

/* ============================================================
   SERVICE DETAIL ROWS
   ============================================================ */

.service-list {
    max-width: 960px;
}

.service-row {
    padding: 42px 0;
    transition: padding-left .35s ease;
}

.service-row:hover {
    padding-left: 12px;
}

.service-row h2 {
    letter-spacing: -.035em;
}

/* ============================================================
   FILTERS
   ============================================================ */

.filters a {
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.filters a:hover {
    border-color: #78B93D;
    transform: translateY(-2px);
}

/* ============================================================
   CTA
   ============================================================ */

.cta-box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(143,230,62,.24),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #EAF5E5,
            #F4F8F1
        );
    border: 1px solid #DCEBD7;
    box-shadow: var(--gh-shadow);
}

.cta-box::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -160px;
    bottom: -190px;
    border-radius: 50%;
    border: 1px solid rgba(85,150,36,.15);
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact-form {
    border: 1px solid var(--gh-border);
    box-shadow: var(--gh-shadow);
}

.contact-form input,
.contact-form textarea,
.admin-form input,
.admin-form textarea,
.admin-form select {
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    outline: none;
    border-color: #76B83B;
    box-shadow: 0 0 0 4px rgba(118,184,59,.12);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(69,142,63,.18),
            transparent 30%
        ),
        #062E21;
}

.site-footer a {
    transition:
        color .25s ease,
        padding-left .25s ease;
}

.site-footer a:hover {
    color: var(--gh-lime-bright);
    padding-left: 4px;
}

.footer-bottom {
    border-top-color: rgba(255,255,255,.10);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

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

.reveal-delay-1 {
    transition-delay: .08s;
}

.reveal-delay-2 {
    transition-delay: .16s;
}

.reveal-delay-3 {
    transition-delay: .24s;
}

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

@media (max-width: 900px) {

    .nav {
        box-shadow: 0 20px 40px rgba(0,40,25,.10);
        border-top: 1px solid var(--gh-border);
    }

    .brand-logo {
        width: 172px;
    }

    .hero-inner {
        padding-top: 70px;
        padding-bottom: 65px;
        gap: 45px;
    }

    .hero-card {
        max-width: 100%;
    }

    .service-grid {
        gap: 14px;
    }

    .project-card img {
        height: 220px;
    }
}

@media (max-width: 600px) {

    .nav-wrap {
        height: 72px;
    }

    .brand-logo {
        width: 155px;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 55px;
    }

    .hero-copy h1 {
        font-size: clamp(43px, 12vw, 58px);
        letter-spacing: -.045em;
    }

    .hero-copy p {
        font-size: 16px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-card {
        padding: 27px;
    }

    .service-card {
        min-height: 260px;
        padding: 27px;
    }

    .tree-inner {
        gap: 35px;
    }

    .cta-box {
        padding: 32px;
    }

    .page-hero {
        padding-top: 70px;
        padding-bottom: 65px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   GREEN HATCH
   PREMIUM SERVICE CARD SYSTEM
   CSS VISUALS — NO SERVICE IMAGES
   ============================================================ */

.services-premium {
    position: relative;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f9f3 100%
        );
}

.services-heading {
    align-items: flex-end;
    margin-bottom: 42px;
}

.services-heading h2 {
    max-width: 680px;
    font-size: clamp(34px, 4.2vw, 56px);
    letter-spacing: -.045em;
}

.section-intro {
    max-width: 630px;
    margin-top: 14px;
    color: #63736A;
    line-height: 1.75;
}

.service-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #DCE7DF;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(5, 53, 32, .055);
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.service-card-premium:hover {
    transform: translateY(-10px);
    border-color: rgba(92, 168, 35, .34);
    box-shadow: 0 30px 75px rgba(5, 53, 32, .14);
}

.service-visual {
    position: relative;
    height: 190px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;
}

.service-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.07),
            transparent 55%
        );
}

.service-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    pointer-events: none;
    transition:
        transform .8s cubic-bezier(.22,1,.36,1);
}

.service-orbit-one {
    width: 270px;
    height: 270px;
    right: -120px;
    top: -150px;
}

.service-orbit-two {
    width: 190px;
    height: 190px;
    right: -65px;
    top: -110px;
    border-color: rgba(255,255,255,.13);
}

.service-shape {
    position: absolute;
    width: 115px;
    height: 115px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
    border-radius: 38% 62% 58% 42%;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        border-radius .7s ease;
}

.service-card-premium:hover .service-orbit-one {
    transform: rotate(18deg) scale(1.08);
}

.service-card-premium:hover .service-orbit-two {
    transform: rotate(-14deg) scale(1.1);
}

.service-card-premium:hover .service-shape {
    transform: translate(-50%, -50%) rotate(42deg) scale(1.16);
    border-radius: 55% 45% 35% 65%;
}

.service-tree .service-visual {
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(172,244,76,.55),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #043D2C,
            #07824B
        );
}

.service-farm .service-visual {
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(194,239,83,.45),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #345B22,
            #619C20
        );
}

.service-property .service-visual {
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(141,235,107,.40),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #07503A,
            #18805A
        );
}

.service-travel .service-visual {
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(216,255,102,.55),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #087440,
            #68AE28
        );
}

.service-number {
    position: relative;
    z-index: 3;
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.05em;
}

.service-label {
    position: relative;
    z-index: 3;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(8px);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 800;
}

.service-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px 27px 29px;
}

.service-content h3 {
    margin: 0 0 13px;
    font-size: 23px;
    line-height: 1.18;
    letter-spacing: -.03em;
}

.service-content p {
    margin: 0;
    color: #64736A;
    font-size: 14px;
    line-height: 1.72;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;
    color: #0B5632;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.service-link span {
    transition: transform .3s ease;
}

.service-card-premium:hover .service-link span {
    transform: translateX(6px);
}

/* ============================================================
   PARTNERS — MOVING LOGO MARQUEE
   ============================================================ */

.partners-marquee-section {
    position: relative;
    overflow: hidden;
    padding-bottom: 88px;
    background:
        linear-gradient(
            180deg,
            #F3F7F1 0%,
            #FFFFFF 100%
        );
    border-top: 1px solid #E3ECE5;
    border-bottom: 1px solid #E3ECE5;
}

.partners-marquee-section::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    right: -300px;
    top: -350px;
    border: 1px solid rgba(73,133,30,.11);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(73,133,30,.025),
        0 0 0 110px rgba(73,133,30,.018);
}

.partners-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 45px;
}

.partners-heading h2 {
    max-width: 650px;
    margin-top: 10px;
    font-size: clamp(34px, 4.1vw, 55px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.partners-heading p {
    max-width: 430px;
    margin: 0;
    color: #64736A;
    font-size: 16px;
    line-height: 1.75;
}

.partner-marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
}

.partner-marquee-track {
    display: flex;
    width: max-content;
    animation: partnerMarquee 34s linear infinite;
}

.partner-set {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
}

.partner-logo {
    width: 205px;
    height: 105px;
    flex: 0 0 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border: 1px solid #DFE8E1;
    border-radius: 18px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 8px 28px rgba(5,53,32,.045);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
    filter: grayscale(100%);
}

.partner-logo:hover {
    transform: translateY(-5px);
    border-color: rgba(86,157,31,.38);
    box-shadow: 0 18px 40px rgba(5,53,32,.10);
    filter: grayscale(0%);
}

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

@keyframes partnerMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.partner-marquee:hover .partner-marquee-track {
    animation-play-state: paused;
}

.partners-empty {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 28px 32px;
    border: 1px dashed #C9D8CD;
    border-radius: 20px;
    background: rgba(255,255,255,.75);
    color: #6A786F;
}

.partners-empty span {
    color: #5B9D20;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.partners-empty strong {
    font-family: 'Manrope', sans-serif;
    color: #294C39;
    font-size: 14px;
}

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

@media (max-width: 1000px) {

    .service-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 600px) {

    .service-grid-premium {
        grid-template-columns: 1fr;
    }

    .service-card-premium {
        min-height: 400px;
    }

    .service-visual {
        height: 175px;
    }

    .partner-logo {
        width: 170px;
        height: 92px;
        flex-basis: 170px;
        padding: 17px;
    }

    .partner-marquee-track {
        animation-duration: 42s;
    }

    .partners-empty {
        display: block;
    }

    .partners-empty strong {
        display: block;
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .partner-marquee-track {
        animation: none !important;
    }

    .service-card-premium,
    .service-orbit,
    .service-shape,
    .partner-logo {
        transition: none !important;
    }
}


/* =========================================================
   GREEN HATCH — PREMIUM WHO WE ARE CARD
   ========================================================= */

.about-showcase {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}

.about-card {
    position: relative;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding: 70px;
    background:
        radial-gradient(circle at 92% 50%, rgba(143,230,62,.13), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fcf8 55%, #f1f8f0 100%);
    border: 1px solid rgba(8,117,63,.12);
    border-radius: 34px;
    overflow: hidden;
    box-shadow:
        0 25px 70px rgba(4,62,43,.10),
        0 5px 20px rgba(4,62,43,.05);
    isolation: isolate;
}

.about-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.75), transparent 45%);
    pointer-events: none;
    z-index: -1;
}

.about-card-content {
    position: relative;
    z-index: 3;
    max-width: 650px;
}

.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .24em;
    color: #4c8e27;
}

.about-eyebrow span {
    width: 36px;
    height: 2px;
    background: #8fe63e;
    border-radius: 10px;
}

.about-card-content h2 {
    margin: 0;
    max-width: 650px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 700;
    color: #0b382b;
}

.about-card-info {
    position: relative;
    z-index: 4;
    max-width: 520px;
    margin-left: auto;
    padding-right: 80px;
}

.about-card-info p {
    margin: 0 0 30px;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    line-height: 1.65;
    color: #596b64;
}

.about-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #096238;
    text-decoration: none;
    transition: gap .3s ease, color .3s ease;
}

.about-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 2px;
    background: #8fe63e;
    transition: width .3s ease;
}

.about-link span {
    font-size: 21px;
    transition: transform .3s ease;
}

.about-link:hover {
    color: #06482d;
    gap: 14px;
}

.about-link:hover::after {
    width: 100%;
}

.about-link:hover span {
    transform: translateX(4px);
}

/* Decorative leaf */

.about-leaf-area {
    position: absolute;
    right: -15px;
    top: 50%;
    width: 330px;
    height: 470px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.leaf-glow {
    position: absolute;
    width: 290px;
    height: 290px;
    top: 80px;
    right: 10px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(143,230,62,.22),
        rgba(20,145,90,.08) 45%,
        transparent 70%
    );
    filter: blur(8px);
    animation: leafGlow 6s ease-in-out infinite;
}

.about-leaf {
    position: absolute;
    width: 280px;
    height: 420px;
    right: 10px;
    top: 15px;
    overflow: visible;
    transform-origin: 50% 100%;
    animation: leafFloat 7s ease-in-out infinite;
}

.leaf-main {
    fill: rgba(8,117,63,.14);
    stroke: rgba(8,117,63,.45);
    stroke-width: 2;
}

.leaf-vein {
    fill: none;
    stroke: rgba(8,117,63,.55);
    stroke-width: 2;
    stroke-linecap: round;
}

.leaf-vein-small {
    fill: none;
    stroke: rgba(8,117,63,.28);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Leaf badge */

.leaf-badge {
    position: absolute;
    right: 35px;
    top: 92px;
    width: 112px;
    height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(8,117,63,.13);
    box-shadow: 0 15px 40px rgba(8,117,63,.10);
    backdrop-filter: blur(12px);
    transform: rotate(-7deg);
    animation: badgeFloat 5s ease-in-out infinite;
}

.leaf-badge span {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #286d37;
}

/* Animations */

@keyframes leafFloat {
    0%, 100% {
        transform: rotate(-2deg) translateY(0);
    }
    50% {
        transform: rotate(2deg) translateY(-12px);
    }
}

@keyframes badgeFloat {
    0%, 100% {
        transform: rotate(-7deg) translateY(0);
    }
    50% {
        transform: rotate(-3deg) translateY(-8px);
    }
}

@keyframes leafGlow {
    0%, 100% {
        opacity: .55;
        transform: scale(.95);
    }
    50% {
        opacity: .9;
        transform: scale(1.08);
    }
}

/* Tablet */

@media (max-width: 1000px) {
    .about-card {
        grid-template-columns: 1fr;
        padding: 55px;
        min-height: 650px;
    }

    .about-card-info {
        margin-left: 0;
        max-width: 560px;
        padding-right: 180px;
    }

    .about-leaf-area {
        right: -35px;
        opacity: .85;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .about-showcase {
        padding: 55px 0;
    }

    .about-card {
        min-height: auto;
        padding: 42px 28px;
        border-radius: 25px;
        display: block;
    }

    .about-card-content h2 {
        font-size: clamp(40px, 11vw, 58px);
        line-height: 1;
    }

    .about-card-info {
        margin-top: 35px;
        padding-right: 0;
        max-width: 100%;
    }

    .about-card-info p {
        font-size: 17px;
        line-height: 1.6;
    }

    .about-leaf-area {
        position: relative;
        right: auto;
        top: auto;
        width: 230px;
        height: 280px;
        margin: 10px auto -30px;
        transform: none;
        opacity: .75;
    }

    .about-leaf {
        width: 200px;
        height: 300px;
        right: 10px;
        top: 0;
    }

    .leaf-badge {
        width: 88px;
        height: 88px;
        right: 0;
        top: 35px;
    }

    .leaf-badge span {
        font-size: 9px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .about-leaf,
    .leaf-badge,
    .leaf-glow {
        animation: none;
    }
}


/* =========================================================
   GREEN HATCH — REFINED MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: relative;
        z-index: 1000;
    }

    .nav-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-toggle {
        position: relative;
        z-index: 1002;

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

        width: 46px;
        height: 46px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background: transparent;

        color: var(--gh-deep);

        font-size: 30px;
        line-height: 1;

        cursor: pointer;

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

    .nav-toggle:hover {
        background: rgba(8,117,63,.08);
    }

    .nav-toggle:active {
        transform: scale(.94);
    }

    .nav {
        position: absolute;

        left: 0;
        right: 0;
        top: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 14px 22px 22px;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(244,250,245,.98)
            );

        border-top: 1px solid rgba(8,117,63,.10);

        box-shadow:
            0 20px 45px rgba(3,47,35,.12);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav a:not(.nav-cta) {
        display: flex;
        align-items: center;

        min-height: 56px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: 17px;
        font-weight: 700;

        color: var(--gh-deep);

        text-decoration: none;

        transition:
            background .2s ease,
            color .2s ease,
            padding-left .2s ease;
    }

    .nav a:not(.nav-cta)::after {
        display: none;
    }

    .nav a:not(.nav-cta):hover {
        padding-left: 19px;
        background: rgba(143,230,62,.12);
        color: var(--gh-green);
    }

    .nav .nav-cta {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 52px;

        margin-top: 10px;

        border-radius: 999px;

        font-size: 16px;

        box-shadow:
            0 10px 24px rgba(8,71,41,.14);
    }
}


@media (max-width: 600px) {

    .nav {
        padding:
            10px
            18px
            18px;
    }

    .nav a:not(.nav-cta) {
        min-height: 52px;
        font-size: 16px;
    }

    .nav .nav-cta {
        min-height: 50px;
        margin-top: 8px;
    }
}

/* =========================================================
   GREEN HATCH — REFINED MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: relative;
        z-index: 1000;
    }

    .nav-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-toggle {
        position: relative;
        z-index: 1002;

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

        width: 46px;
        height: 46px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background: transparent;

        color: var(--gh-deep);

        font-size: 30px;
        line-height: 1;

        cursor: pointer;

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

    .nav-toggle:hover {
        background: rgba(8,117,63,.08);
    }

    .nav-toggle:active {
        transform: scale(.94);
    }

    .nav {
        position: absolute;

        left: 0;
        right: 0;
        top: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 14px 22px 22px;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(244,250,245,.98)
            );

        border-top: 1px solid rgba(8,117,63,.10);

        box-shadow:
            0 20px 45px rgba(3,47,35,.12);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav a:not(.nav-cta) {
        display: flex;
        align-items: center;

        min-height: 56px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: 17px;
        font-weight: 700;

        color: var(--gh-deep);

        text-decoration: none;

        transition:
            background .2s ease,
            color .2s ease,
            padding-left .2s ease;
    }

    .nav a:not(.nav-cta)::after {
        display: none;
    }

    .nav a:not(.nav-cta):hover {
        padding-left: 19px;
        background: rgba(143,230,62,.12);
        color: var(--gh-green);
    }

    .nav .nav-cta {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 52px;

        margin-top: 10px;

        border-radius: 999px;

        font-size: 16px;

        box-shadow:
            0 10px 24px rgba(8,71,41,.14);
    }
}


@media (max-width: 600px) {

    .nav {
        padding:
            10px
            18px
            18px;
    }

    .nav a:not(.nav-cta) {
        min-height: 52px;
        font-size: 16px;
    }

    .nav .nav-cta {
        min-height: 50px;
        margin-top: 8px;
    }
}
CSScd /Applications/XAMPP/xamppfiles/htdocs/green_hatch_investments && \
cat >> assets/css/site.css <<'CSS'

/* =========================================================
   GREEN HATCH — REFINED MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: relative;
        z-index: 1000;
    }

    .nav-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-toggle {
        position: relative;
        z-index: 1002;

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

        width: 46px;
        height: 46px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background: transparent;

        color: var(--gh-deep);

        font-size: 30px;
        line-height: 1;

        cursor: pointer;

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

    .nav-toggle:hover {
        background: rgba(8,117,63,.08);
    }

    .nav-toggle:active {
        transform: scale(.94);
    }

    .nav {
        position: absolute;

        left: 0;
        right: 0;
        top: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 14px 22px 22px;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(244,250,245,.98)
            );

        border-top: 1px solid rgba(8,117,63,.10);

        box-shadow:
            0 20px 45px rgba(3,47,35,.12);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav a:not(.nav-cta) {
        display: flex;
        align-items: center;

        min-height: 56px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: 17px;
        font-weight: 700;

        color: var(--gh-deep);

        text-decoration: none;

        transition:
            background .2s ease,
            color .2s ease,
            padding-left .2s ease;
    }

    .nav a:not(.nav-cta)::after {
        display: none;
    }

    .nav a:not(.nav-cta):hover {
        padding-left: 19px;
        background: rgba(143,230,62,.12);
        color: var(--gh-green);
    }

    .nav .nav-cta {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 52px;

        margin-top: 10px;

        border-radius: 999px;

        font-size: 16px;

        box-shadow:
            0 10px 24px rgba(8,71,41,.14);
    }
}


@media (max-width: 600px) {

    .nav {
        padding:
            10px
            18px
            18px;
    }

    .nav a:not(.nav-cta) {
        min-height: 52px;
        font-size: 16px;
    }

    .nav .nav-cta {
        min-height: 50px;
        margin-top: 8px;
    }
}