/* EASY CUSTOMIZATION: edit the values below. This file loads AFTER style.css. */
:root {
  --ink: #112620;      /* dark text */
  --deep: #0b201b;     /* dark forest green sections */
  --green: #2d5946;    /* secondary green */
  --gold: #c9a66b;     /* champagne gold */
  --paper: #f5f3ed;    /* warm white background */
}
/* HERO PHOTO: replace assets/hero.webp, or change the URL below */
/* .hero { background-image: linear-gradient(90deg,rgba(4,22,17,.91),rgba(4,22,17,.19)), url('assets/your-new-photo.jpg'); } */
/* HERO TEXT SIZE: .hero h1 {font-size: clamp(48px,6.6vw,106px);} */
/* HOME PRODUCT PORTFOLIO - 4 + 3 BALANCED GRID */
body > main > section.section.divider .wrap > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* HOME PRODUCT PORTFOLIO - PERFECT 4 + 3 CENTERED GRID */
body > main > section.section.divider .wrap > .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* TOP ROW - 4 PRODUCTS */
body > main > section.section.divider .wrap > .grid > .product-card:nth-child(-n+4) {
    grid-column: span 2;
}

/* BOTTOM ROW - 3 PRODUCTS */
body > main > section.section.divider .wrap > .grid > .product-card:nth-child(5) {
    grid-column: 2 / span 2;
}

body > main > section.section.divider .wrap > .grid > .product-card:nth-child(6),
body > main > section.section.divider .wrap > .grid > .product-card:nth-child(7) {
    grid-column: span 2;
}

/* =========================================
   GREEN EDGE PREMIUM DESIGN SYSTEM
   ADI-INSPIRED COLOUR FOUNDATION
   ========================================= */

:root {
    --ge-ink: #111820;
    --ge-deep: #17211E;
    --ge-forest: #263B34;
    --ge-gold: #C8A96A;
    --ge-ivory: #F3F0E9;
    --ge-stone: #E8E4DC;
    --ge-white: #FFFFFF;
}

/* =========================================
   BEYOND THE PRODUCT - PREMIUM CINEMATIC
   ========================================= */

    .beyond-product {
    background:
        linear-gradient(
            90deg,
            rgba(8, 14, 20, 0.65) 0%,
            rgba(10, 18, 25, 0.48) 48%,
            rgba(8, 14, 20, 0.38) 100%
        ),
        url("assets/quality-spec-testing.jpg") center/cover no-repeat !important;

    border-top: 1px solid rgba(200, 169, 106, 0.28);
    border-bottom: 1px solid rgba(200, 169, 106, 0.18);
}

.beyond-product .eyebrow {
    color: #C8A96A;
    letter-spacing: 0.18em;
}

.beyond-product h2 {
    color: #FFFFFF;
}

.beyond-product p {
    color: rgba(255, 255, 255, 0.76);
}

