/*
Theme Name: Kadence Child
Theme URI: https://yourwebsite.com
Description: Child theme for Kadence
Author: Your Name
Author URI: https://yourwebsite.com
Template: kadence
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&display=swap');

/* =Theme customization starts here
------------------------------------------------------- */

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
}
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
}

/* ===== Announcement bar ===== */
.announcement-bar {
    position: relative;
    z-index: 1001;
    width: 100%;
    background: #37ae97;
    color: #fff;
    text-align: center;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}
.announcement-bar__link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.announcement-bar__link:hover {
    opacity: 0.8;
    color: #fff;
}

/* Default column gutter on desktop */
@media all and (min-width: 981px) {
    .kt-row-column-wrap {
        column-gap: 7em !important;
    }
    .kb-row-layout-id250143_c54ac1-f5 .kt-row-column-wrap {
        column-gap: 3em !important;
    }
}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
}
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
}
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
}

/* ===== Floating header with white pill bar ===== */

/* Position header absolutely so it overlays the hero section */
#masthead {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent !important;
}

/* Smooth the sticky header's vertical position so the JS-corrected top doesn't snap */
.site-main-header-wrap.kadence-sticky-header {
    transition: top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Transparent background on the row container, add padding around the pill */
.site-header-row-container-inner {
    background: transparent !important;
    padding: 1em 1.5em !important;
}

/* Let the pill span full width of the padded container */
#masthead .site-container {
    max-width: 100% !important;
    padding: 0 !important;
}

