/* Waste4Space final design system. Loaded last on every public page. */
:root {
    --green: #0b4a2f;
    --green2: #12613f;
    --orange: #64d52f;
    --orange2: #398e1d;
    --cream: #f7f9f6;
    --pale: #edf5ec;
    --text: #17251c;
    --muted: #58665d;
    --line: #d6e1d8;
    --white: #fff;
    --max: 1180px;
    --shadow: 0 14px 40px rgba(9, 55, 32, .10);
    --radius: 14px
}

* {
    box-sizing: border-box
}

html body,
html body * {
    font-family: Arial, Helvetica, sans-serif
}

html {
    scroll-padding-top: 105px
}

body,
.modern-services-page {
    margin: 0;
    overflow-x: hidden;
    background: #fff;
    color: var(--text);
    font: 400 16px/1.62 Arial, Helvetica, sans-serif
}

h1,
h2,
h3,
.modern-services-page h1,
.modern-services-page h2,
.modern-services-page h3,
.modern-services-page .service-route strong {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--green);
    letter-spacing: -.025em
}

h1 {
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.04
}

h2 {
    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1.1
}

h3 {
    line-height: 1.25
}

p {
    color: var(--muted)
}

.container {
    width: min(var(--max), calc(100% - 48px))
}

.container.narrow {
    width: min(850px, calc(100% - 48px))
}

.section {
    padding: 72px 0
}

.kicker,
.modern-services-page .finder-result-heading span,
.modern-services-page .secondary-service-grid span,
.modern-services-page .garden-offer-grid article>span {
    color: var(--orange2)
}

.kicker.light {
    color: #b8f19d
}

/* Every action looks and behaves like an action. */
.btn,
.button,
.text-link,
.project-meta b,
.modern-services-page .service-route>b,
.modern-services-page .waste-type-card b,
.modern-services-page .secondary-service-grid b {
    display: inline-flex;
    width: fit-content;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 2px solid var(--orange);
    border-radius: 9px;
    background: var(--orange);
    color: #102817;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .18s
}

.btn:hover,
.button:hover,
.text-link:hover {
    border-color: #55bd27;
    background: #55bd27;
    transform: translateY(-1px)
}

.btn-outline {
    border-color: var(--green);
    background: #fff;
    color: var(--green)
}

.btn-outline:hover {
    border-color: var(--green);
    background: var(--green);
    color: #fff
}

.btn-white {
    border-color: #fff;
    background: #fff;
    color: var(--green)
}

/* Header and navigation */
.topbar {
    background: #073b26;
    color: #e9f4ec
}

.topbar .container {
    min-height: 38px
}

.header {
    position: relative;
    z-index: 40;
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 5px 18px rgba(9, 55, 32, .05)
}

.header-inner {
    height: 80px
}

.brand-slot,
.brand-slot img {
    width: 210px;
    height: 52px;
    object-fit: contain
}

.nav {
    align-self: stretch
}

.nav-direct,
.nav-group summary {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 !important;
    color: #2f3c34;
    font-size: 14px;
    font-weight: 750;
    line-height: 1
}

.nav-group summary {
    gap: 7px
}

.nav-group summary span {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    transform-origin: center
}

.nav-group.active summary:after {
    bottom: 0;
    height: 3px;
    background: var(--orange)
}

.nav-dropdown {
    top: calc(100% - 1px);
    right: 0;
    left: auto;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(7, 44, 26, .15);
    transform: none
}

.nav-dropdown a {
    min-height: 64px;
    border: 1px solid transparent !important;
    border-radius: 9px
}

.nav-dropdown a:hover {
    border-color: #d9e6dc !important;
    background: #f1f7ef
}

.nav-dropdown i {
    border-radius: 8px;
    background: #dff0d8
}

.btn-header {
    min-height: 46px;
    background: var(--orange);
    border-color: var(--orange)
}

