/* ==========================================================================
   MR PEST KILLER — DESIGN SYSTEM
   ==========================================================================
   This file is the single source of truth for all design decisions.
   Load order: bootstrap.min.css → custom.min.css → design-system.css → style.css

   INDEX
   --------------------------------------------------------------------------
   01. Extended Design Tokens
   02. Typography System
   03. Section Layout System
   04. Button Components
   05. Icon Box Component
   06. Section Title Component
   07. Card / Box Components
   08. Page Banner (Inner Page Hero)
   09. Breadcrumb Component
   10. Form System
   11. Info Card Component
   12. Badge / Tag Component
   13. Divider Component
   14. Utility Classes
   15. Animation Helpers
   16. Responsive Overrides
   ========================================================================== */


/* ==========================================================================
   01. EXTENDED DESIGN TOKENS
   ========================================================================== */

:root {

    /* ---- Brand Colours (canonical) ---- */
    --color-primary          : #151512;   /* Dark — CTA, headings, dark bg */
    --color-accent           : #f2ea68;   /* Yellow-gold — buttons, highlights */
    --color-white            : #FFFFFF;
    --color-bg               : #F5F5F5;   /* Light grey page bg */
    --color-surface          : #FFFFFF;   /* Card / section surface */
    --color-text             : #484C44;   /* Body copy */
    --color-text-muted       : #5F635A;   /* Captions, meta — WCAG AA on white (6.6:1) */
    --color-text-light       : #FFFFFF;   /* Text on dark bg */
    --color-error            : #E65757;
    --color-success          : #2ECC71;

    /* Dividers */
    --color-divider          : rgba(0, 0, 0, 0.10);
    --color-divider-dark     : rgba(255, 255, 255, 0.10);

    /* Legacy aliases — keeps custom.min.css working */
    --primary-color          : #151512;
    --secondary-color        : #FFFFFF;
    --bg-color               : #F5F5F5;
    --text-color             : #484C44;
    --accent-color           : #f2ea68;
    --white-color            : #FFFFFF;
    --divider-color          : rgba(0, 0, 0, 0.10);
    --dark-divider-color     : rgba(255, 255, 255, 0.10);
    --error-color            : rgb(230, 87, 87);
    --default-font           : "Inter Tight", sans-serif;

    /* ---- Spacing Scale (8 px base grid) ---- */
    --space-1   :   4px;
    --space-2   :   8px;
    --space-3   :  12px;
    --space-4   :  16px;
    --space-5   :  20px;
    --space-6   :  24px;
    --space-7   :  30px;   /* card gap standard */
    --space-8   :  40px;   /* section-title bottom margin */
    --space-9   :  50px;
    --space-10  :  60px;
    --space-11  :  80px;   /* section-row bottom margin */
    --space-12  : 100px;   /* section vertical padding */
    --space-13  : 120px;
    --space-14  : 150px;
    --space-15  : 200px;

    /* Semantic spacing aliases */
    --gap-xs       : var(--space-2);   /*  8px */
    --gap-sm       : var(--space-3);   /* 12px */
    --gap-md       : var(--space-5);   /* 20px */
    --gap-lg       : var(--space-7);   /* 30px */
    --gap-xl       : var(--space-8);   /* 40px */
    --gap-2xl      : var(--space-10);  /* 60px */

    --section-pad  : var(--space-12);  /* 100px — standard section padding */
    --section-row-gap : var(--space-11); /* 80px — section-row margin-bottom */

    /* ---- Typography Scale ---- */
    --font-family    : "Inter Tight", sans-serif;

    --text-xs    :  12px;
    --text-sm    :  14px;
    --text-base  :  16px;
    --text-md    :  18px;
    --text-lg    :  20px;
    --text-xl    :  24px;
    --text-2xl   :  32px;
    --text-3xl   :  40px;
    --text-4xl   :  48px;
    --text-5xl   :  60px;
    --text-hero  :  66px;

    --weight-regular    : 400;
    --weight-medium     : 500;
    --weight-semibold   : 600;
    --weight-bold       : 700;

    --lh-tight    : 1.1em;
    --lh-snug     : 1.3em;
    --lh-base     : 1.6em;
    --lh-relaxed  : 1.8em;

    /* ---- Border Radius Scale ---- */
    --radius-xs     :  4px;
    --radius-sm     :  6px;
    --radius-md     : 10px;
    --radius-lg     : 20px;
    --radius-xl     : 30px;
    --radius-pill   : 100px;
    --radius-circle : 50%;

    /* ---- Shadow Scale ---- */
    --shadow-xs  : 0 1px  4px rgba(3, 63, 45, 0.06);
    --shadow-sm  : 0 2px  8px rgba(3, 63, 45, 0.08);
    --shadow-md  : 0 4px 20px rgba(3, 63, 45, 0.10);
    --shadow-lg  : 0 8px 40px rgba(3, 63, 45, 0.14);
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.06);
    --shadow-btn : 0 4px 16px rgba(242, 234, 104, 0.40);

    /* ---- Transitions ---- */
    --transition-fast   : color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    --transition-base   : color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    --transition-slow   : color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    --transition-slower : color 0.6s ease-in-out, background-color 0.6s ease-in-out, border-color 0.6s ease-in-out, opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    --transition-anim   : color 0.8s ease-in-out, background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, opacity 0.8s ease-in-out, transform 0.8s ease-in-out;

    /* ---- Z-index Scale ---- */
    --z-base       :   1;
    --z-raised     :   2;
    --z-dropdown   :  10;
    --z-sticky     :  50;
    --z-overlay    : 100;
    --z-modal      : 200;
    --z-preloader  : 1000;

    /* ---- Component Sizing ---- */
    --icon-box-sm  : 40px;
    --icon-box-md  : 50px;
    --icon-box-lg  : 60px;
    --icon-box-xl  : 80px;

    --container-max : 1500px;
    --navbar-height : 88px;   /* approx sticky header height */
}

/* ==========================================================================
   01b. SCROLL PERFORMANCE
   ========================================================================== */