.beyond-product .btn.outline {
    color: #FFFFFF;
    border-color: rgba(200, 169, 106, 0.75);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.beyond-product .btn.outline:hover {
    background: #C8A96A;
    color: #111820;
    border-color: #C8A96A;
    transform: translateY(-3px);
}

/* =========================================
   HOME PRODUCT PORTFOLIO
   PREMIUM DARK EDITORIAL SYSTEM
   ========================================= */

main > section.section.divider.home-products {
    position: relative;
    overflow: hidden;
    background: #15191A;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* SUBTLE DEPTH - NOT A VISIBLE GRADIENT */
.home-products::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -280px;
    top: -260px;
    border: 1px solid rgba(201, 166, 107, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.home-products > .wrap {
    position: relative;
    z-index: 1;
}

/* SECTION LABEL */
.home-products > .wrap > .eyebrow {
    color: #C9A66B;
    letter-spacing: 0.20em;
    font-weight: 600;
}

/* MAIN EDITORIAL HEADING */
.home-products .intro h2 {
    color: #F4F1EA;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

/* INTRO COPY */
.home-products .intro .lead {
    color: rgba(244, 241, 234, 0.68);
    line-height: 1.8;
}

/* PRODUCT PORTFOLIO - TEXT VISIBILITY FIX */

main > section.section.divider.home-products .intro h2 {
    color: #F4F1EA;
}

main > section.section.divider.home-products .intro .lead {
    color: rgba(244, 241, 234, 0.72);
}

main > section.section.divider.home-products > .wrap > .eyebrow {
    color: #C9A66B;
}

/* =========================================
   HOME PRODUCTS - PREMIUM PRODUCT CARDS
   ========================================= */

main > section.section.divider.home-products .product-card {
    background: #F2EFE8;
    border: 1px solid rgba(201, 166, 107, 0.20);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

main > section.section.divider.home-products .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 166, 107, 0.58);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

main > section.section.divider.home-products .product-card .content {
    background: #F2EFE8;
}

main > section.section.divider.home-products .product-card .eyebrow {
    color: #8C7043;
}

main > section.section.divider.home-products .product-card h3 {
    color: #15191A;
}

main > section.section.divider.home-products .product-card p {
    color: #626966;
}

main > section.section.divider.home-products .product-card .more {
    border-top: 1px solid rgba(21, 25, 26, 0.12);
    color: #15191A;
}

/* HOME PRODUCTS - PREMIUM VIEW ALL BUTTON */

main > section.section.divider.home-products .btn.dark {
    background: #C9A66B;
    color: #15191A;
    border: 1px solid #C9A66B;
    padding: 16px 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

main > section.section.divider.home-products .btn.dark:hover {
    background: transparent;
    color: #F4F1EA;
    border-color: #C9A66B;
    transform: translateY(-3px);
}

/* =========================================
   PRODUCT DETAIL - PREMIUM MAROON HERO
   ========================================= */

.page-hero {
    background: #241719;
    border-bottom: 1px solid rgba(201, 166, 107, 0.22);
}

.page-hero .eyebrow {
    color: #C9A66B;
}

.page-hero h1 {
    color: #F4F1EA;
}

.page-hero p {
    color: rgba(244, 241, 234, 0.72);
}

/* =========================================
   PRODUCT DETAIL - OVERVIEW FOUNDATION
   ========================================= */

.page-hero + .section {
    background: #241719;
    border-bottom: 1px solid rgba(36, 23, 25, 0.12);
}


/* PRODUCT DETAIL - MAROON TEXT SYSTEM */

.detail .eyebrow {
    color: #D6B77A !important;
}

.detail h2 {
    color: #FFFFFF !important;
}

.detail .lead {
    color: rgba(255, 255, 255, 0.82) !important;
}

.detail .spec strong {
    color: #D6B77A !important;
}

.detail .spec span {
    color: rgba(255, 255, 255, 0.90) !important;
}

.detail .note {
    color: rgba(255, 255, 255, 0.68) !important;
}

/* PRODUCT DETAIL - PREMIUM IMAGE */
.detail > img {
    filter: none !important;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(214, 183, 122, 0.22);
}
/* PRODUCT DETAIL - TIGHTER PREMIUM SPACING */
.page-hero + .section {
    padding-top: 58px !important;
    padding-bottom: 64px !important;
}
/* PRODUCT DETAIL - PREMIUM ENQUIRE BUTTON */
.detail .btn.dark {
    background: #D6B77A !important;
    color: #241719 !important;
    border: 1px solid #D6B77A !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    transition: all 0.3s ease;
}

.detail .btn.dark:hover {
    background: transparent !important;
    color: #D6B77A !important;
    border-color: #D6B77A !important;
    transform: translateY(-3px);
}

/* PRODUCT HERO - SUBTLE GLASS CINEMATIC DEPTH */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* =========================================
   PRODUCT HERO - PREMIUM CINEMATIC GLASS
   ========================================= */

.page-hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/coco-peat-blocks-new.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero .wrap {
    width: 100%;
    position: relative;
    z-index: 2;
}

/* FINAL PRODUCT HERO GLASS PANEL */
.page-hero .wrap {
width: min(920px, calc(100% - 80px));
margin-left: 5%;
margin-right: auto;
padding: 34px 48px !important;

    background: rgba(15, 19, 24, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid #D6B77A;
    border-radius: 14px;

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

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30);
}

.page-hero .eyebrow {
    color: #D6B77A !important;
    letter-spacing: 0.20em;
}

.page-hero h1 {
    color: #FFFFFF !important;
    max-width: 720px;
    margin-top: 20px;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
}

.page-hero p {
    color: rgba(255, 255, 255, 0.86) !important;
    max-width: 620px;
    margin-top: 24px;
    line-height: 1.7;
}
/* RELATED MATERIALS - PREMIUM WARM STONE */
.detail + .section {
    background: #F2EFE8;
}

/* RELATED MATERIALS - PREMIUM CARDS */
.detail + .section .product-card {
    background: #F8F5EE;
    border: 1px solid rgba(201, 166, 107, 0.28);
    box-shadow: 0 16px 38px rgba(17, 25, 26, 0.10);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.detail + .section .product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 166, 107, 0.60);
    box-shadow: 0 24px 48px rgba(17, 25, 26, 0.16);
}

/* =========================================
   RELATED MATERIALS — LOCKED PREMIUM DESIGN
   ========================================= */

.related-materials {
    position: relative;
    overflow: hidden;
    padding-top: 110px !important;
    padding-bottom: 120px !important;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(198, 164, 105, 0.12) 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #151b20 0%,
            #1b2529 55%,
            #11181c 100%
        ) !important;

    border-top: 1px solid rgba(214, 183, 122, 0.22);
}

.related-materials > .wrap {
    position: relative;
    z-index: 2;
}

.related-materials .eyebrow {
    color: #d6b77a !important;
    letter-spacing: 0.22em;
}

.related-materials h2 {
    color: #f4efe5 !important;
    margin-bottom: 52px;
}

.related-materials .product-card {
    background: #f3efe6 !important;
    border: 1px solid rgba(214, 183, 122, 0.20);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.related-materials .product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(214, 183, 122, 0.65);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.30);
}

.related-materials .product-card .content {
    background: #f3efe6 !important;
}

.related-materials .product-card .eyebrow {
    color: #8f7041 !important;
}

.related-materials .product-card h3 {
    color: #15201f !important;
}

.related-materials .product-card p {
    color: #59615e !important;
}

.related-materials .product-card .more {
    color: #15201f !important;
}

.related-materials .product-card .pic {
    overflow: hidden;
}

.related-materials .product-card .pic img {
    transition: transform 0.65s ease;
}

.related-materials .product-card:hover .pic img {
    transform: scale(1.035);
}

/* RELATED MATERIALS — FINAL CARD POLISH */

.related-materials .product-card {
    border: 1px solid rgba(214, 183, 122, 0.30) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.related-materials .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(214, 183, 122, 0.75) !important;
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(214, 183, 122, 0.10);
}

.related-materials .product-card .more {
    border-top: 1px solid rgba(21, 32, 31, 0.10);
    padding-top: 18px;
}

/* =========================================
   FINAL PREMIUM CTA SECTION
   ========================================= */

.band {
    position: relative;
    overflow: hidden;
    padding: 105px 0 !important;

    background:
        radial-gradient(circle at 88% 20%,
            rgba(201, 166, 107, 0.16) 0%,
            transparent 30%),
        linear-gradient(135deg,
            #f3efe6 0%,
            #e8dfd0 55%,
            #f7f4ed 100%) !important;

    border-top: 1px solid rgba(201, 166, 107, 0.30);
}

.band .eyebrow {
    color: #9b7841 !important;
    letter-spacing: 0.22em;
}

.band h2 {
    color: #101918 !important;
    line-height: 1.08;
}

.band .btn.dark {
    background: #111918 !important;
    color: #ffffff !important;
    border: 1px solid #111918 !important;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.band .btn.dark:hover {
    background: #c9a66b !important;
    color: #111918 !important;
    border-color: #c9a66b !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(17, 25, 24, 0.18);
}

/* =========================================
   FINAL PREMIUM FOOTER
   ========================================= */

.footer {
    background:
        linear-gradient(
            135deg,
            #111820 0%,
            #151c24 55%,
            #10161d 100%
        ) !important;

    border-top: 1px solid rgba(201, 166, 107, 0.28);
}

.footer h4 {
    color: #c9a66b !important;
    letter-spacing: 0.18em;
}

.footer p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.footer a {
    color: rgba(255, 255, 255, 0.78) !important;
    display: inline-block;
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease;
}

.footer a:hover {
    color: #d6b77a !important;
    transform: translateX(6px);
    text-shadow: 0 0 18px rgba(214, 183, 122, 0.25);
}

/* FOOTER EXPLORE LINKS - FIX SPACING */
.footer .footer-grid > div:nth-child(2) a {
    display: block !important;
    width: fit-content;
    margin-bottom: 12px;
}

/* COCO PEAT POWDER - PRODUCT HERO IMAGE */
body.product-coco-peat-powder .page-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/coco-peat-powder-hero-final.jpg") !important;
}

/* COIR FIBER - PRODUCT HERO IMAGE */
body.product-coir-fiber .page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/coir-fiber-hero-new.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* COCO CHIPS - PRODUCT HERO IMAGE */
body.product-coco-chips .page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/coco-chips-hero-final.png") !important;

    background-size:  100% auto  !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* COMPOST FERTILIZER - PRODUCT HERO IMAGE */
body.product-compost-fertilizer .page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/compost-fertilizer-hero-new.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* COW DUNG - PRODUCT HERO IMAGE */
body.product-cow-dung .page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/cow-dung-fertilizer-hero-final.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* GROW BAGS - PRODUCT HERO IMAGE */
body.product-grow-bags .page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(18, 20, 24, 0.72) 48%,
            rgba(18, 15, 16, 0.38) 100%
        ),
        url("assets/grow-bags-hero-new.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* BEYOND PRODUCT - HIDE OLD SIDE IMAGE */
.beyond-product .visual {
    display: none !important;
}

/* BEYOND PRODUCT - FULL CINEMATIC BACKGROUND */
.beyond-product {
    position: relative !important;
    min-height: 620px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(8, 15, 24, 0.94) 0%,
            rgba(8, 18, 30, 0.82) 38%,
            rgba(8, 18, 30, 0.38) 68%,
            rgba(8, 18, 30, 0.12) 100%
        ),
        url("assets/coco-quality-testing.jpg") center / cover no-repeat !important;
}

.beyond-product .image {
    display: none !important;
}

.beyond-product .copy {
    position: relative !important;
    z-index: 2 !important;
    width: min(520px, 90%) !important;
    margin-left: max(7vw, 40px) !important;
}

.beyond-product .eyebrow {
    color: #C8A96A !important;
}

.beyond-product h2 {
    color: #FFFFFF !important;
    font-size: clamp(48px, 5vw, 76px) !important;
    line-height: 0.98 !important;
    max-width: 520px !important;
}

.beyond-product p {
    color: rgba(255,255,255,0.86) !important;
    max-width: 520px !important;
}

.beyond-product .btn.outline {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.65) !important;
}