@keyframes header-drop-in {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* White floating pill bar — override Kadence's column layout with flex */
.site-main-header-inner-wrap.site-header-row {
    height: 80px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #fff !important;
    border-radius: 1em !important;
    padding: 0.1em 1em !important;
    gap: 1em;
    animation: header-drop-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Nav items: force flex alignment all the way down so text centres in the pill */
.site-main-header-inner-wrap .site-header-item,
.site-main-header-inner-wrap .header-navigation,
.site-main-header-inner-wrap .header-menu-container,
.site-main-header-inner-wrap .header-menu-container > ul {
    display: flex !important;
    align-items: center !important;
}
.site-main-header-inner-wrap .header-menu-container > ul {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.25em;
}
.site-main-header-inner-wrap .header-menu-container > ul > li,
.site-main-header-inner-wrap .header-menu-container > ul > li > a {
    display: flex !important;
    align-items: center !important;
}
.tertiary-navigation .tertiary-menu-container > ul > li.menu-item > a,
.secondary-navigation .secondary-menu-container > ul > li.menu-item > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.header-navigation ul.sub-menu,
.header-navigation ul.submenu {
    border-radius: 1.5em !important;
    overflow: hidden !important;
    padding: 0.5em !important;
}
.header-navigation .header-menu-container ul ul li.menu-item {
    margin: 0 !important;
    padding: 0 !important;
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
    font-size: 1.05rem !important;
    padding-top: 0.35em !important;
    padding-bottom: 0.35em !important;
}

/* Left: primary nav — flex-start */
.site-header-main-section-left {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0;
}

/* Hide the empty intermediate sections */
.site-header-main-section-left-center,
.site-header-main-section-right-center {
    display: none !important;
}

/* Center: logo — fixed width, centered */
.site-header-main-section-center {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Right: secondary nav + CTA — flex-end */
.site-header-main-section-right {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 1em;
}
.header-button-wrap,
.header-button-inner-wrap {
    display: flex !important;
    align-items: center !important;
}
.kb-button {
    padding: 14px 36px !important;
    font-size: 1.1rem !important;
}
.header-button,
.header-button:hover,
.header-button:focus,
.header-button:active {
    padding: 12px 32px !important;
    font-size: 1.1rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Make sure the hero section has enough top padding to clear the floating header */
.hero {
    padding-top: 140px !important;
}

/* Hero sticker — absolutely overlaps the image, bottom-right */
@keyframes sticker-pop {
    from {
        transform: scale(0) rotate(40deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(12deg);
        opacity: 1;
    }
}

.hero .wp-block-group {
    position: relative !important;
}
.hero .wp-block-group::after {
    content: '';
    position: absolute;
    bottom: 88%;
    right: 0%;
    width: 150px;
    height: 150px;
    background-image: url('https://bgpp.gotb.dev/wp-content/uploads/2026/05/Planting-Forests-Growing-Futures-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
    transform: scale(1) rotate(24deg);
    animation: sticker-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

@media (max-width: 980px) {
    .hero .wp-block-group::after {
        display: none;
    }
    .mobile-header-button-wrap {
        display: none !important;
    }
    .footer .kt-row-column-wrap {
        gap: 2.5rem !important;
    }
    .footer .kb-nav-link-content {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
    }
    .footer .kt-svg-icon-list-text {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
    .mobile-navigation ul ul {
    padding-left: 0.2em!important;
    padding-bottom: 0.5em!important; }
}

@media (max-width: 767px) {
    .site-main-header-inner-wrap.site-header-row {
        height: 65px !important;
    }
    .site-branding .custom-logo,
    .site-branding img {
        max-height: 32px !important;
        width: auto !important;
    }
}

/* Hamburger button — circle to match the custom X close button */
.menu-toggle-open.drawer-toggle .kadence-svg-icon {
    width: 22px !important;
    height: 22px !important;
}

.menu-toggle-open.drawer-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background-color: #cfe0c3 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

/* Nav top-level links: shrink below 1400px, keep theme default above */
@media (max-width: 1570px) {
    .secondary-navigation .secondary-menu-container > ul > li.menu-item > a,
    .tertiary-navigation .tertiary-menu-container > ul > li.menu-item > a {
        font-size: clamp(0.72rem, 1.22vw, 1.06rem) !important;
    }

    .site-branding .custom-logo,
    .site-branding img {
        max-height: 52px !important;
        width: auto !important;
    }

    .kb-button {
        padding: clamp(10px, 1.1vw, 14px) clamp(24px, 2.5vw, 36px) !important;
        font-size: clamp(0.88rem, 1.1vw, 1.05rem) !important;
    }
    .header-button,
    .header-button:hover,
    .header-button:focus,
    .header-button:active {
        padding: clamp(9px, 1vw, 12px) clamp(20px, 2.2vw, 32px) !important;
        font-size: clamp(0.88rem, 1.1vw, 1.05rem) !important;
    }
}

/* Nav underline: 1px, slower slide, tighter gap */
.header-navigation-style-underline .menu > li > a {
    padding-bottom: 2px !important;
}
.header-navigation-style-underline .menu > li > a::after {
    height: 1px !important;
    margin-top: 1px !important;
    transition-duration: 0.5s !important;
    transition-timing-function: ease !important;
}

/* Accent text: tilted background highlight, Bricolage Grotesque */
.accent-text {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 800;
    text-transform: uppercase !important;
    font-size: 1em;
    display: inline-block;
    position: relative;
    padding: 0.05em 0.15em;
    z-index: 1;
    /* clip-path sweeps left→right, revealing both the banner and letters inside it */
    animation: accent-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
.accent-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--global-palette7);
    transform: rotate(-2deg);
    z-index: -1;
}
/* Accent text color matches its row's background color for each Kadence palette */
.has-theme-palette1-background-color .accent-text  { color: var(--global-palette1) !important; }
.has-theme-palette2-background-color .accent-text  { color: var(--global-palette2) !important; }
.has-theme-palette3-background-color .accent-text  { color: var(--global-palette3) !important; }
.has-theme-palette4-background-color .accent-text  { color: var(--global-palette4) !important; }
.has-theme-palette5-background-color .accent-text  { color: var(--global-palette5) !important; }
.has-theme-palette6-background-color .accent-text  { color: var(--global-palette6) !important; }
.has-theme-palette7-background-color .accent-text  { color: var(--global-palette7) !important; }
.has-theme-palette8-background-color .accent-text  { color: var(--global-palette8) !important; }
.has-theme-palette9-background-color .accent-text  { color: var(--global-palette9) !important; }

/* When accent-text is inside a nested row, the inner row's bg color takes priority */
.kt-inside-inner-col .has-theme-palette1-background-color .accent-text  { color: var(--global-palette1) !important; }
.kt-inside-inner-col .has-theme-palette2-background-color .accent-text  { color: var(--global-palette2) !important; }
.kt-inside-inner-col .has-theme-palette3-background-color .accent-text  { color: var(--global-palette3) !important; }
.kt-inside-inner-col .has-theme-palette4-background-color .accent-text  { color: var(--global-palette4) !important; }
.kt-inside-inner-col .has-theme-palette5-background-color .accent-text  { color: var(--global-palette5) !important; }
.kt-inside-inner-col .has-theme-palette6-background-color .accent-text  { color: var(--global-palette6) !important; }
.kt-inside-inner-col .has-theme-palette7-background-color .accent-text  { color: var(--global-palette7) !important; }
.kt-inside-inner-col .has-theme-palette8-background-color .accent-text  { color: var(--global-palette8) !important; }
.kt-inside-inner-col .has-theme-palette9-background-color .accent-text  { color: var(--global-palette9) !important; }

/* Dark-highlight variant — same typography/animation as .accent-text, dark green bg,
   text color matches the section background so it always contrasts with the highlight. */
.accent-text-dark {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 800;
    text-transform: uppercase !important;
    font-size: 1em;
    display: inline-block;
    position: relative;
    padding: 0.05em 0.15em;
    z-index: 1;
    color: #fff !important;
    animation: accent-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
.accent-text-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--global-palette1);
    transform: rotate(-2deg);
    z-index: -1;
}
/* Adapt text color to match the section background, just like .accent-text */
.has-theme-palette1-background-color .accent-text-dark  { color: var(--global-palette1) !important; }
.has-theme-palette2-background-color .accent-text-dark  { color: var(--global-palette2) !important; }
.has-theme-palette3-background-color .accent-text-dark  { color: var(--global-palette3) !important; }
.has-theme-palette4-background-color .accent-text-dark  { color: var(--global-palette4) !important; }
.has-theme-palette5-background-color .accent-text-dark  { color: var(--global-palette5) !important; }
.has-theme-palette6-background-color .accent-text-dark  { color: var(--global-palette6) !important; }
.has-theme-palette7-background-color .accent-text-dark  { color: var(--global-palette7) !important; }
.has-theme-palette8-background-color .accent-text-dark  { color: var(--global-palette8) !important; }
.has-theme-palette9-background-color .accent-text-dark  { color: var(--global-palette9) !important; }
.kt-inside-inner-col .has-theme-palette1-background-color .accent-text-dark  { color: var(--global-palette1) !important; }
.kt-inside-inner-col .has-theme-palette2-background-color .accent-text-dark  { color: var(--global-palette2) !important; }
.kt-inside-inner-col .has-theme-palette3-background-color .accent-text-dark  { color: var(--global-palette3) !important; }
.kt-inside-inner-col .has-theme-palette4-background-color .accent-text-dark  { color: var(--global-palette4) !important; }
.kt-inside-inner-col .has-theme-palette5-background-color .accent-text-dark  { color: var(--global-palette5) !important; }
.kt-inside-inner-col .has-theme-palette6-background-color .accent-text-dark  { color: var(--global-palette6) !important; }
.kt-inside-inner-col .has-theme-palette7-background-color .accent-text-dark  { color: var(--global-palette7) !important; }
.kt-inside-inner-col .has-theme-palette8-background-color .accent-text-dark  { color: var(--global-palette8) !important; }
.kt-inside-inner-col .has-theme-palette9-background-color .accent-text-dark  { color: var(--global-palette9) !important; }

/* ===== Nested Kadence rows: prevent alignfull breakout ===== */
.kt-inside-inner-col .kb-row-layout-wrap.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Shovel at bottom of #vision section ===== */
#vision {
    position: relative;
    overflow: visible !important;
}
#vision::after {
    display: none;
    content: '';
    position: absolute;
    bottom: -1px;
    left: 3.5%;
    transform: scaleX(-1);
    width: 200px;
    height: 200px;
    background-image: url('https://bgpp.gotb.dev/wp-content/uploads/2026/05/shovel-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    pointer-events: none;
    z-index: 10;
}


/* ===== Tree background animation (.trees-bg) ===== */
.trees-bg {
    position: relative;
    overflow: hidden;
}
.trees-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.trees-bg-layer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, var(--global-palette4));
    pointer-events: none;
}
.tree-instance {
    position: absolute;
    transform-origin: 50% 100%;
}
.tree-instance svg {
    width: 100%;
    height: 100%;
    display: block;
}
.trees-bg .kt-row-column-wrap,
.trees-bg .kt-row-layout-overlay {
    position: relative;
    z-index: 1;
}

/* ===== Fade-up scroll reveal (.fade-up) ===== */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Word-by-word scroll reveal (.words-reveal) ===== */
/* Hide immediately so neither the raw text nor the default accent animation shows */
.words-reveal {
    opacity: 0 !important;
}
/* Restored by JS once words are wrapped and hidden individually */
.words-reveal.words-ready {
    opacity: 1 !important;
}
/* Suppress default accent-text animation before JS processes the heading */
.words-reveal .accent-text {
    animation: none !important;
}
.words-reveal .word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0.05em 0.1em 0.1em;
    margin: 0 -0.1em;
}
.words-reveal .word {
    display: inline-block !important;
}
/* Words start paused at the 'from' state (hidden) once wrapped */
.words-reveal.words-ready .word {
    animation: word-reveal 0.85s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-play-state: paused !important;
}
/* is-visible unpauses — delay timer starts from this moment, so stagger works */
.words-reveal.is-visible .word {
    animation-play-state: running !important;
}
@keyframes word-reveal {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* Accent-text: sweep animation paused until is-visible.
   --accent-delay is set per-element by JS so the shorthand !important can't override it. */
.words-reveal.words-ready .accent-text {
    animation: accent-reveal 1s cubic-bezier(0.4, 0, 0.2, 1) var(--accent-delay, 0.3s) both !important;
    animation-play-state: paused !important;
    clip-path: none;
}
.words-reveal.is-visible .accent-text {
    animation-play-state: running !important;
}

/* Extra padding on the inset handles the rotated banner's corners bleeding out */
@keyframes accent-reveal {
    from { clip-path: inset(0 105% 0 -8%); }
    to   { clip-path: inset(-6% -8% -6% -8%); }
}

/* ===== Button: split-text hover + shrink ===== */

/* Clip the sliding characters */
.btn-txt-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: inherit;
}

.btn-line {
    display: block;
    white-space: nowrap;
}

/* Line 2 sits directly below line 1 */
.btn-line-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.btn-word {
    display: inline-block;
}

/* Each character transitions transform + opacity */
.btn-char {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
                opacity 0.45s ease,
                visibility 0s linear 0s;
}

/* Line 1: visible, slides up on hover */
.btn-line-1 .btn-char {
    transform: translateY(0);
    opacity: 1;
}
.kb-button:hover .btn-line-1 .btn-char,
.header-button:hover .btn-line-1 .btn-char {
    transform: translateY(-115%);
    opacity: 0;
}

/* Line 2: hidden below, slides up into view on hover */
.btn-line-2 .btn-char {
    transform: translateY(115%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
                opacity 0.45s ease,
                visibility 0s linear 0.45s;
}
.kb-button:hover .btn-line-2 .btn-char,
.header-button:hover .btn-line-2 .btn-char {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
                opacity 0.45s ease,
                visibility 0s linear 0s;
}

/* Button pill shrinks on hover; counter-scale keeps text the same visual size */
.kb-button,
.header-button {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform;
}
.kb-button:hover,
.header-button:hover {
    transform: scale(0.93) !important;
}
.kb-button .kt-btn-inner-text,
.header-button .kt-btn-inner-text {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kb-button:hover .kt-btn-inner-text,
.header-button:hover .kt-btn-inner-text {
    transform: scale(1.075);
}

/* ===== Marquee images ===== */
.kb-marquee-item.splide__slide,
.kb-advanced-marquee-item,
.kb-advanced-marquee-item-inner {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.kb-marquee-item-inner figure.wp-block-kadence-image {
    display: inline-flex !important;
    align-items: center;
    margin: 0 0.75em !important;
    flex-shrink: 0;
}
.kb-marquee-item-inner figure.wp-block-kadence-image img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
    object-fit: contain;
}

/* ===== Footer nav — remove indent, even spacing, heading gap ===== */
.footer .kb-navigation ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
}

.footer .kb-navigation .menu-item {
    margin: 0 !important;
    padding: 0 !important;
}

.footer .kb-link-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.footer .kb-nav-link-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Space between column heading and list */
.footer .wp-block-kadence-navigation {
    margin-top: 1rem !important;
}

.footer .kb-nav-link-content {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

.footer .kt-svg-icon-list-text {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

/* Footer icon list — match nav spacing and heading gap */
.footer .kt-svg-icon-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer .kt-svg-icon-list-item-wrap {
    margin: 0 !important;
    padding: 0.3rem 0 !important;
}

.footer .kt-svg-icon-list-items {
    margin-top: 1rem !important;
}

.kb-row-layout-id250143_c54ac1-f5 a,
.kb-row-layout-id250143_012ec7-cd a {
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.kb-row-layout-id250143_c54ac1-f5 a:hover,
.kb-row-layout-id250143_012ec7-cd a:hover {
    text-decoration: none !important;
    opacity: 0.6;
}

/* ------------- 1. general styles ------------- */

h1, h2, h3, h4, h5, h6 {overflow-wrap: normal;}

sup {
    position: relative;
    top: -0.5em;
    font-size: 12px;
    margin-right: 2px;
}

/* Remove required text line for gravity form Asterisk: * */
p.gform_required_legend {
    display: none;
}
/* Footer */
.widget_nav_menu a:hover {
    text-decoration: underline !important;
}
.widget_pages a, .widget_nav_menu a {
    display: block;
    padding: 0.1em 0;
    text-decoration: none;
}
@media screen and (max-width: 1024px) {
    .footer-widget-area.content-tablet-align-center {
        text-align: left;
    }
}

/* Menu Navigation - dropdown Mobile */
.kadence-svg-iconset svg {
    height: 1.2em;
    width: 1.2em;
}
.site-branding a.brand {
    gap: 0;
}
/* Breadcrumbs */
.kadence-breadcrumbs {
    margin: 0em 0;
}
/* ------------- a. Gravity contact form ------------- */

.gform_wrapper ul.gform_fields li {
    list-style: none;
}
.gform_wrapper ul.gform_fields {
    padding-left: 0 !important;
}
.gform_wrapper .hidden_label label {
    display: none;
}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper textarea,
.gform_wrapper select {
    border-radius: 0px !important;
    background-color: #fff;
    color: inherit;
    font-family: sans-serif;
    border: 0;
    padding: 10px !important;
    border: 1px solid #eeeeee;
}
.gform_wrapper.gravity-theme .gfield_label {
    display: inline-block;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 3px;
    padding: 0;
}
.gform_wrapper input[type=email]:focus {
    border: 1px solid #eeeeee;
}
.gform_wrapper input[type=text]::placeholder,
.gform_wrapper input[type=email]::placeholder,
.gform_wrapper input[type=tel]::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper select::placeholder {
    color: inherit;
    font-family: inherit;
}
.gform_wrapper .gform_footer {
    text-align: right;
}
.gform_wrapper input[type=submit] {
	border: 0;
    background-color: #333333;
    color: #ffffff;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: inherit;
    font-size: inherit;
    transition-duration: .3s;
    border-radius: 0px;
    padding: 8px 28px;
    cursor:pointer;
}
.gform_wrapper input[type=submit]:hover {
    transition-duration: .3s;
    opacity:0.9;
}
.gform_legacy_markup_wrapper .gform_footer {
    margin: 0px 0 0;
}

/* ===== Homepage hero: full-width image with swooping curved border ===== */

.hero {
    padding-bottom: 0 !important;
    min-height: 100vh !important;
}
.hero > .kt-row-column-wrap {
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: visible;
    min-height: 100vh !important;
}
.hero .kt-inside-inner-col {
    overflow: visible;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Group: fill remaining space after heading, push image to bottom */
.hero .wp-block-group {
    flex: 1 !important;
    width: 100% !important;
    overflow: visible !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Heading and button sit above the image */
.hero .wp-block-kadence-advancedheading {
    position: relative !important;
    z-index: 10 !important;
}
.hero .wp-block-kadence-advancedbtn {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 0 !important;
}

/* Image fills remaining viewport after heading + padding */
.hero-image {
    position: relative;
    z-index: 1;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -160px !important;
    height: calc(100vh - 80px) !important;
    min-height: 65vh !important;
}
.hero-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top;
}

/* Top swoop: arch peak shifted right so the left side dips shallower.
   72% rx covers edge-to-edge; cx=68% moves the peak toward the right. */
.hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background-color: var(--global-palette1);
    clip-path: ellipse(72% 100% at 68% 0%);
    z-index: 2;
    pointer-events: none;
}

/* =====================================================
   Testimonials grid — [testimonials_grid] shortcode
   ===================================================== */
.tg-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    --tg-color: currentColor;
}

/* Bento: 3 narrow cards, then 2 wide cards, repeating */
.tg-card:nth-child(5n+1),
.tg-card:nth-child(5n+2),
.tg-card:nth-child(5n+3) { grid-column: span 2; }
.tg-card:nth-child(5n+4),
.tg-card:nth-child(5n)   { grid-column: span 3; }

.tg-card {
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    color: var(--tg-color);
}

.tg-card--title { justify-content: flex-end; }

.tg-stars {
    font-size: 1.125rem;
    letter-spacing: 0.15em;
}

.tg-headline {
    font-size: clamp(1.75rem, 3.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
}
.tg-headline em { font-style: italic; font-weight: 400; }

.tg-quote { display: none; }

.tg-body {
    font-size: 0.9375rem;
    line-height: 1.65;
    opacity: 0.75;
    flex: 1;
    margin: 0;
}

.tg-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.tg-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tg-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.tg-author-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.tg-author-name { font-weight: 600; font-size: 0.9375rem; }
.tg-author-role { font-size: 0.8125rem; opacity: 0.65; }

/* Section bg color → card text/star/avatar color */
.has-theme-palette1-background-color .tg-wrap { --tg-color: var(--global-palette1); }
.has-theme-palette2-background-color .tg-wrap { --tg-color: var(--global-palette2); }
.has-theme-palette3-background-color .tg-wrap { --tg-color: var(--global-palette3); }
.has-theme-palette4-background-color .tg-wrap { --tg-color: var(--global-palette4); }
.has-theme-palette5-background-color .tg-wrap { --tg-color: var(--global-palette5); }
.has-theme-palette6-background-color .tg-wrap { --tg-color: var(--global-palette6); }
.has-theme-palette7-background-color .tg-wrap { --tg-color: var(--global-palette7); }
.has-theme-palette8-background-color .tg-wrap { --tg-color: var(--global-palette8); }
.has-theme-palette9-background-color .tg-wrap { --tg-color: var(--global-palette9); }

@media (max-width: 900px) {
    .tg-wrap { grid-template-columns: repeat(2, 1fr); }
    .tg-card:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 560px) {
    .tg-wrap { grid-template-columns: 1fr; }
}

/* Why Trees section — teardrop clip (sharp point at top, rounded bottom) */
.kb-image249382_79cd02-d1 img {
    clip-path: polygon(
        50.0% 0.0%, 52.8% 0.2%, 54.7% 0.7%, 56.3% 1.5%, 57.8% 2.6%,
        59.3% 3.9%, 60.6% 5.4%, 61.9% 7.1%, 63.2% 9.0%, 64.4% 11.1%,
        65.6% 13.4%, 66.7% 16.0%, 67.8% 18.7%, 68.9% 21.6%, 70.0% 24.6%,
        71.1% 27.9%, 72.1% 31.3%, 73.2% 34.9%, 74.2% 38.7%, 75.2% 42.7%,
        76.2% 46.8%, 77.1% 51.1%, 78.1% 55.6%, 79.1% 60.2%, 80.0% 65.0%,
        79.7% 68.9%, 79.0% 72.8%, 77.7% 76.5%, 76.0% 80.0%, 73.8% 83.3%,
        71.2% 86.2%, 68.3% 88.8%, 65.0% 91.0%, 61.5% 92.7%, 57.8% 94.0%,
        53.9% 94.7%, 50.0% 95.0%, 46.1% 94.7%, 42.2% 94.0%, 38.5% 92.7%,
        35.0% 91.0%, 31.7% 88.8%, 28.8% 86.2%, 26.2% 83.3%, 24.0% 80.0%,
        22.3% 76.5%, 21.0% 72.8%, 20.3% 68.9%, 20.0% 65.0%, 20.9% 60.2%,
        21.9% 55.6%, 22.9% 51.1%, 23.8% 46.8%, 24.8% 42.7%, 25.8% 38.7%,
        26.8% 34.9%, 27.9% 31.3%, 28.9% 27.9%, 30.0% 24.6%, 31.1% 21.6%,
        32.2% 18.7%, 33.3% 16.0%, 34.4% 13.4%, 35.6% 11.1%, 36.8% 9.0%,
        38.1% 7.1%, 39.4% 5.4%, 40.7% 3.9%, 42.2% 2.6%, 43.7% 1.5%,
        45.3% 0.7%, 47.2% 0.2%
    );
    width: 100%;
    height: auto;
}

/* Bottom swoop: mirrored offset, transitions into the section below */
.hero-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background-color: var(--global-palette1);
    clip-path: ellipse(72% 100% at 32% 100%);
    z-index: 2;
    pointer-events: none;
}


/* WooCommerce notices above sticky menu (z-index 1000) */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    position: relative;
    z-index: 1100 !important;
}

/* Trees product visual — animated tree grid replaces placeholder image */
.trees-product-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
}

/* Allow teardrop tip to show above the image area without clipping */
li.product_cat-trees,
li.product_cat-trees .woocommerce-loop-image-link {
    overflow: visible !important;
}

.trees-product-visual {
    overflow: visible;
}

.trees-product-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    aspect-ratio: 3 / 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 100'%3E%3Cpath d='M 37.5 0 C 47.1 11.5 58.2 43.5 64.6 57 A 30 30 0 1 1 10.4 57 C 16.9 43.5 47.1 11.5 37.5 0 Z' fill='%2370A9A1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.trees-product-visual img {
    z-index: 1;
}

/* Trees category — centre-align card text */
li.product_cat-trees .product-details,
li.product_cat-trees .woocommerce-loop-product__title,
li.product_cat-trees .price {
    text-align: center;
}

li.product_cat-trees .product-action-wrap {
    display: none;
}

li.product_cat-trees:hover .entry-content-wrap,
li.product_cat-trees:focus-within .entry-content-wrap {
    transform: none !important;
}

/* Trees product grid: 4 → 2 → 1 (skip 3 columns) */
@media screen and (min-width: 576px) and (max-width: 1024px) {
    ul.products.grid-sm-col-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 575px) {
    ul.products.grid-ss-col-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Trees category product cards — transparent background */
li.product_cat-trees,
li.product_cat-trees .product-details,
li.product_cat-trees .content-bg {
    background: transparent !important;
    box-shadow: none !important;
}

/* Trees category — larger title and price */
li.product_cat-trees .woocommerce-loop-product__title {
    font-size: 1.6rem !important;
}

li.product_cat-trees .price {
    font-size: 1.4rem !important;
}

/* Narrow the cards so the hover zone matches the visual teardrop area */
li.product_cat-trees {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* Tree quantity picker — button inherits global Kadence button styles via kb-btn-global-inherit */
.tqp-cta.kb-button { white-space: nowrap; }

/* ===== Project hero: full-height image with swoop divider ===== */

.kb-row-layout-wrap.project-hero {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc((100% - 100vw) / 2) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

.kb-row-layout-wrap.project-hero > .kt-row-column-wrap {
    align-items: stretch !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    column-gap: 0 !important;
}

/* Left column: full-height image — each flex level needs display:flex + min-height:0 */
.kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

.kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    min-height: 0;
}

.kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:first-child .wp-block-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0;
}

figure.project-hero {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

figure.project-hero .kb-image-wrap {
    flex: 1 !important;
    display: flex !important;
    min-height: 0 !important;
}

figure.project-hero .kb-img {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

/* Right column: account for header, set up swoop anchor */
.kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    position: relative;
    z-index: 1;
    align-self: stretch !important;
    padding-top: 120px !important;
}

/* Swoop: D-shaped protrusion of the background into the image */
.kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 80px;
    background: var(--global-palette1);
    clip-path: ellipse(70% 50% at 100% 50%);
}

@media (max-width: 980px) {
    .kb-row-layout-wrap.project-hero > .kt-row-column-wrap {
        min-height: unset;
    }
    .kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    }
    .kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child::before {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 980px) {
    .kb-row-layout-wrap.project-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child::before {
        display: block;
    }
    figure.project-hero {
        height: 50vw !important;
        min-height: 260px;
    }
}

/* Project hero stats sticker */
@keyframes project-sticker-pop {
    from { transform: translate(-50%, -50%) rotate(40deg) scale(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; }
}

.project-hero-sticker {
    position: absolute;
    left: 48%;
    top: 68%;
    width: 190px;
    height: 190px;
    z-index: 10;
    pointer-events: none;
    animation: project-sticker-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.project-hero-sticker svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 980px) {
    .project-hero-sticker {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 767px) {
    .project-hero-sticker {
        width: 130px;
        height: 130px;
        left: 22%;
        top: 60%;
    }
}

/* ===== About Hero — right column full-height image + swoop ===== */
.kb-row-layout-wrap.about-hero {
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.kb-row-layout-wrap.about-hero > .kt-row-column-wrap {
    align-items: stretch !important;
    column-gap: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Left column (text): stretch background to fill full row height */
.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Right column (image): flex chain to fill full height and all remaining width */
.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    position: relative;
    align-self: stretch !important;
}

.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    min-height: 0;
    height: 100%;
}

/* Cover both: image directly in column, or wrapped in a Group block */
.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col > .wp-block-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
}

figure.about-hero {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    min-height: 0 !important;
}

figure.about-hero .kb-image-wrap {
    flex: 1 !important;
    display: flex !important;
    min-height: 0 !important;
}

figure.about-hero .kb-img {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

/* Swoop: palette1 D-shape at the left edge of the image column */
.kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80px;
    background: var(--global-palette1);
    clip-path: ellipse(70% 50% at 0% 50%);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 980px) {
    .kb-row-layout-wrap.about-hero > .kt-row-column-wrap > .wp-block-kadence-column:last-child::before {
        display: none;
    }

    figure.about-hero {
        min-height: 280px !important;
    }
}

/* ===== Project partners marquee ===== */
@keyframes ppm-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ppm-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.project-partners-marquee {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 0;
}

.ppm-track {
    overflow: hidden;
}

.ppm-inner {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ppm-left linear infinite;
}

.ppm-inner--rtl {
    animation-name: ppm-right;
}

.ppm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 90px;
    margin: 0 16px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}

a.ppm-item:hover {
    opacity: 1;
}

.ppm-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ppm-track:hover .ppm-inner {
    animation-play-state: paused;
}

@media (max-width: 767px) {
    .ppm-item {
        width: 110px;
        height: 55px;
        margin: 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppm-inner,
    .ppm-inner--rtl { animation: none; }
}

/* Kadence advanced heading used as body text: respect newlines between paragraphs */
p.wp-block-kadence-advancedheading {
    white-space: pre-line;
}

/* ===== Project video shortcode ===== */
.pvw-wrap {
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
}

.pvw-inner {
    position: relative;
    aspect-ratio: 16 / 9;
}

.pvw-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.pvw-cover {
    position: absolute;
    inset: 0;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

.pvw-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pvw-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.pvw-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.pvw-play svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ===== Mobile drawer ===== */

/*
 * Kadence's #inner-wrap always has transform:none + transition applied, creating
 * a stacking context with z-index:auto. The drawer (z-index:100000) therefore
 * paints on top of any z-index set on #masthead from within that context.
 * Fix: when the drawer is open, body.drawer-open is set by nav.js, which triggers
 * position:fixed on #masthead so it escapes #inner-wrap's stacking context entirely.
 * We compensate the lost flow space with padding-top only while the drawer is open.
 */
@media (max-width: 1024px) {
    body.drawer-open #masthead {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200000;
    }

    /* Kill shadow and any white background Kadence's sticky JS sets on wrapper elements */
    body.drawer-open .site-main-header-wrap,
    body.drawer-open .site-header-row-container-inner,
    body.drawer-open .site-header-upper-wrap,
    body.drawer-open .site-header-upper-inner-wrap {
        background: transparent !important;
        box-shadow: none !important;
        transition: none !important;
    }

    body.drawer-open #inner-wrap {
        padding-top: var(--bgpp-header-h, 70px);
    }
}

/* Hide the overlay — our custom #bgpp-drawer-bg handles the background slide. */
.popup-drawer .drawer-overlay {
    display: none !important;
}

/* Full-screen blue panel that slides in from the right when the drawer opens.
 * z-index 99999 = below drawer-inner content (100000) and masthead (200000). */
#bgpp-drawer-bg {
    position: fixed;
    inset: 0;
    background: #40798c;
    z-index: 99999;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#bgpp-drawer-bg.is-open {
    transform: translateX(0);
}

/* Drawer covers the full screen — we don't fight Kadence for drawer-inner top.
 * Instead, the nav content is padded down by the header height so items start
 * below the fixed masthead. The masthead (z-index:200000) paints on top. */
#mobile-drawer .drawer-inner {
    background-color: #40798c !important;
}

/* Collapse the built-in drawer header — our custom close button lives in <body> */
#mobile-drawer .drawer-header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Push nav content below the fixed header so first item clears the white bar.
 * Extra 1rem gives breathing room so the first item isn't flush with the header. */
#mobile-drawer .mobile-navigation {
    padding-top: calc(var(--bgpp-header-h, 70px) + 0rem) !important;
}

/* Toggle-close-bar X marks */
#mobile-drawer .toggle-close-bar {
    background-color: #fff;
}