/* Skip layout/paint for off-screen sections */
.hero-cta-section-gold,
.about-us-gold,
.our-services-gold,
.why-choose-us-gold,
.our-expert-team-gold,
.our-features-gold,
.how-it-work-gold,
.our-testimonials-gold,
.our-team-gold,
.our-faqs,
.our-blog-posts,
.trust-badges,
.main-footer-gold {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Kill all decorative infinite animations — static is fine */
.our-services-gold::before,
.our-services-gold::after,
.how-it-work-gold::before,
.how-it-work-gold::after,
.our-faqs.bg-section::before,
.our-faqs.bg-section::after,
.main-footer-gold::before,
.main-footer-gold::after {
    animation: none;
}

/* Prevent scroll chaining / rubber-band jank */
html {
    overscroll-behavior: none;
}

/* ==========================================================================
   02. TYPOGRAPHY SYSTEM
   ========================================================================== */

/*
   Heading Scale Reference
   -----------------------
   h1  (page hero)    : var(--text-hero)  66px / fw 600 / lh tight
   h2  (section)      : var(--text-4xl)   48px / fw 600 / lh tight
   h2  (card title)   : var(--text-lg)    20px / fw 600
   h3  (sub-heading)  : var(--text-lg)    20px / fw 600
   h4  (label)        : var(--text-base)  16px / fw 600
   p   (body)         : var(--text-base)  16px / fw 400 / lh 1.6
   p   (small)        : var(--text-sm)    14px
   span (sub-title)   : var(--text-sm)    14px / fw 600 / pill badge
*/

.text-xs      { font-size: var(--text-xs);   }
.text-sm      { font-size: var(--text-sm);   }
.text-base    { font-size: var(--text-base); }
.text-md      { font-size: var(--text-md);   }
.text-lg      { font-size: var(--text-lg);   }
.text-xl      { font-size: var(--text-xl);   }
.text-2xl     { font-size: var(--text-2xl);  }
.text-3xl     { font-size: var(--text-3xl);  }
.text-4xl     { font-size: var(--text-4xl);  }
.text-hero    { font-size: var(--text-hero); }

.fw-regular   { font-weight: var(--weight-regular);  }
.fw-medium    { font-weight: var(--weight-medium);   }
.fw-semibold  { font-weight: var(--weight-semibold); }
.fw-bold      { font-weight: var(--weight-bold);     }

.lh-tight     { line-height: var(--lh-tight);   }
.lh-snug      { line-height: var(--lh-snug);    }
.lh-base      { line-height: var(--lh-base);    }
.lh-relaxed   { line-height: var(--lh-relaxed); }

.text-primary  { color: var(--color-primary) !important; }
.text-accent   { color: var(--color-accent)  !important; }
.text-muted    { color: var(--color-text-muted) !important; }
.text-white    { color: var(--color-white)   !important; }
.text-body     { color: var(--color-text)    !important; }

.text-capitalize { text-transform: capitalize; }
.text-upper      { text-transform: uppercase; }
.text-under      { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   03. SECTION LAYOUT SYSTEM
   ========================================================================== */

/*
   Standard section anatomy:
   ┌─────────────────────────────────────────────────────────┐
   │  .your-section-name  (padding: 100px 0)                 │
   │  └── .container                                         │
   │       └── .row.section-row  (mb: 80px — title row)      │
   │            └── .col-lg-12                               │
   │                 └── .section-title                      │
   │                      ├── .section-sub-title (pill)      │
   │                      └── h2                             │
   │       └── .row  (content rows)                          │
   └─────────────────────────────────────────────────────────┘

   Dark variant: add class  dark-section
   White card variant: add class  bg-section
*/

.section-pad        { padding: var(--section-pad) 0; }
.section-pad-sm     { padding: 60px 0; }
.section-pad-lg     { padding: 120px 0; }

/* Use on .row that contains only the .section-title */
.section-row        { margin-bottom: var(--section-row-gap); }
.section-row-sm     { margin-bottom: 40px; }
.section-row-lg     { margin-bottom: 100px; }

/* Max-width constrained section bg (white pill / card)
   Uses margin-inline (not margin shorthand) so vertical margins from custom.min are preserved */
.bg-section {
    width: 100%;
    max-width: 1880px;
    margin-inline: auto;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
}

/* Dark green section — exclude hero which has its own background image */
.dark-section:not(.hero-gold) {
    background-color: var(--color-primary);
    background-image: url('../images/dark-section-bg-image.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.hero-gold.dark-section {
    background-color: var(--color-primary);
    background-image: none;
    background-position: center center;
    background-size: cover;
}

/* Hero overlay ::before: inherit parent border-radius for pill shape */
.hero-gold.bg-section::before {
    border-radius: inherit;
}


/* ==========================================================================
   04. BUTTON COMPONENTS
   ========================================================================== */

/*
   Usage reference:
   ─────────────────────────────────────────────────────────────
   Primary (dark on accent):    <a class="btn-default">...</a>
   Inverted (white on primary): <a class="btn-default btn-highlighted">...</a>
   Outline:                     <a class="btn-outline">...</a>
   Ghost (text only):           <a class="btn-ghost">...</a>
   Icon only:                   <a class="btn-icon">...</a>
   Small:                       add class  btn-sm
   ─────────────────────────────────────────────────────────────
*/

/* btn-default & btn-highlighted are defined in custom.min.css — do not re-declare */

/* Outline variant */
.btn-outline {
    position: relative;
    display: inline-block;
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    line-height: 1em;
    text-transform: capitalize;
    color: var(--color-primary);
    padding: 15px 40px;
    transition: var(--transition-slow);
}

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

.btn-outline-accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-outline-accent:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

/* Ghost — text link with animated underline */
.btn-ghost {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    position: relative;
    transition: var(--transition-base);
}

.btn-ghost::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: var(--transition-base);
}

.btn-ghost:hover { color: var(--color-primary); }
.btn-ghost:hover::after { width: 100%; }

/* Size modifier */
.btn-sm {
    font-size: var(--text-sm) !important;
    padding: 12px 28px !important;
}

.btn-lg {
    font-size: var(--text-md) !important;
    padding: 20px 64px !important;
}


/* ==========================================================================
   05. ICON BOX COMPONENT
   ========================================================================== */

/*
   Usage reference:
   ─────────────────────────────────────────────────────────────
   <div class="icon-box">            ← default 50px accent circle
     <img src="..." alt="">
   </div>

   Modifiers:
   .icon-box--sm    → 40px
   .icon-box--lg    → 60px
   .icon-box--xl    → 80px
   .icon-box--primary  → green bg, white img on hover
   .icon-box--white    → white bg (for dark sections)
   .icon-box--square   → rounded square, not circle
   ─────────────────────────────────────────────────────────────
*/

.icon-box {
    position: relative;
    width: var(--icon-box-md);
    height: var(--icon-box-md);
    background-color: var(--color-accent);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: var(--transition-slow);
}

/* Hover fill effect (used across the site) */
.icon-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    border-radius: var(--radius-circle);
    transform: scale(0);
    transition: var(--transition-slow);
    z-index: 0;
}

.icon-box:hover::before,
*:hover > .icon-box::before {
    transform: scale(1);
}

.icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
    transition: var(--transition-slow);
}

