/* =====================================================================
   edit.css — custom styles (loaded after main.css)

   Netting pages (Bird / Possum / Rodent / Bat) — shared design.
   Section classes: netting-solutions, netting-process, netting-faq,
   netting-areas, netting-related.
   If a page's design differs from the shared one, use a distinct
   name such as netting-design-1.
   ===================================================================== */

.inner-page-banner {
    overflow: hidden;
}


/* ---------------------------------------------------------------------
   "Our ... Solutions" cards
   (inside .pest-services-content .netting-solutions)
   --------------------------------------------------------------------- */
.netting-solutions .section-bar {
    width: 70px;
    height: 5px;
    border-radius: 5px;
}

.netting-solutions .pest-services {
    z-index: 2;
    position: relative;
}

.netting-solutions .pest-service-ctas .netting-card {
    min-height: 421px;
    background: #100FC5;
    display: flex;
    flex-direction: column;
}

/* Top: image occupies ~54% of the card (Figma 229 / 421) */
.netting-solutions .netting-card .card-media {
    flex: 0 0 auto;
    height: 54%;
    min-height: 229px;
}

.netting-solutions .netting-card .card-media .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay sits inside the image container: transparent for the top 70%,
   solid #100FC5 across the bottom 30% so the image fades into the card */
.netting-solutions .netting-card .card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(16, 15, 197, 0) 70%, #100FC5 100%);
    pointer-events: none;
}

/* Bottom: text on solid blue */
.netting-solutions .netting-card .card-body-text {
    flex: 1 1 auto;
    padding: 1.25rem 2.25rem 1.75rem;
}

.netting-solutions .netting-card .card-body-text .anton {
    font-size: 1.875rem;
}

.netting-solutions .netting-card .card-body-text .card-content {
    font-size: 1rem;
    line-height: 1.45;
}


/* ---------------------------------------------------------------------
   Our Process
   --------------------------------------------------------------------- */
.netting-process {
    background: linear-gradient(180deg, #100FC5 0%, #0000FD 100%);
    color: #fff;
}

.netting-process .process-heading {
    font-size: 5rem;
}

.netting-process .process-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.netting-process .process-list li {
    counter-increment: step;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 6.6rem;
    padding: 2.5rem 0 2.5rem 264px;
    font-family: 'Anton', sans-serif;
    text-transform: capitalize;
    font-size: 5rem;
    line-height: 1.02;
    color: #fff;
    transition: color 0.2s ease;
}

.netting-process .process-list li::marker {
    content: "";
}

/* big number */
.netting-process .process-list li::before {
    content: counter(step);
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Anton', sans-serif;
    font-size: 11.125rem;
    line-height: 1;
    color: #fff;
}

/* vertical bar */
.netting-process .process-list li::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 170px;
    background: #fff;
}

/* highlight on hover */
.netting-process .process-list li:hover {
    color: #FFCC00;
}

.netting-process .process-list li:hover::before {
    color: #FFCC00;
}

.netting-process .process-list li:hover::after {
    background: #FFCC00;
}

@media (min-width: 991.98px) {
    .netting-process .process-heading {
        padding-top: 2.4rem;
    }
}

@media (max-width: 991.98px) {
    .netting-process .process-heading {
        font-size: 3rem;
    }

    .netting-process .process-list li {
        font-size: 1.5rem;
        padding-left: 100px;
        min-height: 4.4rem;
    }

    .netting-process .process-list li::before {
        font-size: 4rem;
        left: 48px;
    }
    .netting-process .process-list li::after {
        height: 64px;
        left: 16px;
    }
}


/* ---------------------------------------------------------------------
   FAQ — white card look via heading (top) + paragraph (bottom) pairs
   --------------------------------------------------------------------- */
.netting-faq {
    background: #f4f4fb;
}

.netting-faq .heading {
    font-size: 5rem;
}

.netting-faq .faq-list {
    width: 100%;
    justify-self: center;
}

.netting-faq .faq-list h1,
.netting-faq .faq-list h2,
.netting-faq .faq-list h3,
.netting-faq .faq-list h4 {
    background: #fff;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem 1.75rem 0;
    margin: 0;
    color: #100FC5;
    font-size: 1.4rem;
    font-weight: 700;
}

.netting-faq .faq-list p {
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding: 0 1.75rem 1.5rem;
    margin: 0 0 1rem;
    border-bottom: 0;
    color: #555555;
}


