:root{
            --primary: #9BC539;
            --secondary: #072B31;
            --accent: #A4BCC2;
            --alert: #C10016;
            --hippo: #facc15;
            --dark: #1a3e44;
            --light: #c9f563;
            --grey: #64748b;
            --border: #e5e7eb;
            --white: #ffffff;
            --service-box: #f1f1f110;
            --shadow:0 15px 40px rgba(0,0,0,.08);
            --admin-nav-height:120px;
        }

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:'Inter',sans-serif;
            color:var(--dark);
            line-height:1.6;
            background: var(--service-box);
        }
        
        .container{
            width:min(1200px,90%);
            margin:auto;
        }

        /* Header */

.nav,
header {
  overflow: visible;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}

.admin-nav {
  overflow: visible;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  margin-bottom: 180px;
}

/* MAIN BAR */
.nav-bar {
  position: fixed;
  height: 60px;
  width: 100%;
  top: 0;
  background: linear-gradient(145deg, var(--primary), var(--light));
  border-bottom: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  box-shadow: 0 25px 60px var(--border);
}

/* ========================= */
/* LEFT LOGO */
/* ========================= */
.nav-logo {
  position: fixed;
  z-index: 1000;
  left: -40px;
  width: 350px;
  height: 350px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white); /* white swirl */

  -webkit-mask: url("../img/swirl.png")
    center / contain no-repeat;
  mask: url("../img/swirl.png")
    center / contain no-repeat;

  filter:
    drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2))
    drop-shadow(0 35px 80px rgba(0, 0, 0, 0.35))
    drop-shadow(0 60px 120px rgba(0, 0, 0, 0.2));
}

.nav-logo img {
  width: 230px;
  margin-left: 2%;
  margin-top: 55%;
}

/* ========================= */
/* NAV LINKS */
/* ========================= */
.nav-links {
  display: flex;
  gap: 50px;
  margin-right: 200px;
  z-index: 2;
  transition: all 0.3s ease;
}

.nav-links a {
  color: var(--secondary);
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1.5px;
  position: relative;
  transition: 0.25s ease;
}

.nav-links a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.nav-links a.active {
  color:var(--secondary);
  text-decoration: underline;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--hippo);
}

/* ========================= */
/* HAMBURGER */
/* ========================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  z-index: 2000;
}

.hamburger span {
  height: 4px;
  width: 100%;
  background: var(--secondary);
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.3s ease;
}

/* ========================= */
/* < 1670px */
/* LINKS ALIGN RIGHT */
/* ========================= */
@media (max-width: 1670px) {

  .nav-bar {
    justify-content: flex-end;
    padding-right: 50px;
  }

  .nav-links {
    margin-right: 15px;
    gap: 35px;
  }

  .nav-links a {
  font-size: 14px;
}
}