*:hover > .icon-box img {
    filter: brightness(0) invert(1);
}

/* Size modifiers */
.icon-box--sm { width: var(--icon-box-sm); height: var(--icon-box-sm); }
.icon-box--lg { width: var(--icon-box-lg); height: var(--icon-box-lg); }
.icon-box--xl { width: var(--icon-box-xl); height: var(--icon-box-xl); }
.icon-box--sm img { max-width: 18px; }
.icon-box--lg img { max-width: 30px; }
.icon-box--xl img { max-width: 40px; }

/* Colour modifiers */
.icon-box--primary { background-color: var(--color-primary); }
.icon-box--primary img { filter: brightness(0) invert(1); }
.icon-box--primary::before { background-color: var(--color-accent); }
*:hover > .icon-box--primary img { filter: none; }

.icon-box--white { background-color: var(--color-white); }

/* Square variant */
.icon-box--square,
.icon-box--square::before {
    border-radius: var(--radius-md);
}

/* FA icon inside icon-box instead of img */
.icon-box i {
    position: relative;
    font-size: 20px;
    color: var(--color-primary);
    z-index: 1;
    transition: var(--transition-slow);
}

*:hover > .icon-box i { color: var(--color-white); }


/* ==========================================================================
   06. SECTION TITLE COMPONENT
   ========================================================================== */

/*
   Usage reference:
   ─────────────────────────────────────────────────────────────
   <div class="section-title">
     <span class="section-sub-title">Label</span>
     <h2>Heading text here</h2>
     <p>Optional lead paragraph</p>
   </div>

   Centred variant: add .section-title-center + max-width wrapper
   Dark bg variant: parent has .dark-section (colours auto-flip)
   ─────────────────────────────────────────────────────────────
*/

/* These are fully declared in custom.min.css — reference only */

/* Heading bottom margin — custom.css sets 0, we need breathing room */
.section-title h1,
.section-title h2 {
    margin-bottom: 16px;
}

/* Additional modifier: extra-large title for page banners */
.section-title h1 {
    font-size: var(--text-hero);
    line-height: var(--lh-tight);
}

/* Lead paragraph that sits under a section title */
.section-lead {
    max-width: 700px;
    font-size: var(--text-md);
    line-height: var(--lh-base);
    color: var(--color-text);
    margin-top: var(--gap-md);
}

.dark-section .section-lead { color: var(--color-white); }
.section-title-center .section-lead { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   07. CARD / BOX COMPONENTS
   ========================================================================== */

/*
   Three card surfaces used across the site:
   ─────────────────────────────────────────
   .card-white    → white bg, drop shadow
   .card-bg       → --bg-color surface (light grey)
   .card-dark     → dark primary bg (for dark-section contexts)

   All cards use border-radius: var(--radius-lg) and padding: 40px
   by default; use .card-pad-sm / .card-pad-lg to override.
*/

/* Base card reset */
.card-white,
.card-bg,
.card-dark {
    border-radius: var(--radius-lg);
    transition: var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.card-white {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    padding: 40px;
}

.card-bg {
    background: var(--color-bg);
    padding: 40px;
}

.card-dark {
    background: rgba(255, 255, 255, 0.08);
    padding: 40px;
}

/* Hover lift (opt-in) */
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Padding modifiers */
.card-pad-sm { padding: 24px !important; }
.card-pad-lg { padding: 60px !important; }

/* Counter / stat card — big number + label */
.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 30px;
    transition: var(--transition-slow);
}

.stat-card:hover { background: var(--color-accent); }

.stat-card__number {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    line-height: var(--lh-tight);
}

.stat-card__label {
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 8px 0 0;
}

/* Image card (service / blog thumbnail wrapper) */
.img-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: block;
}

.img-card img {
    width: 100%;
    object-fit: cover;
    transition: var(--transition-slower);
}

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


/* ==========================================================================
   08. PAGE BANNER — INNER PAGE HERO
   ========================================================================== */

/*
   Used on all inner pages (Contact, Services, About, Blog, etc.)
   Replaces the homepage .hero-gold section.

   Usage:
   ─────────────────────────────────────────────────────────────
   <?php get_template_part('template-parts/page-banner'); ?>
   Pass $args = ['title' => 'Contact Us', 'subtitle' => 'Optional lead']

   HTML pattern:
   <div class="page-banner dark-section">
     <div class="container">
       <div class="row">
         <div class="col-lg-12">
           <div class="page-banner-content">
             <div class="section-title">
               <span class="section-sub-title">...</span>
               <h1>Contact Us</h1>
             </div>
             <nav class="breadcrumb-gold" ...>...</nav>
           </div>
         </div>
       </div>
     </div>
   </div>
   ─────────────────────────────────────────────────────────────
*/

/*
   Page header (inner page hero)
   Dark bg, no background image, full bleed.
*/
.page-header {
    background-image: none;
    background-color: var(--color-primary);
    margin-top: 0;
    border-radius: 0;
    max-width: 100%;
}

.page-header::before {
    background: none;
}

/* Sidebar sticky — offset for top bar + nav height */
.page-single-sidebar {
    top: 130px;
}
}

.page-banner {
    position: relative;
    padding: 180px 0 100px;
    background-color: var(--color-primary);
    background-image: url('../images/dark-section-bg-image.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    overflow: hidden;
    margin-top: 0;
}

/* Decorative bug/corner image overlay */
.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        135deg,
        rgba(3, 63, 45, 0.95) 0%,
        rgba(3, 63, 45, 0.70) 100%
    );
    z-index: 1;
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

.page-banner-content {
    max-width: 800px;
}

/* Override section-title inside banner — Bugfree .page-header-box spacing */
.page-banner .section-title {
    margin-bottom: var(--space-2);  /* 8px — Bugfree h1 has margin-bottom: 10px */
}

.page-banner .section-title .section-sub-title {
    margin-bottom: var(--space-2);
}

.page-banner .section-title h1 {
    color: var(--color-white);
    font-size: var(--text-hero);   /* 66px — matches Bugfree .page-header-box h1 */
    line-height: var(--lh-tight);
    margin-bottom: 0;
}