/* PROCESS PAGE - PREMIUM FACTORY HERO */
.process-hero {
    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, 0.88) 0%,
            rgba(15, 22, 25, 0.68) 48%,
            rgba(10, 14, 18, 0.32) 100%
        ),
        url("assets/process-factory.jpg") center / cover no-repeat !important;
}

/* PROCESS PAGE - PREMIUM 7 STEP SYSTEM */

.process-hero + .dark-section .steps {
    gap: 18px !important;
}

.process-hero + .dark-section .step {
    position: relative;
    padding: 30px 26px 28px !important;
    min-height: 210px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(200, 169, 106, 0.20);
    border-radius: 4px;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.process-hero + .dark-section .step:hover {
    transform: translateY(-7px);
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(200, 169, 106, 0.70);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}

.process-hero + .dark-section .step .num {
    display: block;
    color: #C8A96A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.20em;
    margin-bottom: 30px;
}

.process-hero + .dark-section .step h3 {
    color: #FFFFFF;
    margin-bottom: 14px;
}

.process-hero + .dark-section .step p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
}

.process-hero + .dark-section .step::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #C8A96A;
    transition: width 0.35s ease;
}

.process-hero + .dark-section .step:hover::after {
    width: calc(100% - 52px);
}

/* PROCESS STEPS - FINAL ALIGNMENT */

/* Remove the old horizontal divider look */
.process-hero + .dark-section .step {
    border-top: 1px solid rgba(200, 169, 106, 0.22) !important;
}

/* Center the last 3 cards on desktop */
@media (min-width: 900px) {
    .process-hero + .dark-section .steps {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 18px !important;
    }

    .process-hero + .dark-section .step:nth-child(1) {
        grid-column: 1 / 3;
    }

    .process-hero + .dark-section .step:nth-child(2) {
        grid-column: 3 / 5;
    }

    .process-hero + .dark-section .step:nth-child(3) {
        grid-column: 5 / 7;
    }

    .process-hero + .dark-section .step:nth-child(4) {
        grid-column: 7 / 9;
    }

    .process-hero + .dark-section .step:nth-child(5) {
        grid-column: 2 / 4;
    }

    .process-hero + .dark-section .step:nth-child(6) {
        grid-column: 4 / 6;
    }

    .process-hero + .dark-section .step:nth-child(7) {
        grid-column: 6 / 8;
    }
}

/* PROCESS STEPS - REMOVE TOP LINE ONLY */
.steps {
    border-top: none !important;
}

/* PROCESS - QUALITY SPECIFICATION CINEMATIC SECTION */
.quality-spec {
    position: relative;
    overflow: hidden;
    background:
       linear-gradient(
    90deg,
    rgba(8, 14, 20, 0.94) 0%,
    rgba(8, 14, 20, 0.86) 45%,
    rgba(8, 14, 20, 0.72) 72%,
    rgba(8, 14, 20, 0.68) 100%
        ),
        url("assets/quality-spec-testing.jpg") center / cover no-repeat !important;
}

.quality-spec h2 {
    color: #ffffff !important;
}

.quality-spec .lead {
    color: rgba(255, 255, 255, 0.88) !important;
}

.quality-spec .note {
    color: rgba(255, 255, 255, 0.62) !important;
}
/* PRODUCTS PAGE - 7 PRODUCT PREMIUM GRID */
@media (min-width: 900px) {

    .products-page-grid {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 28px !important;
    }

    /* Top row - 4 products */
    .products-page-grid .product-card:nth-child(1) {
        grid-column: 1 / 3;
    }

    .products-page-grid .product-card:nth-child(2) {
        grid-column: 3 / 5;
    }

    .products-page-grid .product-card:nth-child(3) {
        grid-column: 5 / 7;
    }

    .products-page-grid .product-card:nth-child(4) {
        grid-column: 7 / 9;
    }

    /* Bottom row - 3 products centered */
    .products-page-grid .product-card:nth-child(5) {
        grid-column: 2 / 4;
    }

    .products-page-grid .product-card:nth-child(6) {
        grid-column: 4 / 6;
    }

    .products-page-grid .product-card:nth-child(7) {
        grid-column: 6 / 8;
    }
}