/* ========================= */
/* < 1230px */
/* HAMBURGER MODE */
/* ========================= */
@media (max-width: 1230px) {

  .hamburger {
    display: flex;
    margin-right: 50px;
  }

  .nav-links {
    position: fixed;
    top: 60px;
    right: -100%;
    width: 300px;
    height: calc(100vh - 60px);
    background: var(--primary);
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 50px;
    gap: 35px;
    transition: right 0.35s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links a {
    font-size: 22px;
  }
}

        .btn{
            display:inline-block;
            padding:14px 28px;
            border-radius:8px;
            text-decoration:none;
            font-weight:600;
            transition:.3s ease;
        }

        .btn-primary{
            background:var(--primary);
            color:var(--white);
        }

        .btn-secondary{
            background:var(--secondary);
            color:var(--white);
        }

        .btn-primary:hover{
            background: var(--hippo);
            transform:translateY(-2px);
        }

        /* Hero */

        .hero{
            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/header-img.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .home-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/tile.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .about-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/about.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .service-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/services.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .project-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/project.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .hippo-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/hippo.jpg');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .pay-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/how-to-pay.png');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .hippo-hero{

            padding:180px 0 120px;
            background:
            linear-gradient(rgba(7,43,49,.55),rgba(7,43,49,.55)),
                url('../img/hippo.jpg');
            background-size:cover;
            background-position:center;
            color:var(--white);
        }

        .hero-content{
            max-width:1300px;
        }

        .hero h1{
            font-size:4rem;
            line-height:1.1;
            margin-bottom:25px;
            font-weight:900;
            text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.25);
        }

        .about-hero h1{
            font-size:4rem;
            line-height:1.1;
            margin-bottom:25px;
            font-weight:900;
            text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.25);
        }

        
        .service-hero h1{
            font-size:4rem;
            line-height:1.1;
            margin-bottom:25px;
            font-weight:900;
            text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.25);
        }

        .hero p{
            font-size:1.2rem;
            margin-bottom:35px;
            opacity:.95;
            text-shadow:
        0 1px 2px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.25);
        }

        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:15px;
            margin-bottom:40px;
        }

        .badge{
            background:rgba(255,255,255,.15);
            border:1px solid rgba(255,255,255,.25);
            padding:10px 16px;
            border-radius:30px;
            backdrop-filter:blur(8px);
        }

        .hero-contact {
            margin: 1.5rem 0;
}

        .hero-contact a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;

            padding: 0.85rem 1.5rem;

            background: var(--secondary);
            color: var(--white);

            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;

            border-radius:8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);

            transition: all 0.25s ease;
}

        .hero-contact a:hover {
            background: var(--hippo);
            transform:translateY(-2px);

}

        .hero-contact a:focus {
            outline: 3px solid rgba(255,255,255,0.6);
            outline-offset: 3px;
}

        /* Sections */

        section{
            padding:100px 0;
        }

        .section-title{
            text-align:center;
            margin-bottom:60px;
        }

        .section-title h2{
            font-size:2.7rem;
            color:var(--primary);
            margin-bottom:15px;
        }

        .section-title p{
            color:var(--grey);
            max-width:700px;
            margin:auto;
        }

        /* Services */

        .services-grid{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:25px;
        }

        .service-card-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .service-card-link:link,
        .service-card-link:visited,
        .service-card-link:hover,
        .service-card-link:active {
            text-decoration: none;
            color: inherit;
        }

        .service-card-link h3 {
            color: var(--white);
            text-decoration: none;
        }

            .service-card{
            height:350px;
            width:350px;
            overflow:hidden;
            display:flex;
            justify-content:center;
            align-items:center;
            position:relative;
            background-size:cover;
            background-position:center;
        }

        .service-card-link{
            display:flex;
            justify-content:center;
            align-items:center;
        }

        /* dark overlay (FIXED) */
        .service-card::before{
            content:"";
            position:absolute;
            inset:0;
            z-index:1;
            background: var(--service-box);
        }

        /* text box */
        .service-card .overlay{
            position:relative;
            z-index:2;
            text-align:center;
            padding:22px;
            max-width:85%;
        }

        /* typography */
        .service-card h3{
            margin-bottom:10px;
            font-size:1.3rem;
            font-weight:700;
            color: var(--border);
        }

        .service-card p{
            font-size:0.95rem;
            opacity:0.9;
            margin:0;
        }

        /* About */

        .about{
            background:var(--accent);
        }

        .about-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:60px;
            align-items:center;
        }

        .about h2{
            font-size:2.5rem;
            margin-bottom:25px;
            color:var(--secondary);
            flex-wrap: wrap;
        }

        .stats{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:20px;
        }

        .stat{
            background:var(--white);
            padding:25px;
            border-radius:14px;
            text-align:center;
            box-shadow:var(--shadow);
        }

        .stat h3{
            font-size:2rem;
            color:var(--alert);
        }

        .stat p{
            font-size:1rem;
            color:var(--secondary);
        }

        .stat-image{
            height:250px;
            overflow:hidden;
            border-radius:14px;
            box-shadow:var(--shadow);
        }

        .stat-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
            transition:transform .4s ease;
        }

        .stat-image:hover img{
            transform:scale(1.05);
        }

        /* Why Choose Us */

        .features{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:25px;
        }

        .feature{
            padding:30px;
            background:var(--white);
            border-left:4px solid var(--accent);
            box-shadow:var(--shadow);
            border-radius:10px;
        }

        /* CTA */

        .cta{
            background:linear-gradient(135deg,var(--secondary),var(--dark));
            color:var(--white);
            text-align:center;
        }

        .cta h2{
            font-size:3rem;
            margin-bottom:20px;
            color: var(--white);
            text-decoration: none;
        }

        .cta p{
            max-width:700px;
            margin:0 auto 30px;
            color: var(--white);
            text-decoration: none;
        }

        .cta .btn,
        .cta .btn:link,
        .cta .btn:visited {
            background: var(--white);
            color: var(--primary);
            text-decoration: none;
        }

        .cta .btn:hover,
        .cta .btn:focus {
            color: var(--primary);
            text-decoration: none;
        }

        /* Footer */

        footer{
            background: var(--primary);
            border-top:2px solid var(--secondary);
            margin-top: 150px;
            color:var(--white);
            text-align:center;
            padding:60px 0 25px;
        }

        footer p{
            opacity:.8;
        }

        .footer-grid{
            display:grid;
            grid-template-columns:320px 1fr 1fr 1fr;
            grid-template-rows:auto auto;
            gap:30px;
        }

        /* Logo spans both rows */
        .footer-logo{
            grid-row:1 / span 2;

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

        .footer-logo img{
            max-width:240px;
            width:100%;
        }

        /* Main columns */
        .footer-col h4{
            margin-bottom:15px;
            color:var(--secondary);
        }

        .footer-col{
            display:flex;
            flex-direction:column;
            gap:8px;
        }

        .footer-col a{
            color:var(--white);
            text-decoration:none;
        }

        .footer-col a:hover{
            text-decoration:underline;
        }

        /* Bottom row */
        .footer-policy{
            padding-top:25px;
        }

        .footer-policy a{
            color:var(--white);
            text-decoration:none;
            font-size:.9rem;
        }

        .footer-policy a:hover{
            text-decoration:underline;
        }

        .footer-bottom{
            margin-top:30px;
            padding-top:20px;
            text-align:center;
            opacity:.8;
            color: var(--secondary);
        }

        /* Mobile */
        @media(max-width:1200px){

        .services-grid{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:25px;
            }

        }

        /* Mobile */
        @media(max-width:900px){

            .footer-grid{
                grid-template-columns:1fr;
                text-align:center;
            }

            .footer-logo{
                grid-row:auto;
            }

            .footer-policy{
                border-top:none;
                padding-top:0;
            }

            .hero h1{
                font-size:2.8rem;
            }

            .about-grid{
                grid-template-columns:1fr;
            }

        .nav-links{
            display:flex;
        }
        }

        /* Background image */
        .carpentry-card{
            background-image:url('../img/Blue Carpentry.png');
        }

        .plumbing-card{
            background-image:url('../img/Blue Leak.png');
        }

        .electrical-card{
            background-image:url('../img/Blue Electrics.png');
        }

        .decorating-card{
            background-image:url('../img/Blue Painting.png');
        }

        .kitbath-card{
            background-image:url('../img/Blue Tap.png');
        }

        .roof-card{
            background-image:url('../img/Blue Roofing.png');
        }

        .land-card{
            background-image:url('../img/Blue Landscaping.png');
        }

        .general-card{
            background-image:url('../img/Blue General.png');
        }

        .tile-card{
            background-image:url('../img/Blue Tiling.png');
        }

        /* Text container (centred overlay box) */
        .service-card .overlay{
            position:relative;
            z-index:2;

            text-align:center;

            padding:25px 20px;
            border-radius:14px;

            max-width:85%;
        }

        /* Typography */
        .service-card h3{
            margin-bottom:10px;
            font-size:1.7rem;
            color:var(--white);
            font-weight:700;
            text-decoration: none;

            text-shadow:
                0 1px 2px rgba(0,0,0,0.8),
                0 0 10px rgba(0,0,0,0.25);
        }

        .service-card p{
            font-size:0.95rem;
            opacity:0.9;
            margin:0;
        }

        .company-story{
            background:var(--white);
        }

        .story-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:60px;
            align-items:center;
        }

        .story-content p{
            margin-bottom:20px;
            font-size:1.05rem;
            color:var(--secondary);
        }

        .mission-section{
            background:var(--secondary);
        }

        .mission-section h2{
            color:var(--white);
        }

        .mission-box{
            max-width:900px;
            margin:auto;
            text-align:left;
            background:var(--white);
            padding:50px;
            border-radius:16px;
            box-shadow:var(--shadow);
        }

        .mission-box p{
            font-size:1.2rem;
            color:var(--secondary);
        }

        .why-section{
            background:var(--white);
        }

        .values-section{
            background:var(--service-box);
        }

        .values-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:25px;
        }

        .value-card{
            background:var(--white);
            padding:30px;
            text-align:center;
            border-radius:14px;
            box-shadow:var(--shadow);
        }

        .value-card h3{
            color:var(--alert);
            margin-bottom:15px;
        }

        .value-card p{
            color:var(--secondary);
        }

            .story-grid{
                grid-template-columns:1fr;
            }

            .values-grid{
                grid-template-columns:1fr;
            }

            .mission-box{
                padding:30px;
            }

        @media(max-width:800px){

            .services-grid{
            display:grid;
            grid-template-columns:repeat(1, 1fr);
            gap:25px;
            justify-items: center;
            }

            .about-grid {
            grid-template-columns: 1fr;
            gap: 30px;
            }

            .stats {
                grid-template-columns: 1fr;
            }

            .about h2 {
                font-size: 2rem;
            }
        }