.page-banner .section-title p {
    color: rgba(255, 255, 255, 0.80);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* Breadcrumb — compact gap like Bugfree */
.page-banner .breadcrumb-gold {
    margin-top: var(--space-2);
}

/* Centred banner variant */
.page-banner--center {
    text-align: center;
}

.page-banner--center .page-banner-content {
    margin: 0 auto;
}

/* Shorter banner for simple pages */
.page-banner--sm {
    padding: 130px 0 70px;
}

/* Page banner with background image override */
.page-banner[data-bg] {
    background-size: cover;
    background-position: center center;
}


/* ==========================================================================
   08b. TOP BAR (inside header-sticky, above nav)
   Mobile-first: hidden on mobile, visible from 992px up.
   ========================================================================== */

/* Base: hidden on mobile */
.top-bar {
    display: none;
}

/* Desktop: show top bar */
@media (min-width: 992px) {
    .top-bar {
        display: block;
        background-color: var(--color-accent);
        padding: 8px 0;
    }

    .top-bar__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-bar__left,
    .top-bar__right {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .top-bar__item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--color-primary);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    a.top-bar__item:hover {
        color: var(--color-text);
    }

    .top-bar__item i {
        color: var(--color-primary);
        font-size: 12px;
    }
}

/* Tablet: hide email text, keep icon as mailto tap target */
@media (min-width: 992px) and (max-width: 1199px) {
    .top-bar__email-text {
        display: none;
    }

    .top-bar__left {
        gap: 16px;
    }
}

/* ==========================================================================
   HEADER FULL-WIDTH OVERRIDES
   Mobile-first. Overrides custom.min.css pill shape, max-width, offsets.
   ========================================================================== */

/* ---- Mobile base (all sizes) ---- */

/* Logo sizing */
.main-header.header-gold .navbar-brand img {
    max-height: 50px;
    width: auto;
}

@media (min-width: 992px) {
    .main-header.header-gold .navbar-brand img {
        max-height: 80px;
    }

    .main-header.header-gold .navbar {
        padding: 0;
    }
}

.main-header.header-gold {
    position: absolute;
    top: 0;
}

.main-header.header-gold .header-sticky {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid var(--color-divider-dark);
    will-change: transform, background-color;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Sticky scroll state — yellow bg, dark text */
.main-header.header-gold .header-sticky.active {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    background: var(--color-accent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Top bar on sticky — dark bg, white text (contrast with yellow nav) */
.main-header.header-gold .header-sticky.active .top-bar {
    background-color: var(--color-primary);
}

.main-header.header-gold .header-sticky.active .top-bar .top-bar__item {
    color: var(--color-white);
}

.main-header.header-gold .header-sticky.active .top-bar a.top-bar__item:hover {
    color: var(--color-accent);
}

.main-header.header-gold .header-sticky.active .top-bar .top-bar__item i {
    color: var(--color-accent);
}

/* Dark text/links when sticky (yellow bg) */

.main-header.header-gold .header-sticky.active .main-menu ul li a {
    color: var(--color-primary);
}

.main-header.header-gold .header-sticky.active .main-menu ul li a:hover {
    color: var(--color-text);
}

/* CTA button on sticky — dark bg, white text, white arrow */
.main-header.header-gold .header-sticky.active .header-btn .btn-highlighted {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.main-header.header-gold .header-sticky.active .header-btn .btn-highlighted::before {
    filter: brightness(0) invert(1);
}

.main-header.header-gold .header-sticky.active .header-btn .btn-highlighted:hover {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.main-header.header-gold .header-sticky.active .header-btn .btn-highlighted:hover::before {
    filter: none;
}

/* Dropdown menus on sticky — white bg so readable on yellow */
.main-header.header-gold .header-sticky.active .main-menu ul ul {
    background-color: var(--color-white);
}

.main-header.header-gold .header-sticky.active .main-menu ul ul li a {
    color: var(--color-text);
}

.main-header.header-gold .header-sticky.active .main-menu ul ul li a:hover {
    color: var(--color-primary);
}

/* ---- Desktop: navbar spacing below top bar ---- */
@media (min-width: 992px) {
    .main-header.header-gold .navbar {
        margin-top: 10px;
    }

    .main-header.header-gold .header-sticky.active .navbar {
        margin-top: 0;
    }
}

/* ==========================================================================
   HERO FULL-WIDTH OVERRIDES
   Removes margin-top, border-radius, max-width from hero-gold.
   ========================================================================== */

/* Remove pill shape and gap on hero — all breakpoints */
.hero-gold.bg-section {
    max-width: 100%;
    border-radius: 0;
    margin-top: 0;
}

.hero-gold.bg-section::before {
    border-radius: 0;
}

.hero-image-gold figure,
.hero-image-gold figure img {
    border-radius: 0;
}



/* ==========================================================================
   09. BREADCRUMB COMPONENT
   ========================================================================== */

.breadcrumb-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    list-style: none;
    margin: var(--gap-md) 0 0;
    padding: 0;
}

.breadcrumb-gold li {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.60);
    line-height: 1em;
}

.breadcrumb-gold li a {
    color: var(--color-accent);
    transition: var(--transition-base);
}

.breadcrumb-gold li a:hover {
    color: var(--color-white);
}

/* Separator between items */
.breadcrumb-gold li + li::before {
    content: '/';
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.40);
}

/* Active (current page) item */
.breadcrumb-gold li.active {
    color: rgba(255, 255, 255, 0.60);
}

/* Light breadcrumb (for non-dark sections) */
.breadcrumb-light li { color: var(--color-text-muted); }
.breadcrumb-light li a { color: var(--color-primary); }
.breadcrumb-light li a:hover { color: var(--color-accent); }
.breadcrumb-light li + li::before { color: var(--color-divider); }
.breadcrumb-light li.active { color: var(--color-text-muted); }


/* ==========================================================================
   10. FORM SYSTEM
   ========================================================================== */

/*
   All form inputs use .form-control (Bootstrap base).
   Theme overrides below ensure visual consistency.

   Field layout:
   ─────────────────────────────────────────────────────────────
   <div class="form-group">
     <label class="form-label" for="name">Full Name *</label>
     <input type="text" class="form-control" id="name" ...>
     <div class="help-block with-errors"></div>
   </div>

   Two-column row:
   <div class="form-row">
     <div class="form-group form-group--half"> ... </div>
     <div class="form-group form-group--half"> ... </div>
   </div>
   ─────────────────────────────────────────────────────────────
*/

/* Base input reset and theme override */
.form-control {
    width: 100%;
    height: 58px;
    background-color: var(--color-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    padding: 0 20px;
    transition: var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.form-control::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}

.form-control:focus {
    background-color: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(242, 234, 104, 0.20);
    color: var(--color-primary);
}

.form-control:focus::placeholder { color: transparent; }

/* Textarea */
textarea.form-control {
    height: 150px;
    padding: 16px 20px;
    resize: vertical;
    line-height: var(--lh-base);
}

/* Select */
select.form-control,
select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23033F2D' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 44px;
    cursor: pointer;
}

/* Date input */
input[type="date"].form-control {
    cursor: pointer;
}

/* Form label */
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1em;
}

/* Form group spacing */
.form-group {
    margin-bottom: var(--gap-md);
    position: relative;
}

.form-group:last-child { margin-bottom: 0; }

/* Two-up row layout */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.form-group--half {
    width: calc(50% - var(--gap-md) / 2);
    margin-bottom: 0;
}

.form-group--third {
    width: calc(33.33% - var(--gap-md));
    margin-bottom: 0;
}

/* Error message */
.help-block.with-errors ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.help-block.with-errors ul li {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-error);
}

/* Form inside dark section */
.dark-section .form-control {
    background-color: var(--color-divider-dark);
    color: var(--color-white);
    border-color: var(--color-divider-dark);
}

.dark-section .form-control::placeholder { color: rgba(255, 255, 255, 0.50); }
.dark-section .form-control:focus { background-color: rgba(255,255,255,0.08); border-color: var(--color-accent); }
.dark-section .form-label { color: var(--color-white); }

/* Submit row */
.form-submit-row {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    margin-top: var(--gap-lg);
}

/* Inline form (newsletter strip) */
.form-inline {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.form-inline .form-control { flex: 1; }


/* ==========================================================================
   11. INFO CARD COMPONENT
   ========================================================================== */

/*
   Used in contact pages, footer info strips, CTA sections.

   Usage:
   ─────────────────────────────────────────────────────────────
   <div class="info-card">
     <div class="icon-box">
       <img src="..." alt="">
     </div>
     <div class="info-card__body">
       <span class="info-card__label">Email Address</span>
       <a href="mailto:..." class="info-card__value">info@mrpestkiller.com</a>
     </div>
   </div>
   ─────────────────────────────────────────────────────────────
*/

.info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
}

.info-card__body {
    flex: 1;
}

.info-card__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    line-height: 1em;
    margin-bottom: 6px;
    text-transform: capitalize;
}