/* PRODUCTS PAGE - PREMIUM CARD DESIGN */
.products-page-grid .product-card {
    background: #F3F0E8 !important;
    border: 1px solid rgba(201, 166, 107, 0.55) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.products-page-grid .product-card .pic {
    width: 100% !important;
    height: 260px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.products-page-grid .product-card .pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.55s ease !important;
}

.products-page-grid .product-card:hover {
    transform: translateY(-8px) !important;
    border-color: #C9A66B !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28) !important;
}

.products-page-grid .product-card:hover .pic img {
    transform: scale(1.05) !important;
}

/* PRODUCTS PAGE - TEXT CLARITY */
.products-page-grid .product-card {
    color: #112020 !important;
}

.products-page-grid .product-card .eyebrow {
    color: #8A6A32 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
}

.products-page-grid .product-card h3 {
    color: #0B201B !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.products-page-grid .product-card p {
    color: #4A514E !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

.products-page-grid .product-card .link {
    color: #0B201B !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* PRODUCTS PAGE - PREMIUM CONTENT & EXPLORE */
.products-page-grid .product-card .content {
    padding: 24px 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 245px !important;
}

.products-page-grid .product-card h3 {
    margin: 8px 0 10px !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
}

.products-page-grid .product-card p {
    margin: 0 0 22px !important;
}

.products-page-grid .product-card .more {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(201, 166, 107, 0.45) !important;
    color: #0B201B !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: color 0.3s ease !important;
}

.products-page-grid .product-card .more span:last-child {
    color: #A47D3B !important;
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

.products-page-grid .product-card:hover .more {
    color: #A47D3B !important;
}

.products-page-grid .product-card:hover .more span:last-child {
    transform: translate(4px, -4px) !important;
}

/* PRODUCTS PAGE - PREMIUM HERO BACKGROUND */
.products-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(7, 13, 18, 0.94) 0%,
            rgba(7, 13, 18, 0.82) 45%,
            rgba(7, 13, 18, 0.48) 75%,
            rgba(7, 13, 18, 0.30) 100%
        ),
        url("assets/products-hero.jpg") center 55% / cover no-repeat !important;
}

/* PRODUCTS HERO - DARK PREMIUM GLASS PANEL */
.products-hero .wrap {
    background: rgba(10, 16, 18, 0.78) !important;
    border: 1px solid rgba(201, 166, 107, 0.32) !important;
    border-left: 3px solid #C9A66B !important;
    border-radius: 14px !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30) !important;
}

/* CONTACT PAGE - PREMIUM HERO BACKGROUND */
.contact-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(7, 13, 18, 0.94) 0%,
            rgba(7, 13, 18, 0.82) 45%,
            rgba(7, 13, 18, 0.48) 75%,
            rgba(7, 13, 18, 0.28) 100%
        ),
        url("assets/contact-hero.jpg") center 58% / cover no-repeat !important;
}

/* CONTACT PAGE - PREMIUM ENQUIRY SECTION */
.contact-grid {
    background: #10181A !important;
    border: 1px solid rgba(201, 166, 107, 0.28) !important;
    border-radius: 18px !important;
    padding: 48px !important;
    gap: 56px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
}

.contact-grid > div:first-child {
    padding: 10px 34px 10px 4px !important;
    border-right: 1px solid rgba(201, 166, 107, 0.25) !important;
}

.contact-grid .eyebrow {
    color: #C9A66B !important;
}

.contact-grid h2 {
    color: #FFFFFF !important;
}

.contact-grid p,
.contact-grid strong,
.contact-grid a {
    color: rgba(255, 255, 255, 0.82) !important;
}

.contact-grid a:hover {
    color: #C9A66B !important;
}

/* CONTACT PAGE - PREMIUM RFQ FORM */
.contact-grid .form input,
.contact-grid .form select,
.contact-grid .form textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(201, 166, 107, 0.28) !important;
    border-radius: 8px !important;
    padding: 15px 16px !important;
    outline: none !important;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

.contact-grid .form input::placeholder,
.contact-grid .form textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

.contact-grid .form label {
    color: #C9A66B !important;
    font-weight: 600 !important;
}

.contact-grid .form input:focus,
.contact-grid .form select:focus,
.contact-grid .form textarea:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #C9A66B !important;
    box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.10) !important;
}

.contact-grid .form select option {
    background: #10181A !important;
    color: #FFFFFF !important;
}

/* CONTACT PAGE - PREMIUM FORM CTA */
.contact-grid .form button,
.contact-grid .form .btn {
    background: #C9A66B !important;
    color: #10181A !important;
    border: 1px solid #C9A66B !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    transition: all 0.3s ease !important;
}

.contact-grid .form button:hover,
.contact-grid .form .btn:hover {
    background: transparent !important;
    color: #C9A66B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

/* HOME - CONNECTED NETWORK IMAGE */
.connected-network .split > img {
    border: none !important;
    box-shadow: 0 20px 45px rgba(10, 16, 18, 0.16) !important;
}

/* HOME - CONNECTED NETWORK FINAL DESIGN */

.connected-network {
    position: relative;
    overflow: hidden;
    background: #10181A !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* subtle premium depth */
.connected-network::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -260px;
    border: 1px solid rgba(201, 166, 107, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.connected-network .wrap {
    position: relative;
    z-index: 1;
}

/* small heading */
.connected-network .eyebrow {
    color: #C9A66B !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
}

/* main heading */
.connected-network h2 {
    color: #FFFFFF !important;
    margin-top: 12px !important;
    margin-bottom: 30px !important;
}

/* description */
.connected-network .lead {
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.75 !important;
    max-width: 580px !important;
}

/* existing coconut image */
.connected-network .split > img {
    border: none  !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32) !important;
}

/* CTA */
.connected-network .btn.dark {
    background: #C9A66B !important;
    color: #10181A !important;
    border: 1px solid #C9A66B !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    transition: all 0.3s ease !important;
}

.connected-network .btn.dark:hover {
    background: transparent !important;
    color: #C9A66B !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

/* CONNECTED NETWORK - FINAL POLISH */
.connected-network .lead {
    color: rgba(255, 255, 255, 0.70) !important;
    font-weight: 400 !important;
}

.connected-network .btn.dark {
    background: #C9A66B !important;
    color: #10181A !important;
    border-color: #C9A66B !important;
    opacity: 1 !important;
}

/* CONNECTED NETWORK - REMOVE DIVIDER LINES */
section.section.connected-network {
    border-top: none !important;
    border-bottom: none !important;
}

section.section.connected-network::before {
    border: none !important;
}

.connected-network .split > img {
    clip-path: inset(2px 0 2px 0) !important;
}

/* CONNECTED NETWORK - PREMIUM ACCENTS */
.connected-network .eyebrow {
    color: #C9A66B !important;
}

.connected-network .btn.dark {
    background: #C9A66B !important;
    color: #10181A !important;
    border: 1px solid #C9A66B !important;
    opacity: 1 !important;
}

.connected-network .btn.dark:hover {
    background: transparent !important;
    color: #C9A66B !important;
}

/* ABOUT PAGE - PREMIUM HERO */
.about-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(7, 13, 18, 0.94) 0%,
            rgba(7, 13, 18, 0.82) 48%,
            rgba(7, 13, 18, 0.48) 76%,
            rgba(7, 13, 18, 0.30) 100%
        ),
        url("assets/about-coconut-plantation.jpg") center 55% / cover no-repeat !important;
}

/* ABOUT PAGE - TRADING BUILT AROUND THE BUYER */
.about-trading {
    background: #10181A !important;
    position: relative;
    overflow: hidden;
}

.about-trading .split {
    align-items: center !important;
    gap: clamp(55px, 7vw, 110px) !important;
}

.about-trading .split > img {
    width: 100% !important;
    max-width: 520px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 1px solid rgba(201, 166, 107, 0.65) !important;
    padding: 8px !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.32) !important;
}