/* ---------------------------------------------------------------------
   Service Areas — yellow Sydney map (absolute) + area boxes
   --------------------------------------------------------------------- */
.netting-areas {
    min-height: 520px;
}

.netting-areas .heading {
    font-size: 5rem;
}

.netting-areas .subtitle {
    font-size: 16px;
    opacity: 0.95;
}

.netting-areas .areas-map-img {
    position: absolute;
    left: 0;
    top: 0;
    /* transform: translateY(-50%); */
    width: 50%;
    height: auto;
    max-width: none;
}

.netting-areas .areas-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.netting-areas .areas-list li {
    background: #eaeaf1;
    color: #555555;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    padding: 16px 12px;
}

@media (min-width: 992px) {
    .w-lg-80 {
        width: 80%;
    }
    .netting-faq .faq-list {
        width: 60%;
    }
}

@media (max-width: 991.98px) {

    .netting-areas {
        min-height: 0;
    }

    .netting-areas .areas-map-img {
        /* position: static; */
        transform: none;
        width: 100%;
        max-width: 600px;
        margin: 0 auto 0;
        /* display: block; */
    }

    .netting-areas .offset-lg-6 {
        margin-left: 0;
    }
}


/* ---------------------------------------------------------------------
   Why-essential related-service buttons
   --------------------------------------------------------------------- */
.netting-related .rel-btn {
    display: inline-block;
    background: #2D2DF3;
    color: #fff;
    border-radius: 8px;
    padding: 12px 22px;
    margin: 0 10px 10px 0;
    font-weight: 600;
    text-decoration: none;
}

.netting-related .rel-btn:hover {
    background: #100FC5;
    color: #fff;
}


/* ---------------------------------------------------------------------
   Netting intro — blue overlay (reused .caption) moved to the top,
   with a GET A FREE QUOTE button; plus the dedicated subtitle
   --------------------------------------------------------------------- */
.services-top-content .netting-caption {
    top: 2rem;
    bottom: auto;
    left: -1rem;
}

.netting-caption .netting-gfq-btn {
    display: inline-block;
    background: #fff;
    color: #100FC5;
    border-radius: 5px;
    padding: 0.75rem 1.4rem;
    font-size: 1.25rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
}

.netting-caption .netting-gfq-btn:hover {
    background: #FFCC00;
    color: #100FC5;
}

/* Intro subtitle ("Professional Bird Control Solutions") */
.netting-subtitle {
    font-size: 1.9rem;
    line-height: 1.1;
    color: #555555;
}


/* ---------------------------------------------------------------------
   Gallery — pill heading (title + subtitle) + bottom gradient note
   --------------------------------------------------------------------- */
.netting-gallery-heading .tagline {
    max-width: 90%;
}

.netting-gallery-heading .gallery-title {
    font-family: 'Anton', sans-serif;
    font-size: 1.875rem;
    line-height: 1.2;
    color: #fff;
}

.netting-gallery-heading .gallery-subtitle {
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
}