.info-card__value {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    transition: var(--transition-base);
}

a.info-card__value:hover { color: var(--color-accent); }

/* Dark section variant */
.dark-section .info-card__label { color: rgba(255,255,255,0.50); }
.dark-section .info-card__value { color: var(--color-white); }
.dark-section a.info-card__value:hover { color: var(--color-accent); }

/* Stacked list of info cards */
.info-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

/* Horizontal strip variant */
.info-card-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg) var(--gap-2xl);
    align-items: flex-start;
}

/* Boxed variant (white card on dark bg) */
.info-card--boxed {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--color-divider-dark);
    border-radius: var(--radius-lg);
    padding: 30px;
    transition: var(--transition-slow);
}

.info-card--boxed:hover {
    background: rgba(255,255,255,0.10);
    border-color: var(--color-accent);
}


/* ==========================================================================
   12. BADGE / TAG COMPONENT
   ========================================================================== */

/*
   Usage:
   <span class="badge-tag">Residential</span>
   <span class="badge-tag badge-tag--accent">New</span>
   <span class="badge-tag badge-tag--outline">Eco-Friendly</span>
*/

.badge-tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1em;
    text-transform: capitalize;
    color: var(--color-primary);
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    white-space: nowrap;
}

.badge-tag--accent {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

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

.badge-tag--outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.badge-tag--outline-light {
    background: transparent;
    border: 1px solid var(--color-divider-dark);
    color: var(--color-white);
}

/* Section sub-title (already declared in custom.min.css — reference) */
/*
.section-sub-title → pill badge with dot prefix, 14px, fw600
Use .section-sub-title on a <span> inside .section-title
*/


/* ==========================================================================
   13. DIVIDER COMPONENT
   ========================================================================== */

/* Standard horizontal rule */
.divider {
    border: none;
    border-top: 1px solid var(--color-divider);
    margin: var(--gap-xl) 0;
}

.divider--dark {
    border-color: var(--color-divider-dark);
}

.divider--accent {
    border-top: 2px solid var(--color-accent);
    max-width: 60px;
}

/* Divider with centred text label */
.divider-text {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    margin: var(--gap-xl) 0;
}

.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-divider);
}

.divider-text span {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.dark-section .divider-text::before,
.dark-section .divider-text::after { background: var(--color-divider-dark); }
.dark-section .divider-text span { color: rgba(255,255,255,0.50); }


/* ==========================================================================
   14. UTILITY CLASSES
   ========================================================================== */

/* Colour backgrounds */
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-accent    { background-color: var(--color-accent)  !important; }
.bg-white     { background-color: var(--color-white)   !important; }
.bg-surface   { background-color: var(--color-surface) !important; }
.bg-light     { background-color: var(--color-bg)      !important; }

/* Border radius */
.rounded-sm     { border-radius: var(--radius-sm) !important; }
.rounded-md     { border-radius: var(--radius-md) !important; }
.rounded-lg     { border-radius: var(--radius-lg) !important; }
.rounded-xl     { border-radius: var(--radius-xl) !important; }
.rounded-pill   { border-radius: var(--radius-pill)   !important; }
.rounded-circle { border-radius: var(--radius-circle) !important; }

/* Spacing utilities (margin / padding) */
.mt-section  { margin-top:    var(--section-pad) !important; }
.mb-section  { margin-bottom: var(--section-pad) !important; }
.pt-section  { padding-top:    var(--section-pad) !important; }
.pb-section  { padding-bottom: var(--section-pad) !important; }

/* Gap helpers (for flex/grid children) */
.gap-xs  { gap: var(--gap-xs)  !important; }
.gap-sm  { gap: var(--gap-sm)  !important; }
.gap-md  { gap: var(--gap-md)  !important; }
.gap-lg  { gap: var(--gap-lg)  !important; }
.gap-xl  { gap: var(--gap-xl)  !important; }
.gap-2xl { gap: var(--gap-2xl) !important; }

/* Object fit */
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; }

/* Overflow helpers */
.overflow-hidden { overflow: hidden; }
.overflow-clip   { overflow: clip; }

/* Aspect ratios (useful for image placeholders) */
.ratio-1-1   { aspect-ratio: 1 / 1; }
.ratio-16-9  { aspect-ratio: 16 / 9; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-3-2   { aspect-ratio: 3 / 2; }

/* Flex helpers */
.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.d-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d-flex-col {
    display: flex;
    flex-direction: column;
}

/* Full-width image */
.img-fluid-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screen-reader only (accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Transition utilities */
.transition-base   { transition: var(--transition-base)   !important; }
.transition-slow   { transition: var(--transition-slow)   !important; }
.transition-slower { transition: var(--transition-slower) !important; }
.no-transition     { transition: none !important; }


/* ==========================================================================
   15. ANIMATION HELPERS
   ========================================================================== */

/* Reveal animations removed for performance — use .fade-in + JS if needed */

/* Fade-in on load (CSS only, no JS) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger children utility */
.stagger-children > * { transition-delay: calc(var(--i, 0) * 0.1s); }

/* Floating animation (decorative images like bug icon) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

.float-anim {
    animation: float 4s ease-in-out infinite;
}

/* Pulse accent (for CTAs, badges) */
@keyframes pulse-accent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 234, 104, 0.40); }
    50%       { box-shadow: 0 0 0 12px rgba(242, 234, 104, 0); }
}