.about-trading .eyebrow {
    color: #C9A66B !important;
}

.about-trading h2 {
    color: #FFFFFF !important;
    font-size: clamp(40px, 4.2vw, 64px) !important;
    line-height: 1.08 !important;
    margin: 14px 0 28px !important;
    max-width: 620px !important;
}

.about-trading .lead {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    max-width: 610px !important;
}

.about-trading .lead + .lead {
    margin-top: 18px !important;
}

/* ABOUT TRADING - CIRCLE PHOTO CROP */
.about-trading .split > img {
    object-fit: cover !important;
    object-position: 30% 45% !important;
    transform: scale(1.18) !important;
}

/* ABOUT - CONNECTED BUSINESSES FINAL PREMIUM DESIGN */

.connected-businesses {
    position: relative;
    overflow: hidden;
    padding: 95px 0 100px !important;
    background:
        radial-gradient(circle at 78% 18%, rgba(150, 55, 45, 0.24), transparent 34%),
        radial-gradient(circle at 15% 78%, rgba(110, 18, 30, 0.28), transparent 38%),
        linear-gradient(135deg, #21090d 0%, #3a0d12 48%, #16070a 100%) !important;
}

.connected-businesses .eyebrow {
    color: #D7AE68 !important;
    letter-spacing: 0.22em !important;
}

.connected-businesses h2 {
    color: #FFFFFF !important;
    font-size: clamp(46px, 5vw, 76px) !important;
    line-height: 1.05 !important;
    max-width: 1000px !important;
    margin-bottom: 52px !important;
}

.connected-businesses h2 br + * {
    color: #D7AE68 !important;
}

.connected-businesses .pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    counter-reset: business-card;
}

.connected-businesses .pillar {
    position: relative !important;
    min-height: 310px !important;
    padding: 88px 36px 36px !important;
    border: 1px solid rgba(215, 174, 104, 0.32) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    counter-increment: business-card;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease !important;
}

.connected-businesses .pillar::before {
    content: "0" counter(business-card);
    position: absolute;
    top: 28px;
    right: 32px;
    color: #D7AE68;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.9;
}

.connected-businesses .pillar::after {
    content: "";
    position: absolute;
    top: 43px;
    left: 36px;
    width: 44px;
    height: 2px;
    background: #D7AE68;
}

.connected-businesses .pillar h3 {
    color: #FFFFFF !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
}

.connected-businesses .pillar p {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.connected-businesses .pillar:hover {
    transform: translateY(-7px) !important;
    border-color: #D7AE68 !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

.connected-businesses h2 span {
    color: #D7AE68 !important;
}

/* HOME - CONNECTED NETWORK CIRCLE PHOTO */
.connected-network .split > img {
    width: 560px !important;
    height: 560px !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;
    border: 1px solid rgba(215, 174, 104, 0.55) !important;

    box-shadow:
        0 0 0 8px rgba(215, 174, 104, 0.05),
        0 25px 60px rgba(0, 0, 0, 0.30) !important;
}

/* HOME - CONNECTED NETWORK PREMIUM OVAL PHOTO */
.connected-network .split > img {
    width:  600px !important;
    height: 680px !important;
    max-width: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;
    border: 1px solid rgba(215, 174, 104, 0.55) !important;

    box-shadow:
        0 0 0 8px rgba(215, 174, 104, 0.05),
        0 26px 60px rgba(0, 0, 0, 0.30) !important;
}

/* =========================================================
   HOME - HOW THE NETWORK WORKS
   ========================================================= */

.home-network-process {
    position: relative;
    overflow: hidden;
    padding: 90px 0 85px !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(19, 105, 103, 0.22), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(201, 166, 107, 0.12), transparent 28%),
        linear-gradient(135deg, #06191c 0%, #08282b 48%, #041619 100%) !important;
}

.home-network-process .wrap {
    position: relative;
    z-index: 2;
    max-width: 1380px !important;
}

/* HEADING */
.network-process-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.network-process-heading .eyebrow {
    color: #D7AE68 !important;
    letter-spacing: 4px;
    font-size: 13px;
}

.network-process-heading h2 {
    margin: 14px 0 12px !important;
    color: #FFFFFF !important;
    font-size: clamp(42px, 4.3vw, 68px) !important;
    line-height: 1.05 !important;
    letter-spacing: -2px;
}

.network-process-heading h2 span {
    color: #D7AE68 !important;
}

.process-gold-line {
    width: 65px;
    height: 2px;
    margin: 22px auto;
    background: #D7AE68;
}

.process-intro {
    max-width: 760px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 17px;
    line-height: 1.7;
}

/* 4 + 3 GRID */
.network-process-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 28px;
    row-gap: 62px;
    align-items: start;
}

.network-step {
    position: relative;
    text-align: center;
}

.network-step:nth-child(1) {
    grid-column: 1 / span 2;
}

.network-step:nth-child(2) {
    grid-column: 3 / span 2;
}

.network-step:nth-child(3) {
    grid-column: 5 / span 2;
}

.network-step:nth-child(4) {
    grid-column: 7 / span 2;
}

.network-step:nth-child(5) {
    grid-column: 2 / span 2;
}

.network-step:nth-child(6) {
    grid-column: 4 / span 2;
}

.network-step:nth-child(7) {
    grid-column: 6 / span 2;
}

/* PHOTO CARDS */
.network-step-image {
    position: relative;
    height: 185px;
    margin-bottom: 36px;
    overflow: visible;
    border: 1px solid rgba(215, 174, 104, 0.85);
    border-radius: 10px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.network-step-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.network-step:hover .network-step-image img {
    transform: scale(1.035);
    filter: brightness(1.06);
}

/* NUMBER CIRCLE */
.network-step-number {
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);

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

    width: 52px;
    height: 52px;
    border-radius: 50%;

    background: #071B1E;
    border: 2px solid #D7AE68;

    color: #D7AE68;
    font-size: 18px;
    font-weight: 700;

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.32);
    z-index: 4;
}