/* Override Kadence's padding and font-size on all drawer nav items */
#mobile-drawer .mobile-navigation ul li {
    font-size: 2.2rem !important;
    font-weight:600!important;
}

#mobile-drawer .mobile-navigation ul li a {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Parent menu items */
#mobile-drawer .mobile-navigation > .menu > .menu-item > .drawer-nav-drop-wrap > a,
#mobile-drawer .mobile-navigation > .menu > .menu-item > a {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
    color: #fff !important;
}

/* Prevent focus/hover colour sticking on parent after sub-menu close */
#mobile-drawer .mobile-navigation .menu-item > .drawer-nav-drop-wrap > a:focus,
#mobile-drawer .mobile-navigation .menu-item:focus-within > .drawer-nav-drop-wrap > a {
    color: #fff !important;
}

#mobile-drawer .mobile-navigation > .menu > .menu-item {
    width: 100%;
}

#mobile-drawer .drawer-sub-toggle {
    color: #fff;
}

#mobile-drawer .drawer-sub-toggle svg {
    fill: #fff;
}

/* Sub-menu items */
#mobile-drawer .sub-menu .menu-item a {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.85) !important;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-weight:500;
}

/* ===== Gravity Form popup ===== */
body.gf-popup-open {
    overflow: hidden;
}