.pulse-accent { animation: pulse-accent 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .float-anim, .pulse-accent { animation: none; }
}

/* Back to top button (referenced in function.js) */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: var(--shadow-sm);
    will-change: opacity;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-primary);
    color: var(--color-accent);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   16. RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet and below (< 1200px) */
@media (max-width: 1199px) {
    :root {
        --text-hero  : 52px;
        --text-4xl   : 40px;
        --section-pad: 80px;
    }

    .page-banner { padding: 150px 0 80px; }
    .page-banner .section-title h1 { font-size: 48px; }

    .form-group--half {
        width: 100%;
    }
}

/* Mobile landscape (< 992px) */
@media (max-width: 991px) {
    :root {
        --text-hero   : 44px;
        --text-4xl    : 34px;
        --text-3xl    : 32px;
        --section-pad : 70px;
        --section-row-gap: 50px;
    }

    .page-banner { padding: 130px 0 60px; }
    .page-banner .section-title h1 { font-size: 40px; }

    .card-white,
    .card-bg,
    .card-dark { padding: 30px; }

    .info-card-strip { gap: var(--gap-lg); }
}

/* Mobile portrait (< 768px) */
@media (max-width: 767px) {
    :root {
        --text-hero   : 36px;
        --text-4xl    : 28px;
        --text-3xl    : 26px;
        --text-2xl    : 24px;
        --section-pad : 60px;
        --section-row-gap: 40px;
        --gap-2xl     : 40px;
    }

    /* CTA form section — reduce negative margin overlap on mobile */
    .hero-cta-section-gold {
        margin-top: -15px;
    }

    /* Section title spacing — mobile rhythm */
    .section-title {
        margin-bottom: 30px;
    }

    .section-title .section-sub-title {
        margin-bottom: 14px;
    }

    .section-title h1,
    .section-title h2 {
        margin-bottom: 16px;
    }

    .section-title p {
        margin-top: 0;
    }

    .page-banner { padding: 120px 0 50px; }
    .page-banner .section-title h1 { font-size: 32px; }
    .page-banner--sm { padding: 110px 0 40px; }

    .card-white,
    .card-bg,
    .card-dark { padding: 24px; }

    .form-row { flex-direction: column; gap: 0; }
    .form-group--half,
    .form-group--third { width: 100%; }

    .form-submit-row { flex-direction: column; align-items: flex-start; }
    .form-inline { flex-direction: column; }

    .back-to-top { bottom: 20px; right: 20px; }

    .breadcrumb-gold { gap: 4px 8px; }

    .divider-text { gap: var(--gap-md); }

    .info-card-strip { flex-direction: column; }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    :root {
        --text-hero : 30px;
        --text-4xl  : 26px;
    }

    .page-banner .section-title h1 { font-size: 28px; }
}


/* ==========================================================================
   17. CONTACT PAGE
   ========================================================================== */

/* ------------------------------------------------------------------
   Contact Info Strip
   Three horizontal cards — icon + label + value, no images.
   Sits between .page-banner and .contact-form-map.
   ------------------------------------------------------------------ */

.contact-info-strip {
    padding: 50px 0 0;
}

.contact-info-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
}

/* Individual card */
.contact-info-card {
    flex: 1;
    min-width: 260px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    box-shadow: var(--shadow-card);
    border: 1px solid transparent;
    transition: var(--transition-slow);
}

.contact-info-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Stop the icon-box parent-hover filter from firing on card hover
   since .icon-box::before and img filter are triggered by *:hover > .icon-box */
.contact-info-card:hover .icon-box::before {
    transform: scale(1);
}

.contact-info-card:hover .icon-box img {
    filter: brightness(0) invert(1);
}

.contact-info-card:hover .icon-box i {
    color: var(--color-white);
}

.contact-info-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info-card__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: capitalize;
    line-height: 1em;
}

.contact-info-card__value {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    transition: var(--transition-base);
}

a.contact-info-card__value:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-info-card__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1em;
}

/* ------------------------------------------------------------------
   Contact Form + Map Section
   ------------------------------------------------------------------ */

.contact-form-map.bg-section {
    background-color: #f5f5f5;
}

/* Hero CTA: transparent strip overlapping hero — .bg-section pill style doesn't apply */
.hero-cta-section-gold.bg-section {
    background: transparent;
    border-radius: 0;
}

.contact-form-map {
    padding: var(--section-pad) 0;
}

/* Form column — align content to top while map stretches full height */
.contact-us-form {
    height: 100%;
    padding-right: 20px;
}

/* Override the height: 100% from custom.min.css —
   align-content: center caused form to float mid-column */
.contact-us-form {
    align-content: flex-start;
}

/* Textarea taller since no left image to balance */
.contact-form textarea.form-control {
    height: 160px;
}

/* Submit button row spacing */
.contact-form-btn {
    margin-top: 10px;
}

/* Map column — stretches to match form column height via align-items-stretch on .row */
.contact-map-col {
    position: relative;
    height: 100%;
    min-height: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Iframe fills entire column */
.contact-map-iframe {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.contact-map-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: var(--radius-lg);
}

/* Working hours overlay — reuses .working-hour-box from custom.min.css
   (position: absolute; bottom: 40px; left: 40px; white bg; radius 20px; padding 30px)
   No override needed — just ensure .contact-map-col is position: relative */


/* ------------------------------------------------------------------
   Contact Page — Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1199px) {
    .contact-us-form {
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .contact-info-card {
        min-width: calc(50% - var(--gap-lg) / 2);
    }
}

@media (max-width: 767px) {
    .contact-info-strip {
        padding: 40px 0 0;
    }

    .contact-info-cards {
        flex-direction: column;
    }

    .contact-info-card {
        min-width: 100%;
    }

    /* On mobile, map becomes fixed-height block below the form */
    .contact-map-col {
        position: relative;
        height: 400px;
        min-height: 400px;
        margin-top: var(--gap-xl);
    }

    .working-hour-box {
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 20px;
    }
}

/* ==========================================================================
   Service Single Page — Sidebar CTA
   ========================================================================== */

.page-single-sidebar .sidebar-cta-btn {
    margin-top: var(--space-8);
}