/* TEXT */
.network-step h3 {
    margin: 0 0 9px !important;
    color: #FFFFFF !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
}

.network-step p {
    max-width: 280px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* GOLD CONNECTORS - TOP ROW */
.network-step:nth-child(-n+3)::after {
    content: "···›";
    position: absolute;
    top: 76px;
    right: -31px;
    transform: translateX(50%);
    color: #D7AE68;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    z-index: 5;
}

/* GOLD CONNECTORS - BOTTOM ROW */
.network-step:nth-child(5)::after,
.network-step:nth-child(6)::after {
    content: "···›";
    position: absolute;
    top: 76px;
    right: -31px;
    transform: translateX(50%);
    color: #D7AE68;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    z-index: 5;
}

/* CTA */
.network-process-action {
    margin-top: 58px;
    text-align: center;
}

.network-process-action .btn {
    min-width: 210px;
    padding: 16px 30px !important;

    background: linear-gradient(135deg, #E3BE78, #C99A4E) !important;
    border: 1px solid #E0B86F !important;
    color: #091A1B !important;

    font-weight: 700;
    letter-spacing: 1px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.network-process-action .btn:hover {
    transform: translateY(-3px);
    background: #F0CE8B !important;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .network-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .network-step:nth-child(n) {
        grid-column: auto;
    }

    .network-step::after {
        display: none !important;
    }
}

@media (max-width: 620px) {
    .home-network-process {
        padding: 70px 0 !important;
    }

    .network-process-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

    .network-step-image {
        height: 220px;
    }

    .network-process-heading h2 {
        letter-spacing: -1px;
    }
}

/* HOME PROCESS - REFERENCE SIZE REFINEMENT */

.home-network-process .wrap {
    max-width: 1500px !important;
    width: 94% !important;
}

.network-process-grid {
    column-gap: 42px !important;
    row-gap: 72px !important;
}

.network-step-image {
    height: 215px !important;
}

.network-step h3 {
    font-size: 21px !important;
}

.network-step p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 310px !important;
}

.network-step-number {
    width: 58px !important;
    height: 58px !important;
    bottom: -29px !important;
    font-size: 19px !important;
}

.network-step-image {
    margin-bottom: 43px !important;
}

/* HOME PROCESS - CINEMATIC GLOBAL TRADE BACKGROUND */

.home-network-process {
    background:
        linear-gradient(
            180deg,
            rgba(4, 18, 22, 0.78) 0%,
            rgba(5, 28, 32, 0.86) 42%,
            rgba(3, 18, 22, 0.94) 100%
        ),
        url("assets/process-network-background.jpg")
        center 38% / cover no-repeat !important;

    background-attachment: scroll !important;
}

/* Dark cinematic edge shading */
.home-network-process::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(2, 13, 17, 0.52) 0%,
            transparent 22%,
            transparent 78%,
            rgba(2, 13, 17, 0.52) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 12, 16, 0.18) 0%,
            transparent 30%,
            rgba(2, 13, 17, 0.42) 100%
        );
}

    .home-network-process {
    background:
        linear-gradient(
            180deg,
            rgba(3, 15, 20, 0.35) 0%,
            rgba(4, 25, 30, 0.46) 45%,
            rgba(3, 18, 22, 0.58) 100%
        ),
        url("assets/process-network-background.jpg")
        center 42% / cover no-repeat !important;

    background-attachment: scroll !important;
}

/* =========================================================
   HOME - OUR COMMITMENTS / CINEMATIC CONTINUATION
   ========================================================= */

.home-commitments {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px !important;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(29, 112, 116, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 75%,
            rgba(201, 166, 107, 0.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #06191d 0%,
            #08272c 48%,
            #041419 100%
        ) !important;

    border-top: 1px solid rgba(215, 174, 104, 0.16);
}

/* subtle premium light detail */

.home-commitments::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;

    width: 620px;
    height: 620px;

    border: 1px solid rgba(215, 174, 104, 0.10);
    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(215, 174, 104, 0.025),
        0 0 0 160px rgba(215, 174, 104, 0.018);

    pointer-events: none;
}

/* remove unused visual layer */

.home-commitments .commitments-visual {
    display: none !important;
}


/* MAIN LAYOUT */

.home-commitments .commitments-content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 110px;
    align-items: center;

    max-width: 1380px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* LEFT SIDE */

.home-commitments .commitments-left .eyebrow {
    display: block;

    margin-bottom: 22px;

    color: #D7AE68 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
}

.home-commitments .commitments-left h2 {
    max-width: 560px;

    margin: 0 !important;

    color: #FFFFFF !important;

    font-size: clamp(54px, 5vw, 78px) !important;
    font-weight: 500 !important;
    line-height: 0.98 !important;
    letter-spacing: -3px !important;
}

.home-commitments .commitments-left h2 span {
    display: block;

    color: #D7AE68 !important;
}

.home-commitments .commitments-gold-line {
    width: 72px;
    height: 2px;

    margin: 30px 0 25px;

    background: #D7AE68;
}

.home-commitments .commitments-left > p {
    max-width: 480px;

    margin: 0 !important;

    color: rgba(255, 255, 255, 0.68) !important;

    font-size: 17px !important;
    line-height: 1.75 !important;
}


/* RIGHT SIDE */

.home-commitments .commitments-right {
    margin: 0 !important;
}

.home-commitments .commitment-item {
    position: relative;

    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 34px;
    align-items: center;

    padding: 32px 10px;

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

    transition:
        padding-left 0.35s ease,
        border-color 0.35s ease;
}

.home-commitments .commitment-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


/* 01 / 02 / 03 */

.home-commitments .commitment-number {
    color: #D7AE68 !important;

    font-size: 58px;
    font-weight: 300;
    line-height: 1;

    letter-spacing: -2px;

    border-right: 1px solid rgba(215, 174, 104, 0.35);

    transition: color 0.35s ease;
}


/* TEXT */

.home-commitments .commitment-copy h3 {
    margin: 0 0 8px !important;

    color: #FFFFFF !important;

    font-size: 21px !important;
    line-height: 1.3 !important;
}

.home-commitments .commitment-copy p {
    max-width: 540px;

    margin: 0 !important;

    color: rgba(255, 255, 255, 0.64) !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
}


