/*-----------------------------------------------------------------------------------

  Zovencia Pvt. Ltd. — Brand Colour Layer
  Loaded AFTER style.css. Colour only: no layout, spacing, typography or
  responsiveness is touched here, and every animation of the base template is
  preserved (only its colours are re-pointed).

  Official palette
    Primary Green  #0AEA0A   --z-green
    Dark Green     #023506   --z-green-dark
    Black          #000000   --z-black
    White          #FFFFFF   --z-white

  Accessibility note
    #0AEA0A on white measures 1.64:1 — below WCAG minimums even for display
    text. It is therefore used for fills, borders, underlines, glows, icon
    chips and anything sitting on black, where it reaches 12.8:1. Where green
    must read as *text on a light surface* the layer uses --z-green-readable
    (#05850B, a darker shade of the same hue, 4.8:1) so the brand still reads
    green without failing contrast.

------------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************
01. foundations
02. preloader
03. headings & gradients
04. buttons
05. links
06. navigation
07. cards
08. icons
09. faq / accordion
10. portfolio
11. team
12. testimonials
13. contact
14. footer
15. service detail pages
16. scroll ui
17. homepage featured images
18. blog detail page
19. services intro ("what services we provide you")
**********************************************/


/*----------------------------------------*/
/* 00. brand tokens */
/*----------------------------------------*/


/* Declared here as well as in style.css so this file is SELF-CONTAINED.
   If style.css were served from cache without these tokens, every
   var(--z-*) would resolve to its initial value, background-image would
   compute to `none`, and -webkit-text-fill-color: transparent would then
   render every large heading invisible. Defining them locally makes that
   failure impossible. */