.cookie-banner{
    position:fixed;
    left:20px;
    right:20px;
    bottom:20px;
    z-index:99999;
    display:none;
    transform:translateY(120%);
    opacity:0;
    transition:.35s ease;
}

.cookie-banner.show{
    display:block;
    transform:translateY(0);
    opacity:1;
}

.cookie-banner-inner{
    max-width:980px;
    margin:0 auto;
    background:var(--white);
    border-left:7px solid var(--alert);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
    padding:22px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:center;
}

.cookie-banner h3{
    margin:0 0 8px;
    color:var(--secondary);
    font-size:22px;
}

.cookie-banner p{
    margin:0;
    color:var(--secondary);
    line-height:1.55;
    font-size:15px;
}

.cookie-banner-links{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.cookie-banner-links a{
    color:var(--secondary);
    font-weight:800;
    text-decoration:none;
}

.cookie-banner-links a:hover{
    color:var(--primary);
}

.cookie-banner-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cookie-accept-btn{
    background:var(--primary);
    color:var(--white);
    border:none;
    padding:13px 22px;
    border-radius:10px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}

.cookie-accept-btn:hover{
    background:var(--secondary);
}

.cookie-essential-btn{
    background:transparent;
    border:none;
    color:var(--secondary);
    font-weight:800;
    cursor:pointer;
    text-decoration:underline;
}

.cookie-essential-btn:hover{
    color:var(--secondary);;
}

@media(max-width:1650px){

    /* ========================= */
/* LEFT LOGO */
/* ========================= */
.nav-logo {
  position: fixed;
  z-index: 1000;
  left: -40px;
  width: 170px;
  height: 170px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white); /* white swirl */

  -webkit-mask: url("../img/swirl.png")
    center / contain no-repeat;
  mask: url("../img/swirl.png")
    center / contain no-repeat;

  filter:
    drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2))
    drop-shadow(0 35px 80px rgba(0, 0, 0, 0.35))
    drop-shadow(0 60px 120px rgba(0, 0, 0, 0.2));
}