.gf-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.gf-popup-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.gf-popup {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.gf-popup-overlay.is-open .gf-popup {
    transform: translateY(0) scale(1);
}

.gf-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.gf-popup-close:hover,
.gf-popup-close:focus {
    background: #40798c;
    color: #fff;
    outline: none;
}

/* Gravity Forms field overrides inside popup */
.gf-popup .gfield label,
.gf-popup .gfield legend {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.gf-popup .gfield input,
.gf-popup .gfield textarea,
.gf-popup .gfield select {
    border: 1.5px solid #d0d0d0!important;
    border-radius: 0.65rem !important;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 0.2s;
    font-family: inherit;
}

.gf-popup .gfield input:focus,
.gf-popup .gfield textarea:focus,
.gf-popup .gfield select:focus {
    border-color: #40798c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(64, 121, 140, 0.15);
}

.gf-popup .gform_footer input[type="submit"],
.gf-popup .gform_page_footer input[type="submit"] {
    background: #40798c;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 0.65rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.gf-popup .gform_footer input[type="submit"]:hover,
.gf-popup .gform_footer input[type="submit"]:focus {
    background: #4A7C59;
    outline: none;
}

.gf-popup .gform_confirmation_message {
    color: #4A7C59;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    padding: 1rem 0;
}

@media (max-width: 600px) {
    .gf-popup {
        padding: 1.75rem 1.25rem;
        border-radius: 1rem;
    }
}

/* ===== Step icon list SVG fix ===== */
/* Kadence forces fill="currentColor" on the SVG root, turning stroke-based icons
   into solid shapes. Override so stroke-based icons render correctly. */
.step-one svg,
.step-two svg,
.step-three svg {
    fill: none !important;
    vertical-align: middle;
}

.step-one svg path,
.step-two svg path,
.step-three svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.step-one .kb-svg-icon-wrap,
.step-two .kb-svg-icon-wrap,
.step-three .kb-svg-icon-wrap {
    vertical-align: middle;
}

/* ===== Other ways + Three steps rows — gap + scroll-in animation ===== */
@media all and (min-width: 981px) {
    #other-ways > .kt-row-column-wrap,
    #three-steps > .kt-row-column-wrap {
        column-gap: 1.25rem !important;
    }
}

/* Three steps — equal-height cards */
#three-steps .wp-block-kadence-column {
    display: flex !important;
    flex-direction: column !important;
}
#three-steps .wp-block-kadence-column .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
#three-steps .wp-block-kadence-column .wp-block-group {
    flex: 1 !important;
}

#other-ways .wp-block-kadence-column .wp-block-group,
#three-steps .wp-block-kadence-column .wp-block-group {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: none !important;
}
#other-ways .wp-block-kadence-column .wp-block-group.sr-visible,
#three-steps .wp-block-kadence-column .wp-block-group.sr-visible {
    animation: sr-drop 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--sr-delay, 0s);
}
@keyframes sr-drop {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #other-ways .wp-block-kadence-column .wp-block-group,
    #three-steps .wp-block-kadence-column .wp-block-group { opacity: 1; transform: none; animation: none !important; }
}