/* 
   ==========================================================================
   High-Fidelity Safe Override Stylesheet — Green Oaks Landscape
   ========================================================================== 
*/

/* MonoFont captcha font loading */
@font-face {
    font-family: 'MonoFont';
    src: url('../fonts/monofont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Captcha font utility class */
.captcha-font {
    font-family: 'MonoFont', monospace !important;
}

/* Responsive form styling */
@media (max-width: 600px) {
    .form-row-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .captcha-flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #captchaImage {
        width: 100% !important;
        height: 50px !important;
    }
}

/* Explicit form input placeholder styling */
#premiumContactForm input::placeholder,
#premiumContactForm textarea::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

#premiumContactForm input,
#premiumContactForm textarea {
    color: #111111 !important;
}

/* 1. Consent / cookie banners — always hidden (these were the real blockers). */
.consent-studio, .consent-banner, .cookie-banner, .consent-buttons {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* 1b. Preloader = the reference home-page entrance reveal (4 white columns that
   GSAP wipes upward, staggered, to uncover the hero). Restored so the welcome
   animation matches the reference site. It only exists on the home page. */
body:not(.home) .preloader {
    display: none !important;
}
.home .preloader {
    pointer-events: none;          /* never blocks clicks/scroll */
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home .preloader .column {
    background-color: #ffffff;
    height: 100%;
    /* CSS-only safety net: if GSAP fails to load, the columns still slide away
       (staggered) so the hero is never permanently covered. GSAP overrides this
       inline when it runs, so there is no conflict on the happy path. */
    animation: v7-preloader-reveal 1.25s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.home .preloader .column:nth-child(4) { animation-delay: 0s; }
.home .preloader .column:nth-child(3) { animation-delay: 0.2s; }
.home .preloader .column:nth-child(2) { animation-delay: 0.4s; }
.home .preloader .column:nth-child(1) { animation-delay: 0.6s; }
@keyframes v7-preloader-reveal {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

/* 2. Hero Background Image Smooth Transition Styles */
.background img {
    line-height: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    z-index: 1;
}
.background img:not(.visible) {
    opacity: 0;
    z-index: 0;
}

/* 3. Branded Header Logo Layout & Typography (Prevents wrapping & vertical stretching) */
#header_logo {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    vertical-align: middle !important;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important; /* Premium dark gray for light inner pages */
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;      /* Never let theme entrance animations leave it faded */
    visibility: visible !important;
    /* CRITICAL: the mega-menu stylesheet sets `mix-blend-mode: difference` on the logo.
       Against the dark home hero that looks fine, but against the white inner-page
       background `difference` blends solid black toward invisibility (the half-faded
       look). Force normal blending on inner pages so the dark logo stays solid black. */
    mix-blend-mode: normal !important;
}
.home #header_logo {
    color: #ffffff !important; /* White text for home page overlay */
    opacity: 1 !important;
    visibility: visible !important;
    /* Home sits over the dark hero — keep difference blending so white reads correctly. */
    mix-blend-mode: difference !important;
}
#header_logo:hover {
    color: #4c800d !important;
    text-decoration: none !important;
}

/* 4. Navigation Menu Toggle Button & Contrast Reset */
.menu_button, .menu-toggle {
    display: flex !important;
    background-color: transparent !important;
    border: none !important;
    z-index: 99999 !important; /* Ensure the menu button is always clickable above everything */
}

/* 5. Clean layout fixes — Prevent horizontal scrollbars caused by overflow.
   IMPORTANT: use `overflow-x: clip`, NOT `hidden`. `overflow-x: hidden` makes html/body a
   scroll container, which GLOBALLY BREAKS `position: sticky` (the sticky scroll effect).
   `clip` hides horizontal overflow without creating a scroll container, so sticky keeps
   working while horizontal scrollbars are still suppressed. */
html, body {
    overflow-x: clip !important;
}

/* 5b. SplitText masked-heading anti-clip (applies to EVERY page/heading type).
   The reference theme animates headings with GSAP SplitText using `mask: "lines"`,
   which wraps each line in a div with `overflow: clip` sized to the line-box. When
   the line-height is even slightly tight, the clip shears the tops of capitals and
   the bottoms of descenders (the "words not fully visible" report). The mirror also
   bakes these inline styles in, so we must override with !important.

   Fix: (1) give all headings a comfortable line-height, and (2) neutralise the clip
   on the SplitText line-wrappers so glyphs are never trimmed. The words already
   carry their final opacity/transform inline, so removing the clip does not change
   the resting layout — it only lets the full glyphs show. */
.heading_wrapper h1,
.heading_wrapper h2,
.heading_wrapper .heading,
.heading_text,
h1.heading, h2.heading, h3.heading {
    line-height: 1.3 !important;
    padding-top: 0.05em !important;
}
/* The line/word wrappers SplitText injects: stop them clipping glyphs. These carry
   inline `overflow: clip` (and sometimes `clip-path`) baked in by the mirror crawl. */
.heading_text div[aria-hidden],
.heading_wrapper div[aria-hidden],
.heading div[aria-hidden] {
    overflow: visible !important;
    clip-path: none !important;
    line-height: 1.3 !important;
}

/* 6. Robust Navigation Menu Overlay Fixes (Ensures visibility, correct sizing & z-index at 100% zoom) */
.menu_container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99990 !important; /* Bring to the front, just behind the Close menu button */
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    pointer-events: auto !important;
    overflow: hidden !important;
}