/* SMALL GOLD HOVER DETAIL */

.home-commitments .commitment-item::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background: #D7AE68;

    transition: width 0.4s ease;
}

.home-commitments .commitment-item:hover {
    padding-left: 18px;

    border-color: rgba(215, 174, 104, 0.38);
}

.home-commitments .commitment-item:hover::after {
    width: 100%;
}


/* MOBILE */

@media (max-width: 900px) {

    .home-commitments {
        padding: 80px 0 !important;
    }

    .home-commitments .commitments-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 600px) {

    .home-commitments .commitment-item {
        grid-template-columns: 75px 1fr;
        gap: 22px;
    }

    .home-commitments .commitment-number {
        font-size: 44px;
    }

    .home-commitments .commitments-left h2 {
        letter-spacing: -2px !important;
    }
}

/* PREMIUM WHATSAPP FLOAT BUTTON */

.whatsapp {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;

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

    border-radius: 50% !important;

    background: #25D366 !important;
    color: #FFFFFF !important;

    border: 1px solid rgba(255,255,255,0.28) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.28),
        0 0 0 5px rgba(37,211,102,0.10) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

.whatsapp svg {
    width: 31px;
    height: 31px;
    display: block;
}

.whatsapp:hover {
    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 14px 34px rgba(0,0,0,0.34),
        0 0 0 7px rgba(37,211,102,0.13) !important;
}

/* HOME HERO - COMPACT PREMIUM CTA */

.hero .actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

/* COMMON */
.hero .actions .btn {
    position: relative !important;
    min-width: 0 !important;
    height: 58px !important;
    padding: 0 58px 0 25px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    border-radius: 29px !important;
    overflow: hidden !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.7px !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease !important;
}