.netting-gallery-note {
    max-width: 834px;
    background: linear-gradient(191.85deg, #3C3CFF 13.51%, #2D2DF3 86.19%);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}


/* ---------------------------------------------------------------------
   Mobile gallery slider (.netting-slider) — owned by services-netting.js.
   Self-contained styling (replaces the old shared .ant-pest-slider rules).
   --------------------------------------------------------------------- */
.netting-slider .image-card {
    margin: 0;
}

.netting-slider .image-card img,
.netting-slider img {
    width: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 6px;
}

.netting-slider .slick-dots {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.netting-slider .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    display: inline-flex;
}

.netting-slider .slick-dots li button {
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    border: 0;
    border-radius: 50%;
    background: #2d2df4;
    text-indent: 0;
    transition: background 0.3s ease;
}

.netting-slider .slick-dots li.slick-active button {
    background: #ffcc00;
}

/* 2 items per row inside each slide (tiles fill their column, minimal gutter).
   Slider only shows below 992px, so this is the "2 columns under 992" state. */
.netting-slider .slick-slide {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 -6px;
}

.netting-slider .slick-slide > div {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    margin: 0 0 1rem;
    padding: 0 6px;
}

/* 1 column under 600px so the tiles aren't cramped */
@media (max-width: 599px) {
    .netting-slider .slick-slide > div {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}


/* ---------------------------------------------------------------------
   Netting quote form — light background (replaces the shared blue gradient)
   --------------------------------------------------------------------- */
.netting-form .top-title {
    background-color: #3939fd !important;
}

.netting-form-wrapper {
    background: #f4f4fb;
}

/* Form heading sub-text ("Protect your property with ...") */
.netting-form .netting-form-content {
    font-size: 1.5rem;
    line-height: 1.2;
    color: #555555;
    margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
    .netting-form .netting-form-content {
        font-size: 1.15rem;
    }
}


/* ---------------------------------------------------------------------
   Responsiveness for edited netting sections
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Intro overlay + subtitle */
    .services-top-content .netting-caption {
        top: 1rem;
        left: -1rem;
    }
    .netting-caption .netting-gfq-btn {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
    .netting-subtitle {
        font-size: 1.4rem;
    }

    /* Gallery pill: stop straddling, stack in-flow so long text never overflows */
    .netting-gallery-heading {
        /* position: static !important;
        top: auto;*/
        margin: 0 auto 1.5rem; 
    }
    .netting-gallery-heading .tagline {
        display: block;
        border-radius: 20px;
        max-width: 100%;
    }
    .netting-gallery-heading .gallery-title {
        font-size: 1.3rem;
    }
    .netting-gallery-heading .gallery-subtitle {
        font-size: 0.875rem;
    }
    .netting-gallery-note {
        font-size: 0.9rem;
        padding: 1.1rem 1.25rem;
    }

    /* Solutions cards */
    .netting-solutions .pest-service-ctas .netting-card {
        min-height: 340px;
    }
}

@media (max-width: 575px) {
    .netting-caption .netting-gfq-btn {
        font-size: 0.9rem;
    }
    .netting-areas .areas-list ul {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------------------
   Common Signs — cursor "flashlight" reveal over a dark background
   (Rodent page). The veil hides the image except a spotlight that
   follows the cursor (--mx/--my); hovering a bubble locks it there.
   --------------------------------------------------------------------- */
/* animatable spotlight position so it glides between centre and a bubble */
@property --mx { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }

.netting-signs {
    background: #000040;
    min-height: clamp(560px, 46vw, 820px);
    padding: 3.5rem 0 4rem;
    --mx: 50%;
    --my: 50%;
    transition: --mx 0.45s ease, --my 0.45s ease;
}

.netting-signs-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--signs-bg, none);
    background-size: cover;
    background-position: center;
}

.netting-signs-veil {
    position: absolute;
    inset: 0;
    z-index: 2;              /* above the bubbles so it hides them too */
    pointer-events: none;    /* let hover pass through to the hidden bubbles */
    background: radial-gradient(circle at var(--mx) var(--my),
        rgba(0, 0, 64, 0) 0px,
        rgba(0, 0, 64, 0) 40px,
        rgba(0, 0, 64, 0.9) 140px,
        rgba(0, 0, 64, 1) 200px);
}

@media (min-width: 1024px) {
    .netting-signs-veil {
        background: radial-gradient(circle at var(--mx) var(--my),
            rgba(0, 0, 64, 0) 0px,
            rgba(0, 0, 64, 0) 80px,
            rgba(0, 0, 64, 0.9) 200px,
            rgba(0, 0, 64, 1) 280px);
    }
}

.netting-signs .netting-signs-head {
    position: relative;
    z-index: 3;
}

.netting-signs-title {
    font-size: clamp(2rem, 4.4vw, 5rem);
    line-height: 1.05;
}
.netting-signs-title .text-secondary { color: #FFCC00; }

.netting-signs-stage {
    position: absolute;
    inset: 0;
    z-index: 1;              /* below the veil — bubbles stay hidden until the light hits them */
}

.netting-signs .sign {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: #2e2ef4;
    color: #FFCC00;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.netting-signs .sign .sign-inner {
    padding: 0 12px;
    font-size: clamp(11px, 0.95vw, 18px);
    line-height: 1.25;
}
.netting-signs .sign .txt-white { color: #fff; }
.netting-signs .sign:hover,
.netting-signs .sign.is-active {
    transform: scale(1.08);
    box-shadow: 0 16px 44px rgba(46, 46, 244, 0.55);
}

/* scattered positions (from the 1920 x 898 Figma frame) */
.netting-signs .sign-1 { left: 30%; top: 58%; width: clamp(120px, 9vw, 167px); aspect-ratio: 1; }
.netting-signs .sign-2 { left: 24%; top: 33%; width: clamp(130px, 10vw, 186px); aspect-ratio: 1; }
.netting-signs .sign-3 { left: 58%; top: 29%; width: clamp(140px, 10.8vw, 200px); aspect-ratio: 1; }
.netting-signs .sign-4 { left: 60%; top: 56%; width: clamp(110px, 7.8vw, 145px); aspect-ratio: 1; }
.netting-signs .sign-5 { left: 44%; top: 66%; width: clamp(130px, 10.3vw, 192px); aspect-ratio: 1; }

/* Mobile: no cursor — dim the image uniformly and stack the signs */
/* Mobile: circles get too cramped, so use pills instead. Keep the spotlight
   veil (fixed centre) with the pills hidden UNDER it, arranged around the
   centre rat so the middle stays clear. Works down to 375px. */
@media (max-width: 767px) {
    .netting-signs {
        min-height: clamp(600px, 160vw, 720px);
        padding: 2.5rem 0 3rem;
    }
    .netting-signs-stage {
        position: absolute;   /* under the veil — pills stay hidden in the dark */
        inset: 0;
        z-index: 1;
    }
    .netting-signs .sign {
        position: absolute;
        width: auto;
        max-width: 44%;
        aspect-ratio: auto;
        border-radius: 999px;   /* pill */
        padding: 10px 16px;
        line-height: 1.2;
    }
    .netting-signs .sign .sign-inner { font-size: 11px; padding: 0; }

    /* arranged around the rat, centre left clear */
    .netting-signs .sign-1 { left: 3%;  right: auto; top: 26%; }
    .netting-signs .sign-2 { right: 3%; left: auto;  top: 26%; }
    .netting-signs .sign-3 { left: 3%;  right: auto; top: 66%; }
    .netting-signs .sign-4 { right: 3%; left: auto;  top: 66%; }
    .netting-signs .sign-5 { left: 30%; right: auto; top: 84%; }
}

@media (max-width: 400px) {
    .netting-signs .sign { max-width: 46%; padding: 8px 12px; }
    .netting-signs .sign .sign-inner { font-size: 10px; }
}


/* ---------------------------------------------------------------------
   CTA banner — gradient text-only band (above the quote form)
   --------------------------------------------------------------------- */
.netting-cta-banner {
    background: linear-gradient(214.75deg, #3C3CFF 13.51%, #2D2DF3 86.19%);
}

.netting-cta-banner .netting-cta-title,
.netting-cta-banner .netting-cta-text {
    font-size: clamp(1.6rem, 3.1vw, 3.75rem);
    line-height: 1.08;
}

.netting-cta-banner .netting-cta-text {
    max-width: 1120px;
}

@media (max-width: 767px) {
    .netting-cta-banner .netting-cta-title,
    .netting-cta-banner .netting-cta-text {
        font-size: clamp(1.3rem, 6vw, 2rem);
    }
}


/* ---------------------------------------------------------------------
   Understanding section — blue text section with a gradient callout box
   (Bat page). Reuses .netting-gallery-heading for the straddling pill.
   --------------------------------------------------------------------- */
/* straddle the pill on the section's top edge, then clear it */
.netting-understanding .netting-gallery-heading {
    position: absolute;
    top: -1.75rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}
.netting-understanding .row {
    margin-top: 1.75rem;
}
@media (min-width: 992px) {
    .netting-understanding .row {
        margin-top: 2rem;
    }
}

.netting-understanding .understanding-content {
    font-size: 1rem;
    line-height: 1.5;
}
.netting-understanding .understanding-content ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}
.netting-understanding .understanding-content li {
    margin-bottom: 0.35rem;
}

.netting-understanding .understanding-note {
    background: linear-gradient(227.8deg, #3C3CFF 13.51%, #2D2DF3 86.19%);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* "Important Legal Note" callout inside the Why-essential content (Bat) */
.service-bottom-cta-content .netting-legal-note {
    background: #f4f4fb;
    border-left: 4px solid #100FC5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    color: #555555;
}


/* ---------------------------------------------------------------------
   Possum banner — special treatment so the possum sits on the right,
   clear of the heading, bottom-aligned (1:1 with Figma). Desktop only.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .services-page-46 .inner-page-banner.services-banner .image {
        right: -6%;
        left: auto;
        top: auto;
        bottom: -1.5rem;
        transform: none;
    }
    .services-page-46 .inner-page-banner.services-banner .image img {
        object-fit: cover;
        object-position: 78% bottom;
        height: 600px;
        transform: translateX(150px);
    }
}