/* Shared page bands */
.home-hero {
    padding: 62px 0;
    background: linear-gradient(120deg, #f7f9f5, #edf5e9)
}

.hero-grid {
    gap: 56px
}

.hero-copy>p {
    font-size: 18px
}

.hero-photo>img {
    height: 470px;
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.page-banner,
.contact-hero,
.testimonials-page-hero,
.service-detail-hero,
.modern-services-page .services-hero,
.modern-services-page .gardening-hero {
    padding: 64px 0;
    border: 0;
    background: var(--green);
    color: #fff
}

.page-banner h1,
.contact-hero h1,
.testimonials-page-hero h1,
.service-detail-hero h1,
.modern-services-page .services-hero h1,
.modern-services-page .gardening-hero h1 {
    color: #fff;
    font-size: clamp(42px, 5vw, 66px)
}

.page-banner p,
.contact-hero p,
.testimonials-page-hero p,
.service-detail-hero p,
.modern-services-page .services-hero p,
.modern-services-page .gardening-hero p {
    color: #e1eee5
}

.page-banner .narrow {
    padding-left: 0;
    border: 0
}

.breadcrumbs,
.breadcrumbs a,
.service-detail-hero .breadcrumbs {
    color: #bcd3c4
}

/* Service detail contrast */
.service-detail-grid {
    gap: 52px
}

.service-detail-hero .kicker {
    color: #9ee77c
}

.service-detail-hero .btn {
    margin-top: 14px
}

.service-summary {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    box-shadow: none
}

.service-summary h2,
.service-summary h3 {
    margin-bottom: 16px;
    color: #fff;
    font-size: 24px
}

.service-summary p,
.service-summary span {
    color: #e3eee6
}

.service-summary span {
    border-color: rgba(255, 255, 255, .22)
}

.service-summary span:before {
    color: #8ce662
}

.service-summary .text-link {
    margin-top: 6px;
    border-color: #fff;
    background: #fff;
    color: var(--green)
}

.service-body .container {
    gap: 56px
}

.included-list li {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--pale)
}

.service-note {
    border: 1px solid var(--line);
    border-left: 4px solid var(--orange);
    border-radius: 10px;
    background: #f7faf6
}

/* Cards and content */
.quote-finder,
.review-badge,
.service-cards>a,
.work-grid a,
.category-service-grid>a,
.project-card,
.facebook-testimonial,
.carousel-frame,
.capacity-grid article,
.pricing-callout,
.quote-form,
.quote-sidebar>div {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: #fff;
    box-shadow: 0 8px 28px rgba(9, 55, 32, .07) !important
}

.quote-finder {
    padding: 18px
}

.service-cards>a:hover,
.work-grid a:hover,
.category-service-grid>a:hover,
.project-card:hover {
    transform: translateY(-3px);
    border-color: #a7c3ad !important;
    box-shadow: var(--shadow) !important
}

.why,
.quote-section {
    background: #f1f6ef
}

.split {
    gap: 58px
}

.photo-stack img {
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.photo-stack>span {
    border-radius: 9px
}

.coverage {
    padding: 64px 0;
    background: var(--green)
}

.coverage h2 {
    color: #fff
}

.coverage p {
    color: #dce9df
}

.cta,
.scope-section {
    background: var(--orange)
}

.faq-grid details {
    padding: 18px 0
}

.proof-strip .container>div {
    padding: 22px
}

.category-nav a {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff
}

.project-meta {
    padding: 24px
}

.project-meta b {
    margin-top: 14px
}

.card-comparison {
    border-radius: var(--radius) var(--radius) 0 0
}

.comparison {
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.comparison-line span,
.card-comparison .comparison-line span {
    background: var(--orange)
}

.job-hero {
    padding-top: 52px;
    padding-bottom: 56px;
    background: var(--pale)
}

.stage-list {
    padding-top: 64px;
    padding-bottom: 32px
}

.stage-block {
    margin-bottom: 58px
}

/* Quote form */
.quote-layout {
    gap: 34px
}

.quote-form {
    padding: 34px
}

.quote-form fieldset {
    padding-top: 26px;
    margin-top: 25px
}

.quote-form legend {
    font-size: 19px
}

.quote-form input:not([type=checkbox]),
.quote-form select,
.quote-form textarea {
    border: 1px solid #b9c8bc;
    border-radius: 8px
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    outline: 3px solid rgba(100, 213, 47, .22);
    border-color: var(--green)
}

.upload-box {
    border-radius: 10px;
    background: var(--pale)
}

.quote-sidebar {
    top: 98px;
    gap: 14px !important
}

.quote-sidebar>div {
    padding: 24px !important
}

.quote-sidebar .quote-guide {
    border: 0 !important;
    background: var(--green) !important
}

.quote-sidebar .quote-guide h2,
.quote-sidebar .quote-guide li>b {
    color: #fff !important
}

.quote-sidebar .quote-guide li>span {
    color: #dce9df !important
}

.quote-sidebar .estimate-note {
    background: #e8f5e3 !important
}

.quote-sidebar .direct-contact a {
    width: 100%;
    min-height: 42px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px
}

.capacity-grid article {
    padding: 28px
}

.pricing-callout {
    padding: 32px
}

.compliance-list article {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f4f8f3;
    margin-bottom: 10px
}

/* Neutralise the separate services theme. */
.modern-services-page {
    --s-ink: var(--text);
    --s-green: var(--green);
    --s-lime: var(--orange);
    --s-orange: var(--orange2);
    --s-paper: #f7f9f6;
    --s-muted: var(--muted);
    --s-line: var(--line);
    --s-shadow: var(--shadow)
}

.modern-services-page .services-hero-grid {
    gap: 56px
}

.modern-services-page .services-hero h1 {
    margin-bottom: 22px;
    line-height: 1.04
}

.modern-services-page .services-hero aside {
    padding: 26px;
    border-radius: var(--radius)
}

.modern-services-page .services-hero aside:before {
    margin-bottom: 20px
}

.modern-services-page .service-finder,
.modern-services-page .services-secondary,
.modern-services-page .garden-service-list,
.modern-services-page .garden-proof,
.modern-services-page .service-process,
.modern-services-page .garden-combination {
    padding: 72px 0
}

.modern-services-page .finder-heading {
    margin-bottom: 34px
}

.modern-services-page .finder-heading h2,
.modern-services-page .services-secondary h2,
.modern-services-page .garden-proof h2,
.modern-services-page .garden-combination h2 {
    font-size: clamp(30px, 3.5vw, 46px)
}

.modern-services-page .service-route-grid,
.modern-services-page .waste-type-grid {
    gap: 18px
}

.modern-services-page .service-route {
    min-height: 270px;
    padding: 28px;
    border-radius: var(--radius) !important
}

.modern-services-page .service-route strong {
    font-size: 31px
}

.modern-services-page .service-route>b,
.modern-services-page .waste-type-card b {
    margin-top: 14px;
    background: #fff;
    border-color: #fff;
    color: var(--green)
}

.modern-services-page .waste-options {
    padding-top: 64px
}

.modern-services-page .waste-type-card {
    min-height: 360px;
    padding: 28px;
    border-radius: var(--radius) !important
}

.modern-services-page .waste-type-card h3 {
    font-size: 32px
}

.modern-services-page .section-heading {
    margin-bottom: 34px
}

.modern-services-page .secondary-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.modern-services-page .secondary-service-grid a {
    min-height: 235px;
    padding: 26px;
    border-radius: var(--radius) !important
}

.modern-services-page .secondary-service-grid b {
    margin-top: auto;
    background: transparent;
    border-color: var(--green);
    color: var(--green)
}

.modern-services-page .secondary-service-grid a:nth-child(1) b,
.modern-services-page .secondary-service-grid a:nth-child(4) b {
    border-color: #fff;
    color: #fff
}

.modern-services-page .service-process h2,
.modern-services-page .garden-combination h2 {
    color: #fff
}

.modern-services-page .service-process p,
.modern-services-page .garden-combination p {
    color: #dce9df
}

.modern-services-page .service-process .container {
    gap: 48px
}

.modern-services-page .service-process li {
    min-height: 170px;
    padding: 23px;
    border-radius: 12px
}

.modern-services-page .gardening-hero-grid {
    gap: 56px
}

.modern-services-page .gardening-hero img {
    height: 470px;
    border-radius: var(--radius)
}

.modern-services-page .garden-offer-grid {
    gap: 18px
}

.modern-services-page .garden-offer-grid article {
    min-height: 350px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(9, 55, 32, .07)
}

.modern-services-page .garden-offer-grid article:nth-child(2) {
    transform: none
}

.modern-services-page .garden-combination .container {
    gap: 56px
}

.modern-services-page .garden-proof img {
    height: 440px;
    border-radius: var(--radius)
}

.testimonial-feature {
    padding: 72px 0
}

/* Footer */
.footer {
    padding-top: 58px;
    background: #fff;
    color: #26362c
}

.footer h2 {
    color: #000
}

.footer p {
    color: #58665d
}

.footer a,
.footer a:visited,
.footer a:hover,
.footer a:focus,
.footer a:active {
    color: #26362c
}

.footer-main {
    gap: 42px
}

.footer-assurance {
    border-radius: 12px
}

.footer-contact a {
    border: 1px solid var(--line);
    border-radius: 8px
}

.footer-licence {
    color: #26362c !important
}

.mobile-quote {
    background: var(--orange);
    color: #102817
}

@media(max-width:960px) {

    .section,
    .modern-services-page .service-finder,
    .modern-services-page .services-secondary,
    .modern-services-page .garden-service-list,
    .modern-services-page .garden-proof,
    .modern-services-page .service-process,
    .modern-services-page .garden-combination {
        padding: 60px 0
    }

    .hero-grid,
    .split,
    .service-detail-grid {
        gap: 40px
    }

    .nav {
        align-self: auto
    }

    .nav-direct,
    .nav-group summary {
        height: auto;
        padding: 14px 12px !important
    }

    .nav-group summary span {
        margin-left: auto
    }

    .modern-services-page .secondary-service-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:720px) {

    body,
    .modern-services-page {
        font-size: 16px
    }

    .container,
    .container.narrow {
        width: calc(100% - 30px)
    }

    .section,
    .modern-services-page .service-finder,
    .modern-services-page .services-secondary,
    .modern-services-page .garden-service-list,
    .modern-services-page .garden-proof,
    .modern-services-page .service-process,
    .modern-services-page .garden-combination {
        padding: 48px 0
    }

    h1,
    .page-banner h1,
    .contact-hero h1,
    .testimonials-page-hero h1,
    .service-detail-hero h1,
    .modern-services-page .services-hero h1,
    .modern-services-page .gardening-hero h1 {
        font-size: clamp(38px, 11vw, 48px)
    }

    h2 {
        font-size: 31px
    }

    .topbar .container {
        min-height: 36px
    }

    .header-inner {
        height: 68px
    }

    .brand-slot,
    .brand-slot img {
        width: 172px;
        height: 43px
    }

    .home-hero,
    .page-banner,
    .contact-hero,
    .testimonials-page-hero,
    .service-detail-hero,
    .modern-services-page .services-hero,
    .modern-services-page .gardening-hero {
        padding: 48px 0
    }

    .hero-photo>img {
        height: 340px
    }

    .service-summary {
        padding: 22px
    }

    .quote-form {
        padding: 24px 18px
    }

    .quote-form fieldset {
        padding-top: 22px
    }

    .stage-list {
        padding-top: 48px
    }

    .stage-block {
        margin-bottom: 44px
    }

    .modern-services-page .service-route,
    .modern-services-page .waste-type-card {
        min-height: 300px;
        padding: 23px
    }

    .modern-services-page .secondary-service-grid {
        grid-template-columns: 1fr
    }

    .modern-services-page .secondary-service-grid a {
        min-height: 200px
    }

    .modern-services-page .service-process li {
        min-height: 145px
    }

    .modern-services-page .gardening-hero img,
    .modern-services-page .garden-proof img {
        height: 320px
    }

    .footer {
        padding-top: 46px
    }
}

@media(max-width:960px) {
    .testimonial-feature {
        padding: 60px 0
    }
}

@media(max-width:720px) {
    .testimonial-feature {
        padding: 48px 0
    }
}