.nav-logo img {
  width: 130px;
  margin-left: 7%;
  margin-top: 40%;
}
    .cookie-banner{
        left:12px;
        right:12px;
        bottom:12px;
    }

    .cookie-banner-inner{
        grid-template-columns:1fr;
        padding:18px;
    }

    .cookie-banner-actions{
        width:100%;
    }

    .cookie-accept-btn,
    .cookie-essential-btn{
        width:100%;
        min-height:46px;
    }
}

.footer-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.footer-divider{
    opacity:.35;
}

.manage-cookies-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    color:var(--secondary);
    font-size:.9rem;
    cursor:pointer;
    text-decoration:none;
}

.manage-cookies-btn:hover{
    color:var(--white);
    text-decoration:underline;
}

.result-box {
    margin-top: 25px;
    padding: 20px;
    border-radius: 14px;
    background: #f4f8ff;
    border: 1px solid #d9e6ff;
}

textarea {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

.waste-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.waste-modal-content{

    background:#fff;
    width:100%;
    max-width:700px;
    border-radius:20px;
    padding:35px;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
    animation:popup .25s ease;
    position:relative;

}

@keyframes popup{

from{
opacity:0;
transform:translateY(20px) scale(.95);
}

to{
opacity:1;
transform:none;
}

}

.waste-close{

position:absolute;
right:25px;
top:15px;
font-size:34px;
cursor:pointer;
font-weight:bold;

}

#wasteInput{

width:100%;
padding:18px;
border-radius:12px;
border:1px solid #ddd;
font-size:16px;
resize:vertical;
margin:20px 0;

}

#wasteResult{

margin-top:25px;
padding:20px;
border-radius:12px;
background:var(--border);
border:1px solid #dbe7ff;

}

#wasteResult h3{

margin-top:0;

}

#wasteResult ul{

padding-left:18px;

}

@media(max-width:700px){

.waste-modal-content{

padding:25px;

}

}

.export-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.export-btn:hover {
    background: var(--hippo);
}