.menu_container > .menu_column {
    grid-column: span 6 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    overflow-y: auto !important; /* Force scrollbar and allow mouse-wheel scrolling inside the menu list */
    padding-bottom: 60px !important; /* Extra padding to prevent clipping at the bottom */
}

.menu_container > .image_column {
    grid-column: span 6 !important;
    display: block !important;
    height: 100vh !important;
    position: relative !important;
}

/* 7. Premium Standout Inline SEO Links —
   Covers all content containers: <p>, <li>, .intro div, .content div, .content_wrapper,
   testimonial quotes, and any v7-injected inline link wrappers.
   Excludes navigation, buttons, logo, footer menus, and breadcrumbs. */
p a[href],
li a[href],
div.intro a[href],
div.content a[href],
div.content_wrapper a[href],
div.text-wrapper a[href],
div.testimonial_quote a[href],
div.quote a[href],
.v7-inline-link a[href] {
    color: #1e602b !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.2s ease-in-out !important;
}
p a[href]:hover,
li a[href]:hover,
div.intro a[href]:hover,
div.content a[href]:hover,
div.content_wrapper a[href]:hover,
div.text-wrapper a[href]:hover,
div.testimonial_quote a[href]:hover,
div.quote a[href]:hover,
.v7-inline-link a[href]:hover {
    color: #123f1c !important;
    text-decoration: underline !important;
}