:root {
    --z-green: #0AEA0A;
    --z-green-dark: #023506;
    --z-black: #000000;
    --z-white: #FFFFFF;

    /* mid-greens sampled directly from the Z mark on the branding board */
    --z-green-600: #09D109;
    --z-green-700: #07AA08;
    --z-green-800: #057A07;
    --z-green-900: #034706;

    /* light greens for use on black / dark green surfaces */
    --z-green-100: #C8FFC8;
    --z-green-200: #7DFF7D;

    --z-green-soft: rgba(10, 234, 10, 0.12);
    --z-green-glow: rgba(10, 234, 10, 0.28);
    --z-green-dark-soft: rgba(2, 53, 6, 0.16);

    /* green that still reads as text on a light surface (4.8:1) */
    --z-green-readable: #05850B;

    /* Heading gradients — soft diagonal, left to right.
       Multi-stop through the brand's own mid-greens (sampled from the Z mark)
       so the transition is gradual rather than a two-colour jump. 100deg is a
       gentle top-left -> bottom-right lean; the ramp travels the full width of
       the heading so the colour flows across the whole word rather than
       collecting at one edge. */
    --z-grad-heading: linear-gradient(100deg,
            #000000 0%,
            #011803 14%,
            #022B05 27%,
            #023506 38%,
            #034706 50%,
            #05680A 62%,
            #067F0C 73%,
            #08A50E 84%,
            #09C60D 92%,
            #0AEA0A 100%);

    --z-grad-heading-dark: linear-gradient(100deg,
            #FFFFFF 0%,
            #F2FFF2 14%,
            #DFFFDF 28%,
            #C8FFC8 42%,
            #A6FFA6 56%,
            #7DFF7D 70%,
            #4DF74D 84%,
            #0AEA0A 100%);

    /* Horizontal variant for character-split headings (see section 03).
       No vertical component, so each character's slice depends only on its
       horizontal offset. */
    --z-grad-heading-h: linear-gradient(90deg,
            #000000 0%,
            #011803 14%,
            #022B05 27%,
            #023506 38%,
            #034706 50%,
            #05680A 62%,
            #067F0C 73%,
            #08A50E 84%,
            #09C60D 92%,
            #0AEA0A 100%);

    /* width of one character box, and of the whole wordmark, in em.
       Measured from the rendered hero: 8 characters spanning 5.6em. */
    --z-char-step: 0.70em;
    --z-word-span: 5.6em;

    --z-grad-accent: linear-gradient(96deg, #023506 0%, #0AEA0A 100%);
    --z-grad-mark: linear-gradient(135deg, #0AEA0A 0%, #034706 50%, #0AEA0A 100%);
}


/*----------------------------------------*/
/* 01. foundations */
/*----------------------------------------*/

::selection {
    background-color: var(--z-green);
    color: var(--z-black);
}

::-moz-selection {
    background-color: var(--z-green);
    color: var(--z-black);
}

::-webkit-scrollbar-track {
    background: rgba(2, 53, 6, 0.08);
}

::-webkit-scrollbar-thumb {
    background: var(--z-green-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--z-green);
}

:focus-visible {
    outline: 2px solid var(--z-green);
    outline-offset: 2px;
}

.border-top-bottom,
.has-top-line:before,
.has-bottom-line:after {
    border-color: var(--z-green-dark-soft);
}

.has-left-line:before,
.has-right-line:after {
    background-color: var(--z-green);
}


/*----------------------------------------*/
/* 02. preloader */
/*----------------------------------------*/

.container-preloader .animation-preloader .spinner {
    border-color: var(--z-green-dark-soft);
    border-top-color: var(--z-green);
}

.loader-section {
    background-color: var(--z-white);
}


/*----------------------------------------*/
/* 03. headings & gradients */
/*----------------------------------------*/


/* Large display headings carry a soft diagonal black -> dark green -> bright
   green ramp that flows across the full width of the heading.

   IMPORTANT — why the clip is applied at three different levels:
   In Chrome a *transformed descendant* empties an ancestor's
   `background-clip: text` mask, and GSAP leaves a permanent inline transform
   on whatever it animates. An element's own transform is harmless; only a
   descendant's breaks it. So the ramp has to sit on the deepest element that
   has no transformed descendant, and that level differs per animation:

     unsplit heading   -> the heading element      (39 headings)
     rr_title_anim     -> the animated line div     (8 headings)
     char-anim         -> each character div        (2 headings)

   The `:not(:has(div))` guards make the correct level match automatically the
   moment SplitText injects its markup — no JS and no markup changes. */

@supports (selector(:has(*))) and ((-webkit-background-clip: text) or (background-clip: text)) {

    /* (1) unsplit headings — the heading element holds the text itself, so the
           ramp spans the whole heading.
       (2) rr_title_anim — SplitText re-splits to lines and animates the LINE
           divs. A transform on an element does NOT break that element's own
           clip (only a transformed *descendant* does), so each line carries
           the ramp across its full width. */
    .section-title:not(:has(div)),
    .page-title:not(:has(div)),
    .section-title>div:not(:has(div)),
    .page-title>div:not(:has(div)) {
        background-image: var(--z-grad-heading);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* (3) char-anim (the two "ZOVENCIA" heroes) — SplitText nests
           heading > word > char and transforms every character, so the word
           wrapper cannot hold the ramp and each character has to clip its own
           box. Left to itself every letter would restart the gradient, which
           reads as banding.

           Instead each character is given the SAME oversized ramp — one
           wordmark wide (--z-word-span) — and then shifted left by its own
           index, so character n shows exactly the nth slice of a single
           continuous left-to-right gradient. The offsets are in em, so the
           whole thing scales with font-size across every breakpoint.

           If a character-split heading ever runs longer than the offsets
           defined here, the trailing letters simply hold the final bright
           green rather than breaking. */
    .section-title>div>div:not(:has(div)),
    .page-title>div>div:not(:has(div)) {
        background-image: var(--z-grad-heading-h);
        background-size: var(--z-word-span) 100%;
        background-repeat: no-repeat;
        background-position-x: calc(var(--z-char-index, 0) * (0px - var(--z-char-step)));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .section-title>div>div:nth-child(1) {
        --z-char-index: 0;
    }

    .section-title>div>div:nth-child(2),
    .page-title>div>div:nth-child(2) {
        --z-char-index: 1;
    }

    .section-title>div>div:nth-child(3),
    .page-title>div>div:nth-child(3) {
        --z-char-index: 2;
    }

    .section-title>div>div:nth-child(4),
    .page-title>div>div:nth-child(4) {
        --z-char-index: 3;
    }

    .section-title>div>div:nth-child(5),
    .page-title>div>div:nth-child(5) {
        --z-char-index: 4;
    }

    .section-title>div>div:nth-child(6),
    .page-title>div>div:nth-child(6) {
        --z-char-index: 5;
    }

    .section-title>div>div:nth-child(7),
    .page-title>div>div:nth-child(7) {
        --z-char-index: 6;
    }

    .section-title>div>div:nth-child(8),
    .page-title>div>div:nth-child(8) {
        --z-char-index: 7;
    }

    .section-title>div>div:nth-child(9),
    .page-title>div>div:nth-child(9) {
        --z-char-index: 8;
    }

    .section-title>div>div:nth-child(10),
    .page-title>div>div:nth-child(10) {
        --z-char-index: 9;
    }

    .section-title>div>div:nth-child(11),
    .page-title>div>div:nth-child(11) {
        --z-char-index: 10;
    }

    .section-title>div>div:nth-child(n+12),
    .page-title>div>div:nth-child(n+12) {
        --z-char-index: 11;
    }

    /* links/spans inside an unsplit heading must not opt out of the clip */
    .section-title a,
    .section-title span,
    .page-title a,
    .page-title span {
        color: inherit;
        -webkit-text-fill-color: inherit;
    }

    /* --- dark surfaces: white -> light green -> bright green, never black ---
       This list is the complete set of black-backed sections in the site,
       confirmed by measuring each heading's effective backdrop in-browser.
       .z-on-dark is a spare hook for any dark section added later. */
    .z-on-dark .section-title:not(:has(div)),
    .z-on-dark .page-title:not(:has(div)),
    .z-on-dark .section-title>div:not(:has(div)),
    .z-on-dark .page-title>div:not(:has(div)),
    .z-on-dark .section-title>div>div:not(:has(div)),
    .z-on-dark .page-title>div>div:not(:has(div)),
    .dark .section-title:not(:has(div)),
    .dark .page-title:not(:has(div)),
    .dark .section-title>div:not(:has(div)),
    .dark .page-title>div:not(:has(div)),
    .dark .section-title>div>div:not(:has(div)),
    .dark .page-title>div>div:not(:has(div)),
    .info-area-page-about .section-title:not(:has(div)),
    .info-area-page-about .page-title:not(:has(div)),
    .info-area-page-about .section-title>div:not(:has(div)),
    .info-area-page-about .page-title>div:not(:has(div)),
    .info-area-page-about .section-title>div>div:not(:has(div)),
    .info-area-page-about .page-title>div>div:not(:has(div)),
    .media-area-page-about .section-content .section-title:not(:has(div)),
    .media-area-page-about .section-content .page-title:not(:has(div)),
    .media-area-page-about .section-content .section-title>div:not(:has(div)),
    .media-area-page-about .section-content .page-title>div:not(:has(div)),
    .media-area-page-about .section-content .section-title>div>div:not(:has(div)),
    .media-area-page-about .section-content .page-title>div>div:not(:has(div)),
    .value-area .section-title:not(:has(div)),
    .value-area .page-title:not(:has(div)),
    .value-area .section-title>div:not(:has(div)),
    .value-area .page-title>div:not(:has(div)),
    .value-area .section-title>div>div:not(:has(div)),
    .value-area .page-title>div>div:not(:has(div)),
    .feature-area .section-title:not(:has(div)),
    .feature-area .page-title:not(:has(div)),
    .feature-area .section-title>div:not(:has(div)),
    .feature-area .page-title>div:not(:has(div)),
    .feature-area .section-title>div>div:not(:has(div)),
    .feature-area .page-title>div>div:not(:has(div)),
    .client-area-2 .section-title:not(:has(div)),
    .client-area-2 .page-title:not(:has(div)),
    .client-area-2 .section-title>div:not(:has(div)),
    .client-area-2 .page-title>div:not(:has(div)),
    .client-area-2 .section-title>div>div:not(:has(div)),
    .client-area-2 .page-title>div>div:not(:has(div)),
    .award-area-2 .section-title:not(:has(div)),
    .award-area-2 .page-title:not(:has(div)),
    .award-area-2 .section-title>div:not(:has(div)),
    .award-area-2 .page-title>div:not(:has(div)),
    .award-area-2 .section-title>div>div:not(:has(div)),
    .award-area-2 .page-title>div>div:not(:has(div)),
    .footer-area-2 .section-title:not(:has(div)),
    .footer-area-2 .page-title:not(:has(div)),
    .footer-area-2 .section-title>div:not(:has(div)),
    .footer-area-2 .page-title>div:not(:has(div)),
    .footer-area-2 .section-title>div>div:not(:has(div)),
    .footer-area-2 .page-title>div>div:not(:has(div)),
    .footer-area-inner-page .section-title:not(:has(div)),
    .footer-area-inner-page .page-title:not(:has(div)),
    .footer-area-inner-page .section-title>div:not(:has(div)),
    .footer-area-inner-page .page-title>div:not(:has(div)),
    .footer-area-inner-page .section-title>div>div:not(:has(div)),
    .footer-area-inner-page .page-title>div>div:not(:has(div)) {
        background-image: var(--z-grad-heading-dark);
    }
}


/* Dark panels use DARK GREEN, not flat black. The branding board pairs a
   black card and a #023506 card side by side; the dark green surface is what
   gives the identity its depth, and using it for panels-on-black restores the
   two-tone richness the board has. */

.media-area-page-about .section-content,
.info-area-page-about .funfact-item {
    background-color: var(--z-green-dark);
    border: 1px solid rgba(10, 234, 10, 0.14);
}


/* subtitles sitting on those dark panels */

.info-area-page-about .section-subtitle,
.media-area-page-about .section-subtitle,
.value-area .section-subtitle,
.feature-area .section-subtitle {
    color: var(--z-green);
}


/* small headings */

.section-subtitle {
    color: var(--z-green-dark);
}

.section-subtitle.has-left-line:before,
.section-subtitle.has-right-line:after {
    background-color: var(--z-green);
}


/* body + secondary copy stay black / neutral grey for readability */

.section-content .text,
.text-wrapper .text {
    color: var(--secondary);
}


/*----------------------------------------*/
/* 04. buttons */
/*----------------------------------------*/


/* primary — green fill, black label; hover wipes to dark green + white */

.rr-btn {
    background-color: var(--z-green);
    border-color: var(--z-green);
    color: var(--z-black);
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.rr-btn::before {
    background-color: var(--z-green-dark);
}

.rr-btn .btn-wrap .text-one {
    color: var(--z-black);
}

.rr-btn .btn-wrap .text-two {
    color: var(--z-white);
}

.rr-btn:hover,
.rr-btn:focus {
    border-color: var(--z-green-dark);
    color: var(--z-white);
    box-shadow: 0 8px 24px -10px var(--z-green-glow);
}

.rr-btn:hover .btn-wrap .text-two,
.rr-btn:focus .btn-wrap .text-two {
    color: var(--z-white);
}


/* "Let's Talk" CTA — white-fill hover.

   Scoped to `.header__button` and `.offset-button`, the two wrappers this CTA
   lives in. Checked across every page: all 21 header wrappers and all 22
   offcanvas wrappers contain a plain `.rr-btn` and every one of them is
   labelled "Let's Talk", so these selectors hit exactly this CTA and no other
   button on the site. Nothing about the button's box changes here -- size,
   radius, padding, typography, the `::before` wipe and its 0.5s timing are all
   the template's.

   Resting state is untouched (green fill, black label). Only the hover target
   moves: the rising sheet is white instead of dark green, the label stays
   black, and the edge brightens to full green.

   `.text-two` is given black at rest, not just on `:hover`. It inherits
   `transition: all 0.5s` from the template, so leaving it white and recolouring
   it on hover would animate white -> black *while* the label slides up over
   the white sheet -- the text washes out for the first half of the transition.
   Setting it black at rest makes the colour a non-event and only the slide
   animates. */

.header__button .rr-btn::before,
.offset-button .rr-btn::before {
    background-color: var(--z-white);
}

.header__button .rr-btn .btn-wrap .text-two,
.offset-button .rr-btn .btn-wrap .text-two {
    color: var(--z-black);
}

.header__button .rr-btn:hover,
.header__button .rr-btn:focus,
.offset-button .rr-btn:hover,
.offset-button .rr-btn:focus {
    border-color: var(--z-green);
    color: var(--z-black);
}

.header__button .rr-btn:hover .btn-wrap .text-two,
.header__button .rr-btn:focus .btn-wrap .text-two,
.offset-button .rr-btn:hover .btn-wrap .text-two,
.offset-button .rr-btn:focus .btn-wrap .text-two {
    color: var(--z-black);
}


/* secondary — black surface, white label, green edge + glow on hover */

.rr-btn.btn-border,
.rr-btn.btn-border-white {
    background-color: var(--z-black);
    border-color: var(--z-black);
    color: var(--z-white);
}

.rr-btn.btn-border::before,
.rr-btn.btn-border-white::before {
    background-color: var(--z-green-dark);
}

.rr-btn.btn-border .btn-wrap .text-one,
.rr-btn.btn-border .btn-wrap .text-two,
.rr-btn.btn-border-white .btn-wrap .text-one,
.rr-btn.btn-border-white .btn-wrap .text-two {
    color: var(--z-white);
}

.rr-btn.btn-border:hover,
.rr-btn.btn-border:focus,
.rr-btn.btn-border-white:hover,
.rr-btn.btn-border-white:focus {
    border-color: var(--z-green);
    color: var(--z-white);
    box-shadow: 0 0 0 1px var(--z-green-soft), 0 10px 28px -12px var(--z-green-glow);
}

.rr-btn.btn-border:hover .btn-wrap .text-two,
.rr-btn.btn-border-white:hover .btn-wrap .text-two {
    color: var(--z-white);
}


/* green-wipe variant already provided by the template */

.rr-btn.hover-bg-theme::before {
    background-color: var(--z-green);
}

.rr-btn.hover-bg-theme:hover .btn-wrap .text-two,
.rr-btn.hover-bg-theme:focus .btn-wrap .text-two {
    color: var(--z-black);
}


/* underline + circle buttons */

.rr-btn-underline {
    color: var(--z-black);
    transition: color 0.4s ease;
}

.rr-btn-underline:hover {
    color: var(--z-green-readable);
}

.rr-btn-circle {
    color: var(--z-black);
    border-color: var(--z-green-dark-soft);
}

.rr-btn-circle-dot {
    background-color: var(--z-green);
}

.rr-btn-circle:hover {
    color: var(--z-black);
    border-color: transparent;
}

.rr-btn-group .c {
    color: var(--z-black);
    border-color: var(--z-black);
    transition: all 0.3s ease;
}

.rr-btn-group:hover .c {
    color: var(--z-black);
    background-color: var(--z-green);
    border-color: var(--z-green);
}

.t-btn-play {
    color: var(--z-green-dark);
}

.t-btn-play:hover {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 05. links */
/*----------------------------------------*/

.section-content a:not(.rr-btn):not(.rr-btn-underline):hover,
.text-wrapper a:not(.rr-btn):not(.rr-btn-underline):hover,
.info-text a:hover,
.accordion-body a:hover {
    color: var(--z-green-readable);
    transition: color 0.35s ease;
}


/*----------------------------------------*/
/* 06. navigation */
/*----------------------------------------*/

.main-menu li a {
    color: var(--z-black);
    transition: color 0.35s ease;
}

.main-menu>ul>li:hover>a,
.main-menu>ul>li>a:hover,
.header-area-2 .main-menu li a:hover {
    color: var(--z-green-readable);
}


/* active page — green highlight with underline */

.main-menu>ul>li.active>a,
.main-menu>ul>li.current-menu-item>a {
    color: var(--z-green-readable);
    position: relative;
}

.main-menu>ul>li.active>a::before,
.main-menu>ul>li.current-menu-item>a::before {
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background-image: var(--z-grad-accent);
}


/* dropdown — black panel, primary green on hover (12.8:1 on black) */

.main-menu ul.dp-menu,
.main-menu ul.dp-menu ul,
.main-menu .mega-menu {
    background-color: var(--z-black);
}

.main-menu ul.dp-menu li a,
.main-menu .mega-menu li a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.35s ease;
}

.main-menu ul.dp-menu li:hover>a,
.main-menu ul.dp-menu li a:hover,
.main-menu .mega-menu li a:hover {
    color: var(--z-green);
}


/* scrolled navbar — clean white with a dark green hairline */

.sticky,
.header-area-2 .sticky,
.header-area-2 .transformed {
    background-color: var(--z-white);
    border-bottom: 1px solid var(--z-green-dark-soft);
}

.body-page-inner .header-area-2__inner {
    border-bottom-color: var(--z-green-dark-soft);
}


/* offcanvas / mobile menu */

.side-info {
    background: var(--z-white) none repeat scroll 0 0;
}

/* close button — style.css gives it a black ring; the rest of the panel's
   edges are already green, so the ring was the one element still reading as
   template default. Colour only: the 40px box, the radius and the 90deg
   rotate on hover are untouched. */

.side-info-close {
    color: var(--z-black);
    border-color: var(--z-green);
    transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.side-info-close:hover {
    color: var(--z-black);
    border-color: var(--z-green);
    background-color: var(--z-green);
}

.offset-widget-box .title {
    color: var(--z-green-dark);
}

.offset-widget-box .contact-item span a:hover {
    color: var(--z-green-readable);
}

.offset-widget-box .contact-item .icon {
    border-color: var(--z-green);
    background-color: var(--z-green);
    color: var(--z-black);
}

.mobile-menu.mean-container .mean-nav ul li a {
    color: var(--z-black);
    transition: color 0.35s ease;
}

.mobile-menu.mean-container .mean-nav ul li a:hover,
.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 07. cards */
/*----------------------------------------*/


/* shared: white surface, black text, dark green edge, green accent on hover */

.service-box,
.work-box,
.team-box,
.client-box,
.z-category-card {
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s ease;
}

.z-category-card {
    background: var(--z-white);
    border: 1px solid var(--z-green-dark-soft);
}

.z-category-card:hover {
    border-color: var(--z-green);
    box-shadow: 0 18px 40px -18px rgba(2, 53, 6, 0.35), 0 0 0 1px var(--z-green-soft) !important;
}


/* .z-project-card is owned entirely by assets/css/zovencia-gallery.css --
   card, grid, thumbnail, hover and lightbox all live there. */


/* card titles: black, green on hover */

.service-box .content .title a,
.work-box .title a,
.team-box .name a,
.z-category-card .title a,
.blog .title a,
.post .title a {
    color: var(--z-black);
    transition: color 0.4s ease;
}

.services-wrapper-1 .service-box .content .title a:hover,
.service-box .content .title a:hover,
.work-box .title a:hover,
.team-box .name a:hover,
.blog .title a:hover,
.post .title a:hover {
    color: var(--z-green-readable);
}

.services-wrapper-1 .service-box .service-list li a,
.service-box .service-list li a {
    transition: color 0.35s ease;
}

.services-wrapper-1 .service-box .service-list li a:hover,
.service-box .service-list li a:hover {
    color: var(--z-green-readable);
}

.service-box .count .number {
    color: var(--z-green-dark);
}

.service-box-wrapper:hover .service-box .number {
    color: var(--z-green);
}


/* blog / post meta */

.blog .tag,
.post .tag,
.meta .date,
.meta .tag {
    color: var(--z-green-dark);
}


/*----------------------------------------*/
/* 08. icons */
/*----------------------------------------*/

.contact-item .icon,
.contact-item .icon i,
.info-list li:before,
.work-area-work-page .info-list li:before {
    color: var(--z-green-readable);
}

/* .quote-icon (the glyph image itself) is left on stock styling; only its
   circular .icon badge background is branded — see section 12. */

.social-list a,
.social-links a,
.footer-social a {
    transition: color 0.35s ease;
}

.social-list a:hover,
.social-links a:hover {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 09. faq / accordion */
/*----------------------------------------*/

.accordion-item {
    border-bottom-color: var(--z-green-dark-soft);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.accordion {
    border-top-color: var(--z-green-dark-soft);
}

.accordion-item:hover {
    background-color: rgba(10, 234, 10, 0.045);
}

.accordion-button {
    color: var(--z-black);
    transition: color 0.4s ease;
}

.accordion-button:hover {
    color: var(--z-green-readable);
}


/* open state — green heading, green number, green edge */

.accordion-item:has(.accordion-button:not(.collapsed)) {
    border-bottom-color: var(--z-green);
    background-color: rgba(10, 234, 10, 0.045);
}

.accordion-button:not(.collapsed) {
    color: var(--z-green-readable);
}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
    color: var(--z-green-readable);
}

.faq-area-faq-page .accordion-item:has(.accordion-button:not(.collapsed)):before {
    color: var(--z-green-readable);
}

.accordion-body {
    color: var(--secondary);
}


/*----------------------------------------*/
/* 10. portfolio */
/*----------------------------------------*/


/* category label + filters */

.z-service-label {
    color: var(--z-green-readable);
}


/* "view portfolio" affordance */

.z-btn-view {
    color: var(--z-black);
}

.z-category-card:hover .z-btn-view,
.z-btn-view:hover {
    color: var(--z-green-readable);
}


/* slider indicators */

.portfolio .swiper-pagination-bullet-active::after,
.portfolio-2 .swiper-pagination-bullet-active::after,
.portfolio-3 .swiper-pagination-bullet-active::after,
.portfolio-4 .swiper-pagination-bullet-active::after,
.portfolio-5 .swiper-pagination-bullet-active::after {
    background-color: var(--z-green);
}

.pagination-with-dash .swiper-pagination-current {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 11. team */
/*----------------------------------------*/

.team-box .thumb {
    transition: box-shadow 0.45s ease;
}

/* hover glow: the depth shadow and hairline are unchanged; the third layer is
   the new soft green bloom, using the existing --z-green-glow token so it
   stays on brand rather than introducing a new colour. */

.team-box:hover .thumb {
    box-shadow:
        0 18px 38px -20px rgba(2, 53, 6, 0.45),
        0 0 0 1px var(--z-green-soft),
        0 0 22px 0 var(--z-green-glow);
}

.team-box .post {
    color: var(--z-green-dark);
}


/* --- team card grid: centre any incomplete row -------------------------
   style.css lays these out as `grid-template-columns: repeat(4, 1fr)`, and a
   grid cannot centre a short final row -- with 7 members the second row of 3
   sits hard left. Flex wrap + justify-content: center does centre it, so the
   grid is restated as flex with the column widths worked out by hand so the
   cards stay exactly the size they were:

     1fr in a 4-column grid with a 20px column-gap == (100% - 3*20px) / 4

   `gap: 40px 20px` is inherited from style.css and applies to flex too, so
   spacing between every card is untouched. The 991px / 575px breakpoints
   mirror style.css exactly, so responsive behaviour is unchanged -- at 2
   columns the 7th card now centres as well, and at 1 column centring is a
   no-op. Selectors match style.css's specificity (0,2,0) and this file loads
   after it, so these win on order. */

.team-area .team-wrapper,
.team-area-about-page .team-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.team-area .team-wrapper > .team-box,
.team-area-about-page .team-wrapper > .team-box {
    flex: 0 0 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
    min-width: 0;
}

@media only screen and (max-width: 991px) {

    .team-area .team-wrapper > .team-box,
    .team-area-about-page .team-wrapper > .team-box {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 575px) {

    .team-area .team-wrapper > .team-box,
    .team-area-about-page .team-wrapper > .team-box {
        flex-basis: 100%;
        max-width: 100%;
    }
}


/* --- team card image zoom ----------------------------------------------
   One subtle, uniform zoom for every team grid card. Two sitewide rules had
   to be beaten to get here: zovencia-motion.css forces
   `transition: transform 1.1s !important` on `.team-box .thumb img` (0,2,1),
   and style.css sets `scale(1.1)` on `.team-area .team-box:hover .thumb img`
   (0,4,1). The transition selector below is (0,3,1) + !important so it
   outranks motion.css's !important on specificity rather than order; the
   hover selector ties style.css at (0,4,1) and wins on file order.

   scale3d + backface-visibility keep the zoom on the compositor, which is
   what removes the edge shimmer the old 1.1x scale showed. Containment is
   already handled by `.thumb { overflow: hidden }` in style.css.

   Deliberately NOT !important on the hover transform: motion.css's
   prefers-reduced-motion block sets `transform: none !important` and must
   keep winning. */

.team-area .team-box .thumb img,
.team-area-about-page .team-box .thumb img {
    transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.team-area .team-box:hover .thumb img,
.team-area-about-page .team-box:hover .thumb img {
    transform: scale3d(1.06, 1.06, 1);
}


/* --- round list thumbnails: landscape source photos --------------------
   style.css gives `.team-list-area .team-box .thumb img` only `width: 100%`
   inside a 100x100 (80x80 under 991px) `border-radius: 50%` box. A square
   source therefore fills the circle exactly, which is what every other
   member's photo is. Sanah's (1146x912) and Momina's (1023x882) are
   landscape, so they resolve to 100x80 pinned to the top of the box and the
   bottom of the circle is left empty -- it reads as the photo being sliced
   off below the shoulders.

   height + object-fit: cover lets the photo fill the circle at its full
   vertical extent (nothing is trimmed top or bottom -- cover only overflows
   horizontally here, ~26px for Sanah and ~16px for Momina), so more of the
   lower portion shows, not less. object-position stays at the 50% 50%
   default: both faces sit within ~5% of the source's horizontal centre, so
   the centre crop already keeps them centred.

   Scoped by filename so it reaches exactly these two members -- every other
   card keeps the stock `width: 100%` rule. Circle size, border-radius, the
   green hover glow, the translateX row hover and the shared image
   transition all live on other selectors and are untouched. */

.team-list-area .team-box .thumb img[src$="sanah-khan.jpg"],
.team-list-area .team-box .thumb img[src$="momina-khan.jpg"] {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}


/* --- team card hover overlay ------------------------------------------
   Replaces the magic-cursor "View Details" disc that used to sit on these
   cards. The overlay is a real element inside each card's link, so nothing
   follows the mouse and no global cursor state is involved -- the Work
   section's own `-red` cursor is untouched and still owns magiccursor.js.

   `.thumb` is already `position: relative; overflow: hidden` in style.css, so
   inset:0 covers exactly the image box and the 1.06x zoom stays clipped
   behind it. pointer-events:none keeps the whole thumb clickable as one link.

   Opacity and transform are the only animated properties (both compositor
   friendly), on the same 400ms curve as the image zoom so the overlay, the
   label and the zoom all land together. */

.team-area .team-box .thumb .team-overlay,
.team-area-about-page .team-box .thumb .team-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.team-area .team-box:hover .thumb .team-overlay,
.team-area-about-page .team-box:hover .thumb .team-overlay {
    opacity: 1;
}


/* label: inherits the site's body face, green underline for the brand accent */

.team-area .team-box .thumb .team-overlay__label,
.team-area-about-page .team-box .thumb .team-overlay__label {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--z-green);
    transform: translate3d(0, 10px, 0);
    transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.team-area .team-box:hover .thumb .team-overlay__label,
.team-area-about-page .team-box:hover .thumb .team-overlay__label {
    transform: translate3d(0, 0, 0);
}


/* reduced motion: the fade stays (it carries the meaning), the slide goes */

@media (prefers-reduced-motion: reduce) {

    .team-area .team-box .thumb .team-overlay__label,
    .team-area-about-page .team-box .thumb .team-overlay__label,
    .team-area .team-box:hover .thumb .team-overlay__label,
    .team-area-about-page .team-box:hover .thumb .team-overlay__label {
        transform: none !important;
    }
}

.team-list-area .team-box:hover .name {
    color: var(--z-green-readable);
}

.team-list-area .team-box:hover .t-btn-normal {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 12. testimonials — green branding (size-neutral) */
/*----------------------------------------*/


/* The testimonial section still runs a looping Swiper with autoplay
   (`.moving-testimonial-slider`: loop:true, slidesPerView:4) that measures
   each `.testimonial-item`'s box via offsetWidth/getBoundingClientRect to do
   its loop maths. Earlier attempts to brand this section added a real
   `border`, which changed that measured box size and made the carousel
   judder every loop cycle. Every rule below is restricted to
   background-color, background-image, box-shadow and color — none of which
   participate in the box model — plus absolutely-positioned pseudo-elements,
   so card width/height/padding/margin/border-radius stay pixel-identical to
   before and the loop is unaffected. It also stays out of the motion layer,
   same as before (`.testimonial-area` / `.testimonial-item` are still
   context-skips in zovencia-motion.js) — no new scroll or hover animation is
   introduced here, only colour. */

.testimonial-area {
    --primary: #0A140B;
    --secondary: #9CB79C;
    --border: rgba(10, 234, 10, 0.14);
    --bg: #0A140B;
    --theme: #0AEA0A;
    --black: #0F1C10;
    --black-2: #9CB79C;
    --white: #FFFFFF;
    --white-2: #9CB79C;
    --action: #0AEA0A;
}

/* ambient section glow — decorative, sits behind the content, clipped to the
   section so it can never affect layout or bleed into neighbouring sections */
.testimonial-area {
    position: relative;
    overflow: hidden;
}

.testimonial-area::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 60%;
    background: radial-gradient(60% 100% at 30% 0%, var(--z-green-glow), transparent 70%);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.testimonial-area .container,
.testimonial-area .testimonial-wrapper-box {
    position: relative;
    z-index: 1;
}

/* opt the testimonial heading out of the gradient treatment so it falls back
   to the template's own `color: #FCF7F3` */

.testimonial-area .section-title,
.testimonial-area .section-title div,
.testimonial-area .page-title,
.testimonial-area .page-title div {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}


/* card surfaces — background-color/background-image + box-shadow only, never
   `border`, so each slide's measured box size is untouched */

.testimonial-area .testimonial-item {
    position: relative;
    background-color: #101C11;
    background-image: radial-gradient(120% 140% at 100% 0%, rgba(10, 234, 10, 0.09), transparent 60%);
    box-shadow: inset 0 0 0 1px rgba(10, 234, 10, 0.14), 0 20px 50px -32px rgba(10, 234, 10, 0.35);
}

.testimonial-area .testimonial-item.light {
    background-color: #F4FBF3;
    background-image: radial-gradient(120% 140% at 100% 0%, rgba(10, 234, 10, 0.07), transparent 60%);
    box-shadow: inset 0 0 0 1px rgba(2, 53, 6, 0.10), 0 20px 50px -34px rgba(10, 234, 10, 0.28);
}

/* thin accent line — absolutely positioned so it adds no height to the card */
.testimonial-slider-section .moving-testimonial-slider .testimonial-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    width: 28px;
    height: 2px;
    background: var(--z-grad-accent);
    border-radius: 2px;
}

@media only screen and (max-width: 1919px) {
    .testimonial-slider-section .moving-testimonial-slider .testimonial-item::before {
        left: 22px;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial-slider-section .moving-testimonial-slider .testimonial-item::before {
        left: 16px;
        width: 22px;
    }
}

.testimonial-area .testimonial-item .name {
    color: #F2FFF0;
}

.testimonial-area .testimonial-item.light .name {
    color: var(--z-green-dark);
}

.testimonial-area .testimonial-item .post {
    color: rgba(200, 255, 200, 0.5);
}

.testimonial-area .testimonial-item.light .post {
    color: rgba(2, 53, 6, 0.55);
}

/* quote-icon badge — background-color/box-shadow only, width/height untouched */

.testimonial-area .testimonial-item .icon {
    background-color: var(--z-green-100);
    box-shadow: 0 0 0 1px var(--z-green-soft);
}

.testimonial-area .testimonial-item.light .icon {
    background-color: var(--z-green-dark);
    box-shadow: 0 0 0 1px var(--z-green-dark-soft);
}


/*----------------------------------------*/
/* 13. contact */
/*----------------------------------------*/

.contact-area-contact-page .contact-item .icon,
.contact-area-contact-page .contact-item .icon i {
    color: var(--z-green-dark);
}

.contact-area-contact-page .contact-item .text a,
.info-link a {
    color: var(--z-black);
    transition: color 0.35s ease;
}

.contact-area-contact-page .contact-item .text a:hover,
.info-link a:hover {
    color: var(--z-green-readable);
}

.contact-form input,
.contact-form textarea,
.subscribe-form .input-field {
    border-color: var(--z-green-dark-soft);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.subscribe-form .input-field:focus-within {
    border-color: var(--z-green);
    box-shadow: 0 0 0 3px var(--z-green-soft);
}


/*----------------------------------------*/
/* 14. footer */
/*----------------------------------------*/

.footer-area-2,
.footer-area-inner-page {
    background-color: var(--z-black);
    border-top: 1px solid rgba(10, 234, 10, 0.18);
}


/* headings */

.footer-area-2 .footer-widget-box .title,
.footer-area-inner-page .footer-widget-box .title {
    color: green}


/* nav links — white, primary green on hover */

.footer-area-2 .footer-nav-list li,
.footer-area-inner-page .footer-nav-list li,
.footer-area-2 .footer-nav-list li a,
.footer-area-inner-page .footer-nav-list li a {
    color: var(--z-white);
}

.footer-area-2 .footer-nav-list li a,
.footer-area-inner-page .footer-nav-list li a {
    transition: color 0.35s ease, opacity 0.5s ease;
}

.footer-area-2 .footer-nav-list li a:hover,
.footer-area-inner-page .footer-nav-list li a:hover {
    color: var(--z-green);
    opacity: 1;
}


/* intro copy + e-mail link */

.footer-area-inner-page .info-text .text {
    color: rgba(255, 255, 255, 0.72);
}

.footer-area-inner-page .info-link a {
    color: var(--z-white);
}

.footer-area-inner-page .info-link a:hover {
    color: var(--z-green);
}


/* subscribe form on black */

.footer-area-2 .subscribe-form .input-field {
    border-color: rgba(255, 255, 255, 0.2);
}

.footer-area-2 .subscribe-form .input-field input {
    color: var(--z-white);
}

.footer-area-2 .subscribe-form .input-field input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.footer-area-2 .subscription-text .text,
.footer-area-2 .subscription-text .text a {
    color: rgba(255, 255, 255, 0.72);
}

.footer-area-2 .subscription-text .text a:hover {
    color: var(--z-green);
}


/* copyright */

.footer-area-2 .copyright-area-inner,
.footer-area-inner-page .copyright-area-inner {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.footer-area-2 .copyright-text .text,
.footer-area-inner-page .copyright-text .text {
    color: rgba(255, 255, 255, 0.75);
}

.footer-area-2 .copyright-text .text a,
.footer-area-inner-page .copyright-text .text a {
    color: var(--z-white);
    transition: color 0.35s ease;
}

.footer-area-2 .copyright-text .text a:hover,
.footer-area-inner-page .copyright-text .text a:hover {
    color: var(--z-green);
}


/*----------------------------------------*/
/* 15. service detail pages */
/*----------------------------------------*/


/* hero strip: service name + "next service" link */

.hero-area-service-details .section-subtitle,
.service-details-nav .prev-item a,
.service-details-nav .next-item a {
    color: var(--z-green-dark);
    transition: color 0.35s ease;
}

.service-details-nav .prev-item a:hover,
.service-details-nav .next-item a:hover,
.next-item a:hover,
.prev-item a:hover {
    color: var(--z-green-readable);
}


/* "How it works" — big step counter and per-step numbers.
   Selectors mirror the base template's own specificity (0,3,0) so they win. */

.approach-area-service-details-page .approach-box .number,
.approach-area .approach-box .number {
    color: var(--z-green-readable);
}

.approach-area-service-details-page .approach-box,
.approach-area .approach-box {
    border-color: var(--z-green-dark-soft);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.approach-area-service-details-page .approach-box:hover,
.approach-area .approach-box:hover {
    background-color: rgba(10, 234, 10, 0.045);
    border-color: var(--z-green);
}

.approach-area-service-details-page .approach-box .title,
.approach-area .approach-box .title {
    color: var(--z-black);
    transition: color 0.4s ease;
}

.approach-area-service-details-page .approach-box:hover .title,
.approach-area .approach-box:hover .title {
    color: var(--z-green-readable);
}


/* the oversized step counter is display type — give it the heading gradient */

@supports (selector(:has(*))) and ((-webkit-background-clip: text) or (background-clip: text)) {

    .approach-wrapper-box .steps:not(:has(div)),
    .approach-wrapper-box .steps div:not(:has(div)) {
        background-image: var(--z-grad-heading);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}


/* feature grid (black section) — bright green reads at 12.8:1 here */

.feature-area .feature-box .title {
    color: var(--z-white);
    transition: color 0.4s ease;
}

.feature-area .feature-box:hover .title {
    color: var(--z-green);
}

.feature-area .feature-box .thumb {
    transition: filter 0.45s ease;
}

.feature-area .feature-box:hover .thumb {
    filter: drop-shadow(0 0 14px var(--z-green-glow));
}

.feature-area .feature-box:before {
    background-color: rgba(10, 234, 10, 0.18);
}


/* benefits / value list (black section) */

.value-area .value-box .number {
    color: var(--z-green);
}

.value-area .value-box .text {
    color: rgba(255, 255, 255, 0.72);
}

.value-area .value-box:hover .number {
    color: var(--z-white);
}


/* service gallery */

.gallery-area-service .thumb {
    border: 1px solid var(--z-green-dark-soft);
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.gallery-area-service .thumb:hover {
    border-color: var(--z-green);
    box-shadow: 0 16px 40px -20px var(--z-green-glow);
}


/*----------------------------------------*/
/* 16. scroll ui */
/*----------------------------------------*/

.progress-wrap.active-progress {
    background-color: var(--z-black);
    mix-blend-mode: normal;
    box-shadow: 0 0 0 1px var(--z-green-soft);
}

.progress-wrap::after {
    color: var(--z-green);
}

.progress-wrap svg path {
    fill: none;
    stroke: rgba(10, 234, 10, 0.2);
}

.progress-wrap svg.progress-circle path {
    fill: none;
    stroke: var(--z-green);
    stroke-width: 4;
}

.scroll-top {
    background: var(--z-green);
}

.go-top-writer:hover {
    color: var(--z-green-readable);
}


/*----------------------------------------*/
/* 17. homepage featured images */
/*----------------------------------------*/

/* Scoped to `.hero-area-2` / `.service-area-2`, both unique to index.html, so
   these rules cannot leak onto services.html or any other page that reuses
   `.hero-thumb` / `.thumb.parallax-view` class names.

   Both the hero wrapper and its image already carry active GSAP transforms
   (`.hero-thumb` is a `.fade-anim` scroll-reveal target; the `<img>` itself
   has `data-speed` for the parallax layer) and GSAP's inline `style.transform`
   always outranks a stylesheet `:hover { transform }` rule without
   `!important`, so a CSS hover-scale here would silently never apply and risks
   fighting the parallax update on the next scroll tick. Glow is therefore
   added via `box-shadow` only (never `transform`), which paints outside the
   box without touching layout or competing with GSAP for the transform
   property — image dimensions, aspect ratio and border-radius stay exactly
   as they were. */

.hero-area-2 .hero-thumb {
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.14), 0 30px 80px -24px rgba(10, 234, 10, 0.35);
    transition: box-shadow 0.4s ease;
}

.hero-area-2 .hero-thumb:hover {
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.22), 0 30px 90px -18px rgba(10, 234, 10, 0.5);
}

/* The `.thumb` wrapper itself carries no GSAP transform (only its `<img>`
   child does, via `data-speed`), so it's safe to scale on hover here. */

.service-area-2 .thumb.parallax-view {
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.12), 0 20px 55px -18px rgba(10, 234, 10, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-area-2 .thumb.parallax-view:hover {
    transform: scale(1.025);
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.2), 0 25px 70px -14px rgba(10, 234, 10, 0.42);
}

@media (hover: none) {

    .hero-area-2 .hero-thumb:hover,
    .service-area-2 .thumb.parallax-view:hover {
        transform: none;
        box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.14), 0 20px 55px -18px rgba(10, 234, 10, 0.3);
    }
}


/*----------------------------------------*/
/* 18. blog detail page */
/*----------------------------------------*/

/* .blog-details-area / .blog-area-3 are unique to blog-details.html, so
   everything below is scoped to that page only. The main #blog-title (h2)
   already gets the sitewide gradient treatment via the generic
   `.section-title:not(:has(div))` rule (verified: no <div> children even
   after JS sets textContent, so it correctly matches the "unsplit heading"
   case) -- it is deliberately left untouched here. The hero/thumb/gallery
   images carry `data-speed` (GSAP parallax owns their transform), so per
   the transform-ownership constraint, they get glow via box-shadow only,
   never a hover transform. */

/* section subheadings inside the article body (h3: "The Power of
   Intelligent Automation" etc.) -- plain black in the stock template */

.blog-details-area .section-details .details-info .title {
    color: var(--z-green-dark);
    position: relative;
    padding-left: 22px;
}

.blog-details-area .section-details .details-info .title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 4px;
    height: 0.85em;
    background: var(--z-grad-accent);
    border-radius: 2px;
}

/* pull-quote paragraph (always the testimonial-style quote in the data) */

.blog-details-area .section-details .blog-quote {
    position: relative;
    padding: 22px 28px 22px 30px;
    background-color: var(--z-green-soft);
    border-radius: 4px;
    font-style: italic;
    color: var(--z-black);
}

.blog-details-area .section-details .blog-quote:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--z-grad-accent);
    border-radius: 3px;
}

/* feature-list bullets */

.blog-details-area .section-details .feature-list li:before {
    background-color: var(--z-green);
}

/* tag pills */

.blog-details-area .section-details .tags .tag {
    border-color: var(--z-green-dark-soft);
    color: var(--z-green-dark);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.blog-details-area .section-details .tags .tag:hover {
    background-color: var(--z-green-soft);
    border-color: var(--z-green);
    color: var(--z-green-readable);
}

/* featured images -- soft green glow, box-shadow only (never transform,
   these all carry data-speed). The hero image is full-bleed (no max-width,
   sits outside .container, touches the viewport edges) so it gets glow only
   -- a border-radius there would show as a broken-looking rounded notch at
   the screen edge instead of a corner. */

.blog-details-area .image-wrapper img {
    box-shadow: 0 -20px 50px -20px rgba(10, 234, 10, 0.3), 0 20px 50px -20px rgba(10, 234, 10, 0.3);
}

.blog-details-area .section-details .thumb-text-wrapper .thumb img,
.blog-details-area .section-details .gallery-wrapper img {
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.12), 0 20px 55px -22px rgba(10, 234, 10, 0.3);
}

/* related-post card thumbnails -- the stock scale(1.1) hover-zoom on
   `.thumb img` is untouched; this only adds a glow on the same hover,
   scoped to `.thumb` (not the img) so it isn't clipped by the img's own
   radius/overflow */

.blog-area-3 .blog .thumb {
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

.blog-area-3 .blog:hover .thumb {
    box-shadow: 0 0 0 1px rgba(10, 234, 10, 0.16), 0 18px 45px -20px rgba(10, 234, 10, 0.4);
}

/* divider line between related cards -- var(--border) is already a soft
   green tint sitewide; this makes the accent a little more deliberate */

.blog-area-3 .blog:before {
    background: var(--z-grad-accent);
    opacity: 0.35;
}

/* title arrow badge -- swap the stock black hover-fill for green */

.blog-area-3 .blog:hover .title .arrow {
    background-color: var(--z-green);
    border-color: var(--z-green);
}

.blog-area-3 .blog:hover .title .arrow svg * {
    fill: var(--z-black);
}

/* comment form -- green focus state on the underline inputs */

.blog-details-area .section-details .comment-formfield input:focus,
.blog-details-area .section-details .comment-formfield select:focus {
    border-color: var(--z-green);
}


/*----------------------------------------*/
/* 19. services intro ("what services we provide you") */
/*----------------------------------------*/

/* The pinned 100vh heading section. It was the one block the brand layer
   never reached -- the service cards directly below it have been green since
   section 07, so this read as a black hole between two branded sections.

   How the stock animation works (main.js, ".actually-area" timeline): the
   heading is split into lines by SplitText, each line div carries a
   two-colour `linear-gradient(to right, var(--primary) 50%, #CDC9C6 50%)` at
   `background-size: 200% 100%` clipped to the text, and the scrub tweens
   `backgroundPositionX` 100% -> 0 so the hard 50% edge wipes colour across
   the glyphs. Then the title scales to 40 and GSAP writes
   `background-color: #111111` inline on the section.

   Everything below repaints that mechanism without touching it. No timing,
   easing, trigger, transform or `background-position` value is changed --
   only `background-image` (which the tween never reads; it only moves the
   position) and purely decorative paint. `--primary` resolves to #000000 in
   the light theme, so the "filled" state was literally black text: that is
   the "dark and plain" being reported, and it's fixed at the source. */


/* the wipe itself. Same geometry as stock -- the ramp still has to live
   entirely in the first 50% of the image, because at
   `background-position-x: 0` the visible window maps to gradient 0%-50%, and
   the hard stop at 50% is the wipe edge.

   Stops are the Z mark's own ramp (see --z-grad-heading) with its near-black
   stops dropped and the floor raised to #034706, weighted so mid and bright
   greens hold the middle of the line. Two reasons the floor matters. On the
   light background a ramp that opens near black just reproduces the "dark and
   plain" complaint -- the heading has to read green from its first character,
   not fade up out of black. And GSAP writes `background-color: #111111` on
   this section at the end of the timeline WITHOUT adding a `.dark` class, so
   the light ramp is also what renders against the black: anything below about
   #034706 sinks into it and the line half-disappears.

   #0AEA0A sits on the 50% edge, so the brightest green is always the leading
   edge of the wipe as it travels -- the highlight rides the existing
   animation rather than being a second effect layered on top of it.

   Contrast tradeoff, stated rather than silently avoided: the tail of the
   line reaches #0AEA0A, which is 1.64:1 on the light background. That is
   deliberate and consistent with every other display heading on the site
   (--z-grad-heading ends on the same green); it is display type at ~60px+,
   and the brand reads flat when the green is held back to a tip. Small green
   text on light surfaces still uses --z-green-readable elsewhere. */

/* The ramp is hoisted into a custom property because two different elements
   have to be able to paint it. During the wipe each SplitText line carries its
   own copy (that is what lets the three lines fill one after another); once the
   wipe is finished main.js collapses the three per-line text masks into a
   single one on `.section-title` for the zoom -- see the note by
   `maskCollapseAt` there. Same declaration, same box width (the line divs are
   full-width blocks inside the 716px heading), so the collapsed state paints
   the identical ramp; verified by pixel-diff at max delta 1/255. */

.actually-area {
    --z-heading-ramp: linear-gradient(to right,
            #034706 0%,
            #05680A 9%,
            #067F0C 17%,
            #08A50E 27%,
            #09C60D 37%,
            #0AEA0A 46%,
            #0AEA0A 50%,
            #C7D3C7 50%);
}

.actually-area .t_line>div {
    background-image: var(--z-heading-ramp);
}

/* theme-toggle parity only, mirroring style.css's own `.dark` override. Note
   this is NOT the state the section ends the timeline in -- GSAP's inline
   #111111 does not add `.dark`, which is why the ramp above has to carry the
   black hand-off itself. */

.dark .actually-area {
    --z-heading-ramp: linear-gradient(to right,
            #057A07 0%,
            #07AA08 12%,
            #09D109 26%,
            #0AEA0A 38%,
            #7DFF7D 46%,
            #C8FFC8 50%,
            #2C382D 50%);
}

/* kept at this selector strength on purpose: style.css also ships a
   `.dark .actually-area .t_line>div` background-image, and a plain
   `.actually-area .t_line>div` rule here would lose to it on specificity in
   dark mode. */

.dark .actually-area .t_line>div {
    background-image: var(--z-heading-ramp);
}


/* soft bloom on the animated lines. text-shadow paints from glyph geometry,
   not from fill colour, so it survives `color: transparent` +
   `background-clip: text` and haloes the letters themselves. It is deliberately
   uniform across the line rather than tied to the wipe: the shadow belongs to
   the element GSAP is animating, and anything that tracked the wipe edge would
   mean adding a second tween and changing the animation. Kept to one layer at
   low alpha so the scrubbed repaint during the pin stays cheap. */

.actually-area .t_line>div {
    text-shadow: 0 0 24px rgba(10, 234, 10, 0.2);
}


/* ambient section glow. `inset: 0` means the pseudo-element can never exceed
   the section box, so no `overflow: hidden` is needed to contain it -- which
   matters, because the title scales to 40x on its way out and clipping this
   section would cut that off. Backgrounds paint below pseudo-elements, so the
   glow also survives the inline `background-color: #111111` GSAP writes at the
   end of the timeline: the black hand-off into the service cards keeps a green
   cast instead of going flat.

   Two layers: a halo centred behind the heading, and a wider rise from the
   bottom edge that carries the green down into the services section. Alphas
   are low enough to read as a mint tint over the light background at the start
   of the pin and as a glow over the black at the end. */

.actually-area {
    position: relative;
}

.actually-area::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(46% 42% at 50% 44%, rgba(10, 234, 10, 0.13), transparent 70%),
        radial-gradient(80% 55% at 50% 108%, rgba(10, 234, 10, 0.08), transparent 72%);
}

/* already `position: relative` in style.css; the explicit z-index just keeps
   the heading above the glow regardless of source order */

.actually-area-inner {
    z-index: 1;
}