/* ------------------------------------------------------------------
   Blog Archive — post-overlay-item readmore arrow
   custom.min.css references arrow-white.svg which may not exist.
   Fallback: use arrow-primary.svg with filter for white on dark overlay.
   ------------------------------------------------------------------ */
.post-overlay-item .post-item-btn .readmore-btn::before {
    background-image: url('../images/arrow-primary.svg');
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Primary navigation — dropdowns (Bugfree hover + design tokens)
   Aligns with IA patterns used on large AU pest sites (e.g. Flick Melbourne):
   Residential / Commercial / Pest Solutions / Locations.
   ========================================================================== */

/* Font Awesome 6 chevron on parent items (custom.min.css targets legacy "FontAwesome") */
.main-header.header-gold .main-menu ul li.submenu > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f107";
}

/* Stack above page content when header is transparent over hero */
.main-header.header-gold .main-menu ul ul.sub-menu,
.main-header.header-gold .main-menu ul ul {
    z-index: var(--z-overlay);
}

/* Wider panels for Residential / Commercial / Pest Solutions */
@media (min-width: 992px) {
    .main-header.header-gold .main-menu ul li.mrpk-submenu-wide > ul.sub-menu {
        width: min(360px, 92vw);
        max-height: min(70vh, 520px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: var(--space-2) 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    .main-header.header-gold .main-menu ul li.mrpk-submenu-pest > ul.sub-menu {
        width: min(520px, 94vw);
        column-count: 2;
        column-gap: var(--gap-xl);
    }

    .main-header.header-gold .main-menu ul li.mrpk-submenu-pest > ul.sub-menu > li {
        break-inside: avoid;
    }
}

/* Nested flyout (third level) inherits Bugfree positioning; keep readable width */
.main-header.header-gold .main-menu ul ul ul.sub-menu {
    min-width: 220px;
}

/* ==========================================================================
   Service card hover — simple lift only
   ========================================================================== */
.service-item-gold {
    transition: transform 0.3s ease-in-out;
}

.service-item-gold:hover,
.service-item-gold.active {
    transform: translateY(-5px);
}

/* ==========================================================================
   Hero Trust Badges
   ========================================================================== */
.hero-badges-gold {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hero-badges-gold img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .hero-badges-gold {
        justify-content: center;
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .hero-badges-gold {
        gap: 14px;
    }

    .hero-badges-gold img {
        width: 46px;
        height: 46px;
    }
}

/* ==========================================================================
   Trust Badges Strip
   ========================================================================== */
.trust-badges {
    padding: 50px 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}

.trust-badges__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    width: 220px;
    text-align: center;
}

.trust-badges__icon {
    width: 100px;
    height: 100px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-badges__icon svg {
    width: 64px;
    height: 64px;
}

.trust-badges__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trust-badges__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 767px) {
    .trust-badges {
        padding: 40px 0;
    }

    .trust-badges__inner {
        gap: 30px;
        justify-content: center;
    }

    .trust-badges__item {
        width: 100px;
    }

    .trust-badges__icon {
        width: 52px;
        height: 52px;
    }

    .trust-badges__label {
        font-size: 12px;
    }
}

/* ==========================================================================
   17. SERVICE DETAIL TEMPLATE V2 (added 2026-04-15, mobile-first 2026-05-05)
   ==========================================================================
   New component layer for page-service-single.php v2 template.
   Mobile-first: base styles target small phones; min-width media queries
   layer tablet (≥768px) and desktop (≥992px) styles.
   Sections in page order:
     17.1  Audience bar          (section 1b)
     17.2  Symptoms grid         (section 2)
     17.3  Process strip         (section 3)
     17.4  What's included       (section 4)
     17.5  Pricing chip          (section 5)
     17.6  Trust bar             (section 6)
     17.7  Service areas         (section 8)
     17.8  Related services      (section 10)
     17.9  CTA strip             (section 11)
     17.10 Identify comparison   (section 12 conditional)
     17.11 Responsive overrides  (≥480px, ≥768px, ≥992px)
   ========================================================================== */

/* ---- 17.1 Audience bar ---------------------------------------------------- */
.service-audience-bar {
    background-color: var(--color-bg);
    padding: var(--space-5) 0;
}
.service-audience-bar__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
}
.service-audience-bar__card {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-base);
    box-shadow: var(--shadow-xs);
}
.service-audience-bar__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}
.service-audience-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-box-sm);
    height: var(--icon-box-sm);
    border-radius: var(--radius-circle);
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-size: var(--text-md);
    flex-shrink: 0;
}
.service-audience-bar__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    line-height: var(--lh-snug);
}
.service-audience-bar__text strong {
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    font-size: var(--text-md);
}
.service-audience-bar__text span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.service-audience-bar__arrow {
    color: var(--color-primary);
    font-size: var(--text-xl);
    transition: var(--transition-base);
}
.service-audience-bar__card:hover .service-audience-bar__arrow {
    transform: translateX(4px);
}

/* ---- 17.2 Symptoms grid --------------------------------------------------- */
/* Inside the 8-col main column — no container needed */
.service-symptoms {
    padding: 0 0 var(--space-8);
}
.service-symptoms__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-xl);
}
.service-symptoms__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}
.service-symptoms__item:hover {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.service-symptoms__item .icon-box {
    margin-bottom: var(--space-2);
}
.service-symptoms__item h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin: 0;
    line-height: var(--lh-snug);
}
.service-symptoms__item p {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--lh-base);
    margin: 0;
}

/* ---- 17.3 Process strip --------------------------------------------------- */
.service-process {
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}
.service-process .section-title h2,
.service-process .section-title p {
    color: var(--color-white);
}
.service-process .section-sub-title {
    color: var(--color-accent);
}
.service-process__strip {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--gap-lg);
    row-gap: var(--gap-xl);
    position: relative;
    --process-icon-size: 60px;
    --process-number-space: calc(var(--text-sm) + var(--space-3));
}
.service-process__strip::before {
    content: '';
    display: none;
    position: absolute;
    top: calc(var(--space-4) + var(--process-number-space) + (var(--process-icon-size) / 2) - 1px);
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--color-divider-dark) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.service-process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-4);
    z-index: 1;
}
.service-process__number {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.1em;
}
.service-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--process-icon-size);
    height: var(--process-icon-size);
    border-radius: var(--radius-circle);
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-size: var(--text-xl);
}
.service-process__step h3 {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0;
}
.service-process__step p {
    color: var(--color-text-light);
    opacity: 0.85;
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    margin: 0;
}

