:root {
    --primary:#8CC444; --secondary:#4F8200; --accent:#FF6C2F; --dark:#566A36;
    --cream:#F5FAEF; --grey:#8B8B89; --white:#fff;
    /* Shared horizontal gutter — every content container (header, nav, hero,
       tagline, main, franchise) uses the SAME max-width (1200px) + this SAME
       left/right padding, so every block's left edge lines up with the
       logo and every block's right edge lines up with the nav. One variable
       so the mobile override below only has to change it in one place. */
    --gutter: 2rem;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-padding-top: 100px; }
body { font-family:'Inter',sans-serif; line-height:1.75; color:#20241a; background:#fff; font-weight:400; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }

.site-header { background:var(--dark); position:sticky; top:0; z-index:1000; }
.header-container { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2rem; }
.logo { background:#fff; border-radius:.6rem; padding:.35rem .6rem; display:inline-flex; align-items:center; }
.logo-img { height:38px; max-width:150px; width:auto; object-fit:contain; }
.mobile-call-button { display:none; }
.mobile-menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; }
.hamburger-line { width:24px; height:2px; background:#fff; }
.nav-list { display:flex; gap:1.75rem; }
.nav-link { color:#e7ebe0; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.82rem; }
.nav-link:hover { color:var(--accent); }
.phone-link { border:1px solid #F5FAEF; padding:.45rem 1rem; border-radius:2px; color:#F5FAEF !important; }
.phone-link:hover { background:#F5FAEF; color:var(--dark) !important; }

.breadcrumb-nav { max-width:1200px; margin:0 auto; padding:1rem 2rem; font-size:.82rem; }
.breadcrumb-list { display:flex; gap:.4rem; flex-wrap:wrap; color:var(--grey); }
.breadcrumb-link { color:var(--dark); }

.service-navigation { border-bottom:2px solid var(--dark); padding:1rem 0; }
.service-nav-container { max-width:1200px; margin:0 auto; padding:0 2rem; position:relative; }
.service-nav-title { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color:var(--grey); margin-bottom:.6rem; }
.service-nav-toggle { display:none; }
.service-nav-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.service-pill { border:1px solid var(--dark); color:var(--dark); padding:.35rem .7rem; font-size:.76rem; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.service-pill:hover { background:var(--dark); color:#fff; }
.service-pill-current { background:var(--dark); border-color:var(--dark); color:#fff; }

.hero-section { min-height:46vh; background-size:cover; background-position:center; display:flex; align-items:center; padding:4rem 0; }
.hero-content { max-width:1200px; margin:0 auto; width:100%; padding:0 var(--gutter); }
.hero-kicker { color:var(--primary); text-transform:uppercase; letter-spacing:.18em; font-size:1rem; font-weight:700; margin-bottom:1rem; }
.hero-content h1 { color:#fff; font-weight:800; font-size:clamp(1.9rem, 3.6vw, 3.4rem); line-height:1.08; max-width:16ch; text-wrap:pretty; }

.tagline-section { max-width:1200px; margin:5rem auto; padding:0 var(--gutter); text-align:left; }
.tagline-quote { border-left:6px solid var(--dark); padding-left:2rem; }
.tagline-title { font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; color:var(--dark); text-wrap:pretty; }
.tagline-description { font-size:1.3rem; margin-top:1rem; font-style:italic; text-wrap:pretty; }
.tagline-text { margin-top:1rem; color:var(--grey); text-wrap:pretty; }
.tagline-cta, .cta-button, .service-cta, .franchise-cta { display:inline-block; margin-top:2rem; padding:1rem 2.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; }
.tagline-cta { background:var(--accent); color:#fff; border:2px solid var(--accent); }
.tagline-cta:hover { background:#20241a; border-color:#20241a; }
.cta-button, .service-cta { background:transparent; color:var(--dark); border:2px solid var(--dark); }
.cta-button:hover, .service-cta:hover { background:var(--dark); color:var(--cream); }
.franchise-cta { background:var(--accent); color:#fff; border:2px solid var(--accent); }
.franchise-cta:hover { background:#20241a; border-color:#20241a; }

/* .main-content carries a permanent light-gray edge — the same #eee used by
   .services-overview's matting below — so both page types (a text-flow
   service page and a card-grid landing page) show the identical gray
   "frame" down the sides of the content column. Painted with box-shadow
   (not border) so it's pure decoration overlapping the inner edge of the
   padding: it adds zero box-model width, so the text column itself still
   starts and ends at the exact same pixel as the header/nav padding edge
   (no alignment drift). On the landing page it's mostly hidden behind the
   full-bleed grid (see the negative-margin note on .services-overview)
   except as matting between/around the cards; on the service page, with no
   grid to cover it, it's the visible thin gray line either side of the copy. */
.main-content { max-width:1200px; margin:0 auto; padding:0 var(--gutter) 4rem; box-shadow: inset 6px 0 0 #eee, inset -6px 0 0 #eee; }
.main-content h2 { font-size:clamp(1.6rem,3vw,2.3rem); margin:3rem 0 1rem; border-top:3px solid var(--dark); padding-top:1rem; font-weight:800; color:var(--dark); text-wrap:pretty; }
.main-content h2:first-child { margin-top:0; border-top:none; padding-top:0; }
.main-content p { margin-bottom:1.1rem; font-size:1.05rem; text-wrap:pretty; }
.main-content ul { margin:1.5rem 0; }
.main-content ul li { padding:.6rem 0; border-bottom:1px solid #eee; font-weight:600; }
.cta-button-container { margin:2rem 0; }

/* Randomized image-pool figures (hero excluded — that's the background
   hero image). Same left/right edges as the body-text column: no extra
   horizontal margin/padding beyond .main-content's own, so the figure's
   rounded box lines up exactly with the paragraph text either side of it. */
.content-figure { margin:2.75rem 0; }
.content-figure img {
    width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    border-radius:12px; box-shadow:0 10px 30px rgba(20,24,15,.18);
}

/* Nested inside .main-content (see render()), so it would otherwise double
   up .main-content's own left/right padding. The negative margin cancels
   exactly that padding, bringing this element's own edge back out to
   .main-content's padding-box edge (inside its gray border) — then its own
   padding reinstates the SAME gutter for the cards, landing them on the
   identical aligned edge as ordinary main-content text. Its own
   background:#eee, revealed in that reinstated padding and in the 2px grid
   gaps, is the light-gray matting/frame effect. */
.services-overview { margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) 4rem; display:grid; gap:2px; background:#eee; }

/* Landing pages nest .services-overview as the last thing inside
   .main-content, so .main-content's own 4rem bottom padding (white) sat
   BELOW .services-overview's 4rem bottom padding (gray), producing a
   messy gray-band-then-white-sliver stack before the dark footer. When
   .services-overview is the last child, drop .main-content's bottom
   padding entirely (kills the white sliver) and trim
   .services-overview's own bottom padding so the gray matting reads as
   one clean band running straight into the footer, not an oversized
   trailing gap. Service pages have no .services-overview, so both
   selectors are no-ops there — untouched. */
.main-content:has(> .services-overview:last-child) { padding-bottom:0; }
.main-content > .services-overview:last-child { padding-bottom:2.5rem; }
.service-overview { background:#fff; padding:2.5rem; }
.service-overview img.service-card-img { aspect-ratio:21/9; object-fit:cover; margin-bottom:1.25rem; }
.service-overview h2 { font-size:1.8rem; border-top:3px solid var(--dark); padding-top:.75rem; margin-bottom:1rem; color:var(--dark); font-weight:800; }

.franchise-section { background:var(--dark); color:#fff; padding:5rem 0; }
.franchise-container { max-width:1200px; margin:0 auto; padding:0 var(--gutter); }
.franchise-container h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:1.25rem; font-weight:800; }
.franchise-benefits { display:grid; gap:.5rem; margin:1.5rem 0; }
.benefit-item { border-left:3px solid var(--primary); padding-left:1rem; }

.main-footer { background:#101208; color:#c7cdbc; padding:4rem 2rem 1.5rem; }
.footer-container { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; }
.footer-section h5 { color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; margin-bottom:1rem; }
.footer-section a:hover { color:var(--accent); }
.bottom-footer { max-width:1200px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid #2a2e21; font-size:.78rem; }
.footer-link { color:#c7cdbc; }

.suburbs-section { background:#101208; color:#8f9686; text-align:center; padding:1.25rem; font-size:.8rem; }
.city-link, .suburb-link { color:#c7cdbc; }
.city-link:hover, .suburb-link:hover { color:var(--accent); }

@media (max-width: 900px) {
    .header-container { padding:.75rem 1rem; gap:.6rem; }
    .logo { flex-shrink:0; }
    .breadcrumb-nav { display:none; }
    .logo-img { height:30px; max-width:120px; width:auto; object-fit:contain; }
    .main-nav { position:fixed; top:58px; left:0; right:0; background:var(--dark); flex-direction:column; padding:1.25rem; transform:translateY(-140%); transition:transform .25s; }
    .main-nav.active { transform:translateY(0); }
    .nav-list { flex-direction:column; align-items:flex-start; gap:1.25rem; }
    .mobile-call-button { display:block; flex:1; min-width:0; text-align:center; }
    .mobile-call-link { display:inline-block; color:#F5FAEF; font-weight:700; white-space:nowrap; }
    .mobile-menu-toggle { display:flex; flex-shrink:0; }
    .mobile-menu-toggle .hamburger-line { background:#fff; }
}

@media (max-width: 700px) {
    /* One variable drives every content container's gutter (see :root) —
       flipping it here re-scales hero/tagline/main/franchise/services-overview
       together without re-declaring each selector. */
    :root { --gutter: 1rem; }
}

/* Service-nav responsive collapse: single "Quick Navigation" button on
   mobile + tablet (up to 1199px), full pill row from 1200px (desktop) up.
   The <a href> links stay in the DOM at every width — only CSS visibility
   changes — so the invariant checker still sees every target. */
@media (max-width: 1199px) {
    .service-nav-title { display:none; }
    .service-nav-toggle {
        display:flex; align-items:center; gap:.5rem;
        width:100%; text-align:left; background:none; border:1px solid var(--dark);
        color:var(--dark); padding:.7rem 1rem; font-size:.85rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
    }
    .service-nav-toggle::after { content:'\25BC'; margin-left:auto; font-size:.65rem; }
    .service-nav-toggle-open::after { content:'\25B2'; }
    .service-nav-pills {
        display:none; flex-direction:column; gap:0; margin-top:.5rem;
        border:1px solid var(--dark); border-top:0;
    }
    .service-nav-pills.service-nav-pills-open { display:flex; }
    .service-nav-pills .service-pill {
        border:0; border-bottom:1px solid #e2e2e2; padding:.85rem 1rem;
        white-space:normal;
    }
    .service-nav-pills .service-pill:last-child { border-bottom:0; }
}
@media (min-width: 1200px) {
    .service-nav-toggle { display:none; }
    .service-nav-pills { display:flex !important; }
}

/* contact-us page only. No new invariant-relevant markup — just spacing
   for the intro block + the GHL form-embed-wrapper it sits above (that
   wrapper carries its own inline max-width/padding style from the source,
   left untouched). */
.contact-intro { text-align:center; border-left:none; padding-left:0; }
.contact-intro h2 { font-size:clamp(1.6rem,3vw,2.3rem); color:var(--dark); font-weight:800; margin-bottom:.75rem; }
.contact-form-content { box-shadow:none; padding-top:1rem; }

/* sitemap.html / *-sitemap.html only. The tree markup itself (.sitemap-
   section/.sitemap-tree/.tree-node/.tree-label/.tree-children) is the
   original verbatim HTML relocated into the themed shell (see
   theme3.render_sitemap) — nothing here changes tags or classes, only
   restyles the existing ones olive/Inter to match the rest of the theme. */
.sitemap-intro { font-size:1.15rem; color:var(--grey); margin-bottom:3rem; max-width:60ch; text-wrap:pretty; }
.sitemap-page-content { box-shadow:none; }
.sitemap-sections { display:grid; gap:3rem; }
.sitemap-section { border-top:3px solid var(--dark); padding-top:1.5rem; }
.sitemap-section h2 {
    font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800; color:var(--dark);
    margin-bottom:1.25rem; text-wrap:pretty;
}
.sitemap-tree { list-style:none; padding-left:0; }
.sitemap-tree li { margin:.35rem 0; }
.sitemap-tree .tree-children {
    list-style:none; padding-left:1.4rem; margin-top:.5rem;
    border-left:1px solid #e2e2e2;
}
.sitemap-tree a, .sitemap-tree .tree-label {
    display:inline-block; color:var(--dark); text-decoration:none;
    padding:.3rem .6rem; border-radius:4px; font-size:.95rem;
}
.tree-node > .tree-label { font-weight:700; }
.tree-node > span.tree-label { color:var(--grey); cursor:default; }
.sitemap-tree a:hover, .tree-node > a.tree-label:hover {
    background:var(--cream); color:var(--secondary);
}

@media (max-width: 700px) {
    .sitemap-tree .tree-children { padding-left:1rem; }
    .sitemap-tree a, .sitemap-tree .tree-label { font-size:.88rem; padding:.25rem .4rem; }
}