/* 01 — PRODUCTS */
.hero .actions .btn.gold {
    width: 270px !important;

    background:
        linear-gradient(105deg, #0A3A2E 0%, #12533F 100%) !important;

    color: #FFFFFF !important;

    border:
        1px solid #D7AE68 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.24) !important;
}

/* 02 — QUOTATION */
.hero .actions .btn.outline {
    width: 250px !important;

    background:
        rgba(247,244,235,.96) !important;

    color: #10382E !important;

    border:
        1px solid #D7AE68 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.20) !important;
}

/* RIGHT ARROW CAPSULE */
.hero .actions .btn::after {
    content: "→" !important;

    position: absolute !important;
    right: 6px !important;
    top: 6px !important;

    width: 46px !important;
    height: 46px !important;

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

    border-radius: 50% !important;

    font-size: 22px !important;
    line-height: 1 !important;

    transition:
        transform .3s ease,
        background .3s ease !important;
}

.hero .actions .btn.gold::after {
    background:
        linear-gradient(135deg,#E5C57F,#C99A4E) !important;

    color: #10382E !important;
}

.hero .actions .btn.outline::after {
    background: #0D4939 !important;
    color: #FFFFFF !important;
}

/* HOVER */
.hero .actions .btn:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 17px 34px rgba(0,0,0,.30) !important;
}

.hero .actions .btn:hover::after {
    transform: translateX(3px) !important;
}

/* HERO CTA - FINAL HOVER + REMOVE OLD ARROWS */

/* Hide the original text arrow */
.hero .actions .btn {
    font-size: 0 !important;
}

.hero .actions .btn.gold::before {
    content: "EXPLORE OUR PRODUCTS";
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.hero .actions .btn.outline::before {
    content: "REQUEST A QUOTATION";
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 1.7px;
}

/* Explore hover: green -> champagne */
.hero .actions .btn.gold:hover {
    background: linear-gradient(110deg, #E4C47F, #C99A4E) !important;
    color: #0B352B !important;
    border-color: #E7C77F !important;
}

.hero .actions .btn.gold:hover::after {
    background: #0D4939 !important;
    color: #FFFFFF !important;
}

/* Quotation hover: ivory -> deep green */
.hero .actions .btn.outline:hover {
    background: linear-gradient(110deg, #0A3A2E, #12533F) !important;
    color: #FFFFFF !important;
    border-color: #D7AE68 !important;
}

.hero .actions .btn.outline:hover::after {
    background: linear-gradient(135deg, #E5C57F, #C99A4E) !important;
    color: #10382E !important;
}

/* HERO CTA - LEFT & RIGHT POSITION */

.hero .actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
}

.hero .actions .btn.outline {
    margin-left: auto !important;
    transform: translateY(45px) !important;
}

.hero .actions .btn.outline:hover {
    transform: translateY(41px) !important;
}

/* =========================================================
   GREEN EDGE — MOBILE RESPONSIVE SYSTEM
   STEP 01: GLOBAL SAFETY + HOME PRODUCT PORTFOLIO
   Desktop design remains untouched
   ========================================================= */

@media (max-width: 760px) {

    /* Prevent horizontal overflow on mobile */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* HOME — PRODUCT PORTFOLIO */
    .home-products .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .home-products .product-card {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    .home-products .product-card .pic {
        width: 100% !important;
        height: 300px !important;
    }

    .home-products .product-card .content {
        width: 100% !important;
    }
}

/* =========================================================
   GREEN EDGE — MOBILE RESPONSIVE SYSTEM
   STEP 02: HEADER + HERO + CTA
   ========================================================= */

@media (max-width: 760px) {

    /* HEADER */
    header.nav {
        height: 76px !important;
        padding: 0 20px !important;
    }

    header.nav .brand {
        min-width: 0 !important;
    }

    header.nav .brand img {
        width: 43px !important;
        height: 43px !important;
    }

    header.nav .hamburger {
        display: block !important;
    }

    /* HERO */
    .hero {
        min-height: 100svh !important;
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .hero .wrap {
        width: 100% !important;
        max-width: none !important;
        padding: 135px 24px 145px !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .hero .eyebrow {
        display: block !important;
        max-width: 310px !important;
        font-size: 10px !important;
        line-height: 1.6 !important;
        letter-spacing: 2px !important;
        margin-bottom: 18px !important;
    }

    .hero h1 {
        max-width: 100% !important;
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 0.98 !important;
        letter-spacing: -2.5px !important;
        margin: 0 0 24px !important;
    }

    .hero p {
        max-width: 520px !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        margin-bottom: 30px !important;
    }

    /* HERO CTA AREA */
    .hero .actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    .hero .actions .btn,
    .hero .actions .btn.gold,
    .hero .actions .btn.outline {
        width: 100% !important;
        max-width: 330px !important;
        height: 56px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .hero .actions .btn:hover,
    .hero .actions .btn.outline:hover {
        transform: translateY(-2px) !important;
    }

    /* BOTTOM HERO DETAILS */
    .hero-bottom {
        left: 24px !important;
        right: 24px !important;
        bottom: 24px !important;
        width: auto !important;
        gap: 12px !important;
        font-size: 9px !important;
    }
}

/* =========================================
   GREEN EDGE - MOBILE TOUCH INTERACTIONS
   Desktop hover design remains unchanged
   ========================================= */

@media (hover: none) and (pointer: coarse) {

    /* All buttons */
    .btn:active,
    .nav-cta:active {
        transform: translateY(-2px) scale(0.98) !important;
        filter: brightness(1.08) !important;
        transition: all 0.15s ease !important;
    }

    /* Product cards */
    .product-card:active {
        transform: translateY(-6px) scale(0.99) !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important;
        transition: all 0.15s ease !important;
    }

    /* Process cards */
    .network-step:active,
    .step:active {
        transform: translateY(-5px) scale(0.99) !important;
        filter: brightness(1.08) !important;
        transition: all 0.15s ease !important;
    }

    /* Connected Businesses cards */
    .connected-businesses .pillar:active {
        transform: translateY(-6px) !important;
        border-color: #D7AE68 !important;
        background: rgba(255, 255, 255, 0.065) !important;
    }

    /* Commitment rows */
    .home-commitments .commitment-item:active {
        padding-left: 18px !important;
        border-color: rgba(215, 174, 104, 0.38) !important;
    }

    /* Hero CTA - Explore */
    .hero .actions .btn.gold:active {
        background: linear-gradient(110deg, #E4C47F, #C99A4E) !important;
        color: #0B352B !important;
        border-color: #E7C77F !important;
    }

    .hero .actions .btn.gold:active::after {
        background: #0D4939 !important;
        color: #FFFFFF !important;
    }

    /* Hero CTA - Request quotation */
    .hero .actions .btn.outline:active {
        background: linear-gradient(110deg, #0A3A2E, #12533F) !important;
        color: #FFFFFF !important;
        border-color: #D7AE68 !important;
    }

    .hero .actions .btn.outline:active::after {
        background: linear-gradient(135deg, #E5C57F, #C99A4E) !important;
        color: #10382E !important;
    }

    /* Links */
    nav a:active,
    .navlinks a:active {
        color: #D7AE68 !important;
    }
}

/* HOME - CONNECTED NETWORK IMAGE SIZE */
@media (min-width: 900px) {
  .connected-network .split > img {
    transform: scale(1.15);
    transform-origin: center;
  }
}


/* ABOUT US - CONNECTED BUSINESSES BACKGROUND ONLY */
.connected-businesses {
    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 31, 0.88),
            rgba(5, 17, 31, 0.65)
        ),
        url("assets/connected-businesses-port.jpg")
        center center / cover no-repeat !important;
}


/* ABOUT US - PREMIUM NAVY GLASS CARDS */
.connected-businesses .pillars .pillar {
    background: rgba(8, 20, 34, 0.78) !important;
    border: 1px solid rgba(215, 174, 104, 0.48) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* COCO PEAT BLOCKS - HERO BACKGROUND ONLY */
.page-hero.coco-blocks-hero {
    background:
        linear-gradient(
            90deg,
            rgba(8, 14, 22, 0.82),
            rgba(8, 14, 22, 0.35)
        ),
        url("assets/coco-peat.jpg")
        center center / cover no-repeat !important;
}

/* GREEN EDGE - HEADER LOGO SIZE */
.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

/* ==========================================
   GREEN EDGE - MOBILE RESPONSIVE FIX
   Keep desktop design unchanged
   ========================================== */

@media screen and (max-width: 767px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* Mobile headings */
  h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word;
  }

  h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.18 !important;
    overflow-wrap: break-word;
  }

  /* About page hero */
  .page-hero h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 1.12 !important;
  }

  .page-hero p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Two-column layouts become one column */
  .split,
  .grid,
  .steps,
  .pillars {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Cards */
  .grid > *,
  .steps > *,
  .pillars > * {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Connected network image */
  .connected-network .split img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 420px;
    object-fit: cover;
    margin: 0 auto 28px;
  }

  /* Product cards */
  .product-card .pic {
    height: 240px !important;
  }

  /* Text readability */
  p,
  .lead {
    overflow-wrap: break-word;
  }

  /* Logo */
  .brand img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
  }
}

/* Small phones */
@media screen and (max-width: 390px) {

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .connected-network .split img {
    height: 340px;
  }
}

/* ==========================================
   GREEN EDGE - ABOUT MOBILE CORRECTION
   Desktop design stays unchanged
   ========================================== */

@media screen and (max-width: 767px) {

  /* ABOUT HERO */
  .about-hero {
    min-height: auto !important;
    padding: 110px 0 65px !important;
  }

  .about-hero .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
  }

  .about-hero h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
    overflow-wrap: normal !important;
  }

  .about-hero p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  /* CONNECTED BUSINESSES - ONE COLUMN */
  .connected-businesses {
    padding: 65px 0 !important;
  }

  .connected-businesses .wrap {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .connected-businesses h2 {
    font-size: clamp(30px, 7.5vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    margin-bottom: 30px !important;
  }

  .connected-businesses .pillars {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .connected-businesses .pillars .pillar {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 78px 24px 30px !important;
    box-sizing: border-box !important;
  }

  .connected-businesses .pillar h3 {
    font-size: 21px !important;
    line-height: 1.4 !important;
    overflow-wrap: normal !important;
  }

  .connected-businesses .pillar p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    overflow-wrap: normal !important;
  }

  /* HOME CONNECTED NETWORK OVAL */
  .connected-network .split > img {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    transform: none !important;
    margin: 0 auto 28px !important;
  }

  /* ABOUT TRADING IMAGE */
  .about-trading .split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 35px !important;
  }

  .about-trading .split > img {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  .about-trading h2 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
}

/* GREEN EDGE - ABOUT MOBILE HERO FINAL ADJUSTMENT */

@media screen and (max-width: 767px) {

  body.page-about .page-hero .hero-content,
  body.page-about .page-hero .hero-panel {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.page-about .page-hero h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.15 !important;
  }
}

/* ABOUT US HERO - MOBILE RESPONSIVE FIX */
@media screen and (max-width: 767px) {

  body .page-hero.about-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 70px 20px !important;
    background-position: center center !important;
  }

  body .page-hero.about-hero .wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 28px 22px !important;
  }

  body .page-hero.about-hero h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word;
  }

  body .page-hero.about-hero p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    overflow-wrap: normal !important;
  }
}