/* ---- 17.4 What's included ------------------------------------------------- */
.service-included {
    padding: 0 0 var(--space-8);
}
.service-included__list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.service-included__list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: var(--text-md);
    line-height: var(--lh-base);
    color: var(--color-text);
}
.service-included__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background-color: var(--color-accent);
    color: var(--color-primary);
    flex-shrink: 0;
    font-size: var(--text-base);
    margin-top: 2px;
}
.service-included__figure {
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.service-included__figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---- 17.5 Pricing chip ---------------------------------------------------- */
/* In the sidebar context */
.page-single-sidebar .service-pricing__chip {
    margin-top: var(--space-8);
}
.sidebar-cta-btn a {
    border-radius: var(--radius-md);
}
.service-pricing__chip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.service-pricing__chip > i {
    font-size: var(--text-3xl);
    color: var(--color-primary);
}
.service-pricing__price {
    display: flex;
    flex-direction: column;
}
.service-pricing__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.service-pricing__amount {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-primary);
}
.service-pricing h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
}
.service-pricing__factors {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.service-pricing__factors li {
    position: relative;
    padding-left: var(--space-5);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--lh-base);
}
.service-pricing__factors li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background-color: var(--color-accent);
}


/* ---- 17.6 Trust bar ------------------------------------------------------- */
.service-trust-bar {
    padding: var(--space-8) 0;
    background-color: var(--color-primary);
}
.service-trust-bar__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-lg);
}
.service-trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}
.service-trust-bar__item i {
    color: var(--color-accent);
    font-size: var(--text-xl);
}

/* ---- 17.7 Service areas --------------------------------------------------- */
.service-areas {
    padding: var(--section-pad) 0;
    background-color: var(--color-surface);
}
.service-areas__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}
.service-areas__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-base);
    border: 2px solid transparent;
}
.service-areas__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.service-areas__card h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin: 0;
}
.service-areas__region {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.service-areas__note {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--lh-base);
    margin: var(--space-2) 0 0;
}
.service-areas__link {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}
.service-areas__all {
    text-align: center;
    margin: var(--space-8) 0 0;
}

/* ---- 17.8 Related services ------------------------------------------------ */
.service-related {
    padding: var(--section-pad) 0;
    background-color: var(--color-bg);
}
.service-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}
.service-related__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    border: 2px solid transparent;
    transition: var(--transition-base);
}
.service-related__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.service-related__price {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-radius: var(--radius-md);
    line-height: 1;
}
.service-related__price-label {
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    opacity: 0.8;
    color: var(--color-white);
}
.service-related__price-amount {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 4px;
}
.service-related__card h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    margin: 0;
}
.service-related__link {
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

/* ---- 17.9 CTA strip ------------------------------------------------------- */
.service-cta-strip {
    padding: var(--space-11) 0;
}
.service-cta-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-xl);
    align-items: center;
    text-align: center;
}
.service-cta-strip__text h2 {
    color: var(--color-white);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-2);
}
.service-cta-strip__text p {
    color: var(--color-text-light);
    opacity: 0.85;
    font-size: var(--text-md);
    margin: 0;
}
.service-cta-strip__actions {
    display: flex;
    gap: var(--gap-md);
    flex-wrap: wrap;
    justify-content: center;
}
.service-cta-strip__actions .btn-default i,
.service-cta-strip__actions .btn-outline-accent i {
    margin-right: var(--space-2);
}

/* ---- 17.10 Identify comparison ------------------------------------------- */
.service-identify {
    padding: var(--section-pad) 0;
    background-color: var(--color-surface);
}
.service-identify__table-wrap {
    overflow-x: auto;
}
.service-identify__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
/* Mobile base: render rows as stacked cards (semantic <table> retained) */
.service-identify__table,
.service-identify__table thead,
.service-identify__table tbody,
.service-identify__table tr,
.service-identify__table th,
.service-identify__table td {
    display: block;
    width: 100%;
}
.service-identify__table thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.service-identify__table tbody tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.service-identify__table tbody th {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--weight-semibold);
    text-align: left;
}
.service-identify__table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text);
    line-height: var(--lh-base);
}
.service-identify__table tbody td::before {
    content: attr(data-label) ': ';
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.service-identify__diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
}
.service-identify__diagram svg {
    max-width: 100%;
    height: auto;
}

/* ---- 17.11 Responsive overrides (mobile-first) -------------------------- */

/* Small landscape phone & up (≥480px) */
@media (min-width: 480px) {
    .service-pricing__chip {
        padding: var(--space-4) var(--space-5);
    }

    /* Identify table reverts to native table layout */
    .service-identify__table {
        display: table;
    }
    .service-identify__table thead {
        display: table-header-group;
        position: static;
        left: auto;
        top: auto;
    }
    .service-identify__table tbody {
        display: table-row-group;
    }
    .service-identify__table tr {
        display: table-row;
        width: auto;
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .service-identify__table th,
    .service-identify__table td {
        display: table-cell;
        width: auto;
    }
    .service-identify__table thead th {
        padding: var(--space-4) var(--space-5);
        text-align: left;
        font-weight: var(--weight-semibold);
        color: var(--color-white);
        background-color: var(--color-primary);
        font-size: var(--text-md);
    }
    .service-identify__table thead th:first-child {
        border-top-left-radius: var(--radius-md);
    }
    .service-identify__table thead th:last-child {
        border-top-right-radius: var(--radius-md);
    }
    .service-identify__table tbody th,
    .service-identify__table tbody td {
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-divider);
        vertical-align: top;
        line-height: var(--lh-base);
    }
    .service-identify__table tbody th {
        font-weight: var(--weight-semibold);
        color: var(--color-primary);
        background-color: var(--color-bg);
        text-align: left;
        width: 25%;
    }
    .service-identify__table tbody td {
        color: var(--color-text);
    }
    .service-identify__table tbody td::before {
        content: none;
    }
    .service-identify__table tbody tr:last-child th,
    .service-identify__table tbody tr:last-child td {
        border-bottom: 0;
    }
}

/* Tablet & up (≥768px) */
@media (min-width: 768px) {
    .service-audience-bar__grid {
        grid-template-columns: 1fr 1fr;
    }
    .service-symptoms__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-areas__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-related__grid {
        grid-template-columns: 1fr 1fr;
    }
    .service-trust-bar__strip {
        justify-content: space-between;
    }
    .service-included__figure {
        margin-bottom: 0;
    }
}

/* Desktop & up (≥992px) */
@media (min-width: 992px) {
    .service-process__strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--gap-lg);
    }
    .service-process__strip::before {
        display: block;
    }
    .service-areas__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .service-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .service-cta-strip__inner {
        grid-template-columns: 1fr auto;
        text-align: left;
    }
    .service-cta-strip__actions {
        justify-content: flex-end;
    }
}