/* Navigation link overrides to prevent them from becoming orange and ensure they match reference black/navy color */
.site-nav a,
.site-nav .nav-item > a,
.site-nav .dropdown-toggle,
.v7-nav-dropdown__trigger,
.v7-nav-dropdown__item,
.dropdown-menu a,
.dropdown a,
.menu_item a,
.menu_item {
    color: #101538 !important; /* Reference Navy/Black */
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Hover state and Active state for navigation menus */
.site-nav a:hover,
.site-nav .nav-item > a:hover,
.site-nav .dropdown-toggle:hover,
.site-nav .dropdown-toggle.active,
.site-nav .dropdown-toggle[aria-current="page"],
.site-nav .nav-item > a.active,
.site-nav .nav-item > a[aria-current="page"],
.v7-nav-dropdown__trigger:hover,
.v7-nav-dropdown__item:hover,
.v7-nav-dropdown__item.active,
.v7-nav-dropdown__item[aria-current="page"] {
    color: #5f2bb8 !important; /* Reference Purple */
    text-decoration: none !important;
}

/* Force Call Now and Quote button colors to be white */
.call-button, .quote-button, .call-button-header, .call-button-footer {
    color: #ffffff !important;
}

/* Force footer links to be white and hover to be orange (using higher specificity to win against li a[href]) */
footer a,
footer a[href],
.site-footer a,
.site-footer a[href],
.footer_menus a,
.footer_menus a[href],
.footer_menu a,
.footer_menu a[href],
.footer-column a,
.footer-column a[href],
footer li a[href],
.site-footer li a[href] {
    color: #ffffff !important;
    font-weight: normal !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out !important;
}
footer a:hover,
footer a[href]:hover,
.site-footer a:hover,
.site-footer a[href]:hover,
.footer_menus a:hover,
.footer_menus a[href]:hover,
.footer_menu a:hover,
.footer_menu a[href]:hover,
.footer-column a:hover,
.footer-column a[href]:hover,
footer li a[href]:hover,
.site-footer li a[href]:hover {
    color: #2ebd59 !important;
    text-decoration: underline !important;
}

/* Ensure nav/menu/breadcrumb/button links are NOT re-styled.
   NOTE: #header_logo is intentionally EXCLUDED here — it must keep its own explicit
   color (set in rule #3 above). Including it caused `color: inherit` to override the
   logo color on inner pages, making the brand name look transparent/invisible.
   NOTE: .v7-nav-dropdown__item is also EXCLUDED — those links live inside a white
   dropdown panel and must keep their own dark text color, not inherit the (often
   light/white) nav bar color, or they become invisible against the white panel. */
.breadcrumbs a[href],
.footer_menu a[href],
.pk-button a[href],
.pk-button[href] {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
}

/* 8. Service-page alternating text/image content blocks (homepage-style).
   Guarantees the injected .v7-service-block renders with image on one side and
   text on the other, with comfortable spacing, even without reference JS animations. */
.v7-service-block {
    display: block !important;
    padding: 4rem 6vw !important;
    box-sizing: border-box !important;
}
.v7-service-block .flex_layout_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3rem !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}
.v7-service-block .content-wrapper {
    flex: 1 1 45% !important;
    min-width: 300px !important;
    order: 1 !important;
}
.v7-service-block .image {
    flex: 1 1 45% !important;
    min-width: 300px !important;
    order: 2 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
/* 'right' variant => text sits on the right, image on the left (alternation) */
.v7-service-block .content-wrapper.right {
    order: 2 !important;
}
.v7-service-block .image.v7-img-left {
    order: 1 !important;
}
.v7-service-block .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: 3 / 2 !important;
}
.v7-service-block .content .heading {
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    /* 1.1 was too tight: with SplitText `mask: lines` the line is clipped to its
       line-box, so a tight line-height shears the tops of capitals/ascenders.
       1.25 gives the masked lines enough room to show every glyph fully. */
    line-height: 1.25 !important;
    margin-bottom: 1.2rem !important;
    padding-top: 0.1em !important;
}
.v7-service-block .content p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
}
@media only screen and (max-width: 768px) {
    .v7-service-block { padding: 2.5rem 6vw !important; }
    .v7-service-block .flex_layout_wrapper { gap: 1.5rem !important; }
    .v7-service-block .content-wrapper,
    .v7-service-block .content-wrapper.right { order: 1 !important; }
    .v7-service-block .image { order: 2 !important; }
}

/* 8b. Service-page HERO normalized to match the text/image content blocks.
   The mirror's archive_hero placed the first paragraph full-width at a larger font with
   no image. We give it the SAME two-column (text left, image right) layout and the SAME
   body font as .v7-service-block so the first paragraph is visually consistent with the
   rest of the page and the right column is no longer an empty "missing image" gap. */
.flex_layout.archive_hero.v7-hero-with-image .flex_layout_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3rem !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}
.flex_layout.archive_hero.v7-hero-with-image .breadcrumbs {
    flex: 1 1 100% !important;
    margin-top: 8rem !important;
    order: 0 !important;
}
.flex_layout.archive_hero.v7-hero-with-image .text-wrapper {
    flex: 1 1 45% !important;
    min-width: 300px !important;
    grid-column: auto !important;   /* drop the mirror's 1/span-7 grid placement */
    order: 1 !important;
}
.flex_layout.archive_hero.v7-hero-with-image .image {
    flex: 1 1 45% !important;
    min-width: 300px !important;
    order: 2 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
.flex_layout.archive_hero.v7-hero-with-image .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: 3 / 2 !important;
}
/* Make the first (intro) paragraph the SAME size/colour as the other service paragraphs. */
.flex_layout.archive_hero.v7-hero-with-image .intro,
.flex_layout.archive_hero.v7-hero-with-image .intro p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
}
@media only screen and (max-width: 768px) {
    .flex_layout.archive_hero.v7-hero-with-image .text-wrapper { order: 1 !important; }
    .flex_layout.archive_hero.v7-hero-with-image .image { order: 2 !important; }
    .flex_layout.archive_hero.v7-hero-with-image .breadcrumbs { margin-top: 5rem !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   STICKY SCROLL EFFECT (the reference's real behaviour, applied to ALL pages).
   The text column stays PINNED while the taller image scrolls past it, then releases
   at the end of the block. This is the studioredd.nl effect: pure CSS `position: sticky`
   on the text beside a TALL image. No JS transforms (a transform would break sticky).

   Requirements for sticky to actually travel:
     1. The text `.content` must be `position: sticky` with a `top` offset and its OWN
        height must be SHORTER than the block, so it has room to stay pinned.
     2. The IMAGE must be TALLER than the text, so there is something to scroll past.
     3. The flex/grid track must align items to START (not center/stretch the text), so
        the sticky element is free to move within its column.
   Only on desktop (>=993px); on mobile the columns stack and sticky is disabled. */
@media only screen and (min-width: 993px) {

    /* KEY: the sticky text travels only as far as its PARENT (the column wrapper) is tall.
       So the wrapper must STRETCH to the full block height (driven by the tall image),
       while the text `.content` itself stays its natural (short) height and pins inside it.
       Sticky only pins elements shorter than the viewport, so we also cap the text height
       to the viewport — long copy then simply scrolls normally (no harm), exactly like the
       reference which keeps its copy short. */

    /* ---- A) Native reference grid blocks (home, blogs, FAQ): text_large_image ----
       Includes text_large_image_hotspots — the blog blocks that hold 2 paragraphs. */
    .flex_layout.text_large_image:not(.v7-service-block) .content-wrapper,
    .flex_layout.text_large_image_logo:not(.v7-service-block) .content-wrapper,
    .flex_layout.text_large_image_hotspots:not(.v7-service-block) .content-wrapper {
        align-self: stretch !important;   /* wrapper fills the block height = sticky travel room */
        height: auto !important;
    }
    /* Every text column is normalized to a single paragraph (.v7-pin-css) and uses native
       CSS sticky — text stays while the image scrolls past. No JS pin involved. */
    .flex_layout.text_large_image:not(.v7-service-block) .content.v7-pin-css,
    .flex_layout.text_large_image_logo:not(.v7-service-block) .content.v7-pin-css,
    .flex_layout.text_large_image_hotspots:not(.v7-service-block) .content.v7-pin-css {
        position: sticky !important;
        top: 18vh !important;
        height: fit-content !important;
        align-self: start !important;
    }
    /* The hotspots blocks shipped a rigid `height: calc(100vh - 25vh)` that clipped text —
       neutralize it so the (now single) merged paragraph shows fully. */
    .flex_layout.text_large_image_hotspots:not(.v7-service-block) .content {
        height: fit-content !important;
        padding: 1.5rem !important;
    }
    /* Tall image gives the sticky/pinned text room to scroll past. Portrait fills the column. */
    .flex_layout.text_large_image:not(.v7-service-block) .image,
    .flex_layout.text_large_image_logo:not(.v7-service-block) .image,
    .flex_layout.text_large_image_hotspots:not(.v7-service-block) .image {
        align-self: stretch !important;
        aspect-ratio: 3 / 4 !important;
        min-height: 130vh !important;
    }
    .flex_layout.text_large_image:not(.v7-service-block) .image > img,
    .flex_layout.text_large_image_logo:not(.v7-service-block) .image > img,
    .flex_layout.text_large_image_hotspots:not(.v7-service-block) .image > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* ---- B) Service-page flex blocks: v7-service-block + normalized hero ---- */
    .v7-service-block .flex_layout_wrapper,
    .flex_layout.archive_hero.v7-hero-with-image .flex_layout_wrapper {
        align-items: stretch !important;   /* columns fill block height -> sticky has room */
    }
    .v7-service-block .content-wrapper,
    .v7-service-block .content-wrapper.right,
    .flex_layout.archive_hero.v7-hero-with-image .text-wrapper {
        align-self: stretch !important;
        display: block !important;
    }
    /* Service/hero text columns (single merged paragraph) -> native CSS sticky. */
    .v7-service-block .content.v7-pin-css,
    .flex_layout.archive_hero.v7-hero-with-image .intro.v7-pin-css {
        position: sticky !important;
        top: 18vh !important;
        height: fit-content !important;
    }
    /* Tall image column so the sticky text has scroll room. */
    .v7-service-block .image,
    .flex_layout.archive_hero.v7-hero-with-image .image {
        align-self: stretch !important;
        min-height: 130vh !important;
        overflow: hidden !important;
    }
    .v7-service-block .image img,
    .flex_layout.archive_hero.v7-hero-with-image .image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: auto !important;   /* drop the fixed 3/2 so it fills the tall column */
    }
}

/* Style scrollbars beautifully for scrollable areas */
.menu_column::-webkit-scrollbar {
    width: 6px;
}
.menu_column::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.menu_column::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.menu_column::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive adjustment for tablets & mobile */
@media only screen and (max-width: 992px) {
    .menu_container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .menu_container > .menu_column {
        grid-column: span 4 !important;
        overflow-y: auto !important;
    }
    .menu_container > .image_column {
        display: none !important;
    }
}

/* 8. Balanced 5-Column Footer Grid Layout (Ensures Our Philosophy has breathing room, and other columns take up span 2) */
.footer_menus {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}
.footer_menus .column:nth-child(1) {
    grid-column-end: span 4 !important;
}
.footer_menus .column:nth-child(2),
.footer_menus .column:nth-child(3),
.footer_menus .column:nth-child(4),
.footer_menus .column:nth-child(5),
.footer_menus .column:nth-child(6) {
    grid-column-end: span 2 !important;
}

@media only screen and (max-width: 992px) {
    .footer_menus {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .footer_menus .column {
        grid-column-end: span 4 !important;
    }
}

/* 9. FAQ Page Q&A List styling (Accordion-like structures) */
.faq_items_container {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
}
.faq_item {
    border-bottom: 1px solid #e5e5e5 !important;
    padding-bottom: 1.5rem !important;
}
.faq_item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.faq_question {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.75rem !important;
    position: relative !important;
    padding-left: 2rem !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
.faq_question::before {
    content: "Q:" !important;
    position: absolute !important;
    left: 0 !important;
    color: #4c800d !important; /* Brand Green */
    font-weight: 800 !important;
}
.faq_answer {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #4a4a4a !important;
    padding-left: 2rem !important;
    position: relative !important;
}
.faq_answer::before {
    content: "A:" !important;
    position: absolute !important;
    left: 0 !important;
    color: #111111 !important;
    font-weight: 800 !important;
}

/* 10. Premium Testimonials styling (Beautiful Grid and Quotes) */
.testimonials_container {
    max-width: 1200px !important;
    margin: 4rem auto !important;
    padding: 0 2rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3rem !important;
    width: 100% !important;
}

@media only screen and (max-width: 900px) {
    .testimonials_container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        margin: 2rem auto !important;
    }
}

.testimonial_card {
    background-color: #f9f9f9 !important;
    border-left: 4px solid #4c800d !important; /* Green Oaks Brand Green */
    padding: 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.testimonial_card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.testimonial_quote {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #333333 !important;
    font-style: italic !important;
    margin-bottom: 2rem !important;
    position: relative !important;
}

.testimonial_quote::before {
    content: "“" !important;
    font-size: 4rem !important;
    color: rgba(76, 128, 13, 0.15) !important;
    position: absolute !important;
    top: -2.5rem !important;
    left: -1rem !important;
    font-family: serif !important;
}

.testimonial_author_info {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    border-top: 1px solid #eaeaea !important;
    padding-top: 1.25rem !important;
}

.testimonial_author_meta {
    display: flex !important;
    flex-direction: column !important;
}

.testimonial_author_name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.testimonial_author_service {
    font-size: 0.9rem !important;
    color: #4c800d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 0.25rem !important;
}

.testimonial_author_loc {
    font-size: 0.85rem !important;
    color: #888888 !important;
}

/* 10. Justified body paragraphs (all page types).
   Business requirement: content paragraphs should be justified (flush to BOTH the
   left and right edges) rather than left-aligned with a ragged right edge.
   We scope this to real content paragraphs only — NOT nav, footer, breadcrumbs,
   buttons, captions, headings, FAQ Q/A prefixes, or single-line meta text — and we
   enable hyphenation so justification does not open large rivers of whitespace. */
.content p,
.content_wrapper p,
.intro,
.intro p,
.text-wrapper p,
.v7-service-block .content p,
.faq_answer,
.blog-content p,
article p,
main .content p {
    text-align: justify !important;
    text-justify: inter-word !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 6 3 3;   /* avoid hyphenating short words */
}

/* Never justify these — they must stay naturally aligned. */
nav p, nav a,
.breadcrumbs p, .breadcrumbs,
footer p, .footer_menus p, .footer p,
.testimonial_author_name, .testimonial_author_service,
.testimonial_author_loc, .testimonial_author_meta,
.faq_question,
.pk-button, button.pk-button,
figcaption, .caption,
.cta p, .cta span {
    text-align: left !important;
    hyphens: manual !important;
}

/* On narrow screens justification creates ugly gaps — fall back to left align. */
@media only screen and (max-width: 600px) {
    .content p, .content_wrapper p, .intro, .intro p, .text-wrapper p,
    .v7-service-block .content p, .faq_answer, .blog-content p, article p, main .content p {
        text-align: left !important;
        hyphens: manual !important;
    }
}

/* ── Home "Our Projects" slider ─────────────────────────────────────────────
   Show the project title only on the main / left slide. The peeking slides on
   the right (clones inside .next_projects > .first / .last) must show the image
   only — their overlaid titles otherwise overflow onto the photos. This matches
   the reference site, where only the active slide carries a caption. Fully
   generic: targets the slider structure, never specific title text. */
.pCarousel .next_projects .project .content_wrapper {
    display: none !important;
}

/* Ensure primary and CTA buttons have high contrast white text even when placed inside
   article elements (overriding the .article-body a green text rule from template style). */
.btn-primary, .btn-cta, .section-cta a.btn-primary, .article-body a.btn-primary {
    color: #ffffff !important;
}

/* 11. Remove transparent white diagonal line and scanlines over all images/pictures */
.media-slot::after {
    background: none !important;
    display: none !important;
}

/* 12. Center and bound the founder image on tablets and smaller screens */
@media (max-width: 992px) {
    .founder-photo-wrap {
        max-width: 400px !important;
        margin: 0 auto !important;
        border-radius: var(--radius-xl) !important;
    }
    .founder-photo-wrap img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: cover !important;
    }
}