/* --- 0. BASE LAYER ---

   These two rules came from the Bricks theme, not from the site's own CSS, so
   they did not travel with the pages when the site was lifted out of WordPress.

   They are not cosmetic. Everything below is sized in rem against a TEN pixel
   root: --h2-size is 5.2rem, meaning 52px, and --p-size is 1.8rem, meaning 18px.
   Without the 62.5% the browser's own 16px root applies and the entire site
   renders about 1.6 times too large - 83px headings, 29px body text.

   Verified against the live site: html 10px, body 15px/1.7. */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: auto;
    line-height: 1.15;
}

body {
    font-size: 15px;
    line-height: 1.7;
}

/* Headings reset their margins and do not inherit the body's 1.7 line-height.
   Without these an h3 like .team-meta-name sets 37.4px instead of 30.8px, which
   grew every team card by 7px. Matched against the live site element by
   element. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    text-rendering: optimizeLegibility;
}

h3, h4 {
    line-height: 1.4;
}

/* Paragraphs carry no top margin. The site's own CSS only ever sets
   margin-bottom, and relied on the platform having zeroed the browser default
   of 1em - which showed up as 16px of extra space above every paragraph inside
   the service cards. */
p {
    margin-top: 0;
}

/* Images scale to their container. The team grid and the logo both depend on
   this; without it a 1200px headshot overflows its card. */
img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* The service cards are <label> elements driving a checkbox toggle, and took
   their 5px gap from the theme. */
label {
    display: block;
    margin-bottom: 5px;
}

/* --- 1. SHARED CORE & VARIABLES --- */
:root {
    --mint: #78d6b4;
    --dark-green: #1b5a44;
    --bg-dark: #0b0d0c;
    --h2-size: 5.2rem;
    --p-size: 1.8rem;
}

* { box-sizing: border-box; }

body { 
    margin: 0;
    font-family: 'Inter', sans-serif; 
    background: var(--bg-dark); 
    color: white; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden;
}

/* --- 2. UNIFIED TYPOGRAPHY (Prioritizing your top class) --- */
.h2-display { 
    font-size: var(--h2-size); 
    font-weight: 900; 
    letter-spacing: 4px !important; /* Fixed as requested */
    line-height: 80px !important;   /* Fixed as requested */
    margin-bottom: 25px; 
}

p { font-size: var(--p-size); line-height: 1.5; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; }

.mint-glow { color: var(--mint); text-shadow: 0 0 30px rgba(120, 214, 180, 0.4); }

.eyebrow { 
    display: block; font-weight: 900; text-transform: uppercase; 
    letter-spacing: 6px; font-size: 1.3rem; margin-bottom: 20px; color: var(--mint); 
}

/* --- 3. SHARED NAVIGATION --- */
.brand-logo-fixed {
    position: absolute; top: 25px; left: 50px; height: 150px;
    filter: brightness(0) invert(1); z-index: 100;
}

.advanced-nav { position: absolute; top: 55px; right: 50px; z-index: 100; }

.nav-list { display: flex; gap: 60px; list-style: none; margin: 0; padding: 0; }

.nav-link {
    color: #fff; text-decoration: none; font-weight: 800;
    text-transform: uppercase; letter-spacing: 4px; font-size: 1.1rem;
    transition: color 0.3s ease;
}
.nav-link:hover { color: var(--mint); }

/* --- 4. HERO VARIATIONS --- */
.hero-kanter, .service-hero, .about-hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    background-size: cover; background-position: center; padding: 160px 50px 80px;
}

.hero-kanter { background-image: linear-gradient(to right, rgba(11, 13, 12, 0.96) 35%, rgba(11, 13, 12, 0.5) 100%), url('https://media.licdn.com/dms/image/v2/D5612AQEmpgpLJMp7PA/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1695142036048?e=2147483647&v=beta&t=PtNREauerwPAtvIfPXlgzXlNmwg88k-xaDmQQqe2_p4'); }

.service-hero { text-align: center; padding: 220px 50px 80px; background: linear-gradient(rgba(11, 13, 12, 0.8), rgba(11, 13, 12, 0.8)), url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&q=80&w=2071'); }

.about-hero { text-align: left; padding: 220px 50px 120px; background: linear-gradient(to bottom, rgba(11, 13, 12, 0.7), var(--bg-dark)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2069'); }

/* --- 5. STATS & CONTAINERS --- */
.hero-container, .container { width: 100%; max-width: 1600px; margin: 0 auto; }
.container { max-width: 1300px; }
.hero-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; }
.hero-main-content { flex: 1; max-width: 850px; }

.stats-column { display: flex; flex-direction: column; gap: 20px; width: 620px; flex-shrink: 0; }
.stat-card { 
    display: flex; align-items: center; gap: 25px; 
    background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(20px); 
    padding: 30px; border-radius: 15px; border-left: 6px solid var(--mint);
}
.stat-number { font-size: 3.8rem; font-weight: 900; color: var(--mint); line-height: 1; min-width: 120px; }
.stat-desc { font-size: 1.5rem; line-height: 1.3; color: #fff; font-weight: 600; margin: 0; }
.stat-source {
	font-size: 10px;
	font-style: italic;
}
/* --- 6. SECTION CONTENT BLOCKS --- */
.content-block, .section-block { padding: 120px 50px; width: 100%; position: relative; }
.content-block { background: #fff; color: #0b0d0c; text-align: center; }
.content-block p { color: #333; }
.dark-section { background: var(--bg-dark); color: white; }
.dark-section p { color: rgba(255,255,255,0.9); }
.alt-bg { background: #f8faf9; }

/* --- 7. FEATURE CARDS & LISTS --- */
.feature-card { 
    background: var(--dark-green); color: white; padding: 70px; border-radius: 4px; 
    box-shadow: 25px 25px 0px var(--mint); display: flex; text-align: left; gap: 60px; margin-top: 60px; 
}
.card-intro { flex: 0.8; }
.card-intro h3 { font-size: 3.2rem; font-weight: 900; color: var(--mint); line-height: 1.1; margin-bottom: 25px; }

.standard-list { flex: 1.4; list-style: none; padding: 0; margin: 0; }
.standard-list li { padding: 25px 0; border-bottom: 1px solid rgba(120, 214, 180, 0.2); display: flex; align-items: flex-start; }
.standard-list li::before { margin-right: 25px; font-weight: 900; font-size: 2.2rem; color: var(--mint); flex-shrink: 0; margin-top: -4px; }
.list-item-fail::before { content: "✕"; }
.list-item-pass::before { content: "✓"; }

.list-content strong { display: block; color: var(--mint); font-size: 2.2rem; font-weight: 900; margin-bottom: 8px; }
.list-content span { display: block; font-size: 1.8rem; color: rgba(255, 255, 255, 0.95); line-height: 1.5; }

/* --- 8. COMPACT INTERACTIVE GRID --- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 40px; }
.toggle-input { display: none !important; }

.services-grid:has(.toggle-input:checked) { grid-template-columns: 1fr; }
.services-grid:has(.toggle-input:checked) .card-wrapper:not(:has(:checked)) { display: none; }

.scaling-card {
    display: block; position: relative; background-color: var(--dark-green);
    padding: 40px; cursor: pointer; border-radius: 4px; min-height: 280px;
    transition: all 0.3s ease; overflow: hidden; border: 1px solid rgba(120, 214, 180, 0.2);
}
.card-wrapper:has(.toggle-input:checked) .scaling-card { background-color: var(--mint); cursor: default; min-height: auto; padding-bottom: 60px; }

.number-watermark { position: absolute; top: -5px; right: 15px; font-size: 7rem; font-weight: 900; color: rgba(120, 214, 180, 0.08); z-index: 1; pointer-events: none; }
.title { margin: 0; font-size: 1.7rem; font-weight: 800; color: #fff; position: relative; z-index: 2; line-height: 1.2; max-width: 85%; }
.toggle-input:checked + .scaling-card .title { color: var(--dark-green); font-size: 3.5rem; letter-spacing: -2px; max-width: 100%; }

.toggle-status { margin-top: 25px; display: inline-block; padding: 10px 22px; background: rgba(120, 214, 180, 0.1); border: 1px solid var(--mint); color: var(--mint); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; }
.toggle-status::before { content: "View Details +"; }
.toggle-input:checked + .scaling-card .toggle-status { background: var(--dark-green); color: #fff; border-color: var(--dark-green); }
.toggle-input:checked + .scaling-card .toggle-status::before { content: "Close Details —"; }

.detailed-text { display: none; opacity: 0; color: #000; }
.toggle-input:checked + .scaling-card .detailed-text { display: block; opacity: 1; margin-top: 35px; }
.detailed-text p { color: #000 !important; font-size: 1.6rem; font-weight: 500; margin-bottom: 20px; }
.divider { width: 100%; height: 2px; background: rgba(27, 90, 68, 0.15); margin-bottom: 25px; }

.executive-list { padding: 0; list-style: none; margin: 20px 0; }
.executive-list li { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; padding-left: 30px; position: relative; color: #000; }
.executive-list li::before { content: "—"; position: absolute; left: 0; color: var(--dark-green); font-weight: bold; }

/* --- 9. SPECTRUM GRID (About Page) --- */
.spectrum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
.spectrum-item { background: #161a19; padding: 40px; border-top: 4px solid var(--mint); transition: transform 0.3s ease; }
.spectrum-item:hover { transform: translateY(-10px); }
.spectrum-title { color: var(--mint); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 15px; display: block; }
.spectrum-desc { font-size: 1.4rem; line-height: 1.4; color: rgba(255,255,255,0.8); }

/* --- 10. BUTTONS & UTILS --- */
.btn-main { background: var(--mint); color: var(--dark-green); padding: 25px 55px; font-weight: 900; text-transform: uppercase; text-decoration: none; display: inline-block; font-size: 1.2rem; border-radius: 4px; transition: transform 0.2s ease; }
.btn-main:hover { transform: scale(1.02); }

.check-list { list-style: none; padding: 0; margin: 30px auto; max-width: 800px; }
.check-list li { font-size: 1.8rem; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px 0; display: flex; align-items: center; }
.check-list li::before { content: "✓"; color: var(--mint); margin-right: 25px; }

/* --- 11. RESPONSIVE --- */
@media (max-width: 1200px) {
    .hero-flex, .feature-card, .services-grid, .spectrum-grid { flex-direction: column; grid-template-columns: 1fr; }
    .hero-main-content, .stats-column { width: 100%; max-width: 100%; }
    .h2-display { font-size: 3.5rem; line-height: 1.2 !important; }
    .brand-logo-fixed { height: 70px; left: 20px; }
    .advanced-nav { top: 30px; right: 20px; }
}
/* --- MOBILE MENU LOGIC --- */

/* 1. The Toggle Mechanism (Hidden Checkbox) */
#menu-toggle {
    display: none;
}

/* 2. The Hamburger Icon (Label) */
.menu-button {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    z-index: 101;
    padding: 10px;
}

.menu-button span {
    display: block;
    width: 30px;
    height: 3px;
    background: white;
    margin: 6px 0;
    transition: 0.3s;
}

/* 3. Responsive Adjustments */
@media (max-width: 1024px) {
    .menu-button {
        display: block; /* Show hamburger on mobile */
        position: fixed;
        top: 35px;
        right: 20px;
    }

    .nav-list {
        position: fixed;
        top: 0;
        right: -100%; /* Hide menu off-screen */
        width: 100%;
        height: 100vh;
        background: var(--bg-dark);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 99;
    }

    /* 4. The "Open" State */
    #menu-toggle:checked ~ .nav-list {
        right: 0; /* Slide menu in */
    }

    /* 5. Animate Hamburger to 'X' */
    #menu-toggle:checked ~ .menu-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    #menu-toggle:checked ~ .menu-button span:nth-child(2) {
        opacity: 0;
    }
    #menu-toggle:checked ~ .menu-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .nav-link {
        font-size: 2rem; /* Make links larger for touch */
    }
}
@media (max-width: 1024px) {
    /* Ensure the nav container stays at the top right */
    .advanced-nav {
        position: fixed;
        top: 35px; 
        right: 30px;
        z-index: 1001; /* Above everything */
        display: block;
        width: auto;
    }

    /* Force the Hamburger to be visible */
    .hamburger {
        display: flex !important; /* Overrides any hidden states */
        flex-direction: column;
        gap: 5px;
        width: 30px;
        height: 24px;
        cursor: pointer;
    }

    /* Make sure the spans have color and thickness */
    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--mint) !important; /* Use your mint color so it pops */
        border-radius: 2px;
    }

    /* The Drawer - Ensure it has a background so links are visible */
    .nav-list {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100vw;
        height: 100vh;
        background: #0b0d0c; /* Your --bg-dark */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        transition: right 0.4s ease-in-out;
    }

    /* Slide it in when checked */
    .menu-checkbox:checked ~ .nav-list {
        right: 0 !important;
    }
}
@media (max-width: 1024px) {
    /* 1. Keep the hamburger icon ABOVE the menu drawer */
    .hamburger {
        display: flex !important;
        position: fixed; /* Crucial: Keeps it in the corner when scrolling */
        top: 35px;
        right: 30px;
        z-index: 1002; /* Higher than the nav-list */
    }

    /* 2. Animate the lines into an 'X' when the checkbox is checked */
    .menu-checkbox:checked ~ .hamburger span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--mint);
    }

    .menu-checkbox:checked ~ .hamburger span:nth-child(2) {
        opacity: 0; /* Hide the middle line */
    }

    .menu-checkbox:checked ~ .hamburger span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--mint);
    }

    /* 3. Ensure the list doesn't cover the close button */
    .nav-list {
        z-index: 1001; 
    }
}
@media (max-width: 1024px) {
    .nav-list {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100vw;
        height: 100vh;
        background: var(--bg-dark);
        
        /* ADD THESE THREE LINES */
        visibility: hidden;      /* Makes it totally invisible */
        pointer-events: none;    /* Prevents clicking links through the 'invisible' wall */
        border: none !important; /* Removes any accidental border lines */
        
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

    /* REVEAL IT WHEN CHECKED */
    .menu-checkbox:checked ~ .nav-list {
        right: 0;
        visibility: visible;    /* Bring it back */
        pointer-events: auto;   /* Make links clickable again */
    }
}
        :root {
            --mint: #78d6b4;
            --dark-green: #1b5a44;
            --bg-dark: #0b0d0c;
            --h2-size: 5.2rem;
            --p-size: 1.8rem;
        }

        * { box-sizing: border-box; }
        body { 
            margin: 0; 
            font-family: 'Inter', sans-serif; 
            background: var(--bg-dark); 
            color: white; 
            -webkit-font-smoothing: antialiased;
        }

        .contact-hero {
            position: relative;
            min-height: 80vh; /* Reduced height for a header-only feel */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 180px 50px 100px;
            text-align: center;
            background: linear-gradient(rgba(11, 13, 12, 0.85), rgba(11, 13, 12, 0.85)),
                        url('https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&q=80&w=2074');
            background-size: cover;
            background-position: center;
        }

/* --- 12. TEAM PAGE LAYOUT & POPUPS --- */

/* Complete Full-Width Background Stretch Hero */
.team-hero-fullwidth {
    position: relative;
    width: 100vw;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 180px 0 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* FIXED: Forces the hero background grid image and gradients to hit 100% true monitor width display bounds */
    background-image: linear-gradient(to bottom, rgba(15, 36, 29, 0.65), var(--bg-dark)), 
                      url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2069');
}

.team-hero-content-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Base Fullwidth Page Shell */
.team-fullwidth-section {
    padding: 120px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #f8faf9;
}

/* Widescreen Scaling Wrapper */
.team-grid-widescreen-wrapper {
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
    padding: 0 40px;
}

/* Multi-Column Layout Grid Setup Rules */
.team-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px 30px; 
    width: 100%;
}

/* Individual Block Component Setup Elements */
.team-profile-card {
    position: relative;
    background: #ffffff;
    border-radius: 12px; 
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(11, 13, 12, 0.04);
    border: 1px solid rgba(27, 90, 68, 0.06);
}

.team-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(27, 90, 68, 0.12);
}

.team-media-holder {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0f3f2;
}

.team-media-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-profile-card:hover .team-media-holder img {
    transform: scale(1.03);
}

.team-meta-panel {
    padding: 30px 20px;
    background: #ffffff;
    text-align: center;
}

.team-meta-name {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 0 8px 0;
    color: var(--dark-green);
    letter-spacing: -0.2px;
}

.team-meta-role {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666666;
    margin: 0;
}

/* Full Screen Cinematic Popup Overlay */
.biography-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 13, 12, 0.85);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.biography-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Frame with Large Layout Metrics */
.biography-modal-container {
    background: var(--dark-green); 
    max-width: 1400px;
    width: 100%;
    height: 80vh;
    max-height: 850px;
    overflow: hidden;
    border-radius: 24px; 
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

/* Close Window Trigger Styles */
.biography-close-trigger {
    position: absolute;
    top: 30px;
    right: 35px;
    background: rgba(11, 13, 12, 0.3);
    border: none;
    color: #ffffff; 
    font-size: 3.5rem;
    cursor: pointer;
    z-index: 2020;
    transition: transform 0.2s ease, color 0.2s ease;
    font-weight: 300;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6px;
}

.biography-close-trigger:hover {
    color: var(--mint);
    transform: scale(1.05);
}

/* 50/50 Split Grid Container Frame */
.biography-split-view {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left Sidebar 50% Panel Image Frame Area */
.biography-sidebar-panel {
    flex: 0 0 50%; 
    height: 100%;
    position: relative;
}

.biography-sidebar-panel .team-media-holder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Smooth Translucent Blur Edge Mask Layer Between Split Views */
.biography-sidebar-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 160px;
    height: 100%;
    background: linear-gradient(to right, rgba(27, 90, 68, 0) 0%, var(--dark-green) 100%);
    backdrop-filter: blur(2px); 
    pointer-events: none;
    z-index: 2010;
}

/* Right Side Bio Text Space Module */
.biography-main-details {
    flex: 0 0 50%; 
    height: 100%;
    background: var(--dark-green); 
    padding: 90px 70px;
    overflow-y: auto;
    position: relative;
}

.biography-main-details .team-meta-name {
    color: #ffffff !important; 
    font-size: 4.2rem;
    line-height: 1.1;
    margin-bottom: 10px;
}

.biography-main-details .team-meta-role {
    color: var(--mint) !important; 
    font-size: 1.4rem;
    font-weight: 800;
}

.biography-main-details p {
    font-size: 1.65rem;
    line-height: 1.7;
    color: #ffffff !important; 
    margin-bottom: 25px;
    opacity: 0.95;
}

/* Responsive Media Breakdown Intercept System Rules */
@media (max-width: 1200px) {
    .team-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .team-grid-widescreen-wrapper {
        padding: 0 20px;
    }

    .biography-modal-container {
        height: auto;
        max-height: 85vh;
        overflow-y: auto;
    }

    .biography-split-view {
        flex-direction: column;
    }
    
    .biography-sidebar-panel, 
    .biography-main-details {
        flex: none;
        width: 100%;
    }

    .biography-sidebar-panel {
        height: 400px;
    }

    .biography-sidebar-panel::after {
        width: 100%;
        height: 160px;
        bottom: -1px;
        top: auto;
        right: 0;
        background: linear-gradient(to bottom, rgba(27, 90, 68, 0) 0%, var(--dark-green) 100%);
    }

    .biography-main-details {
        padding: 50px 40px;
    }
}

@media (max-width: 768px) {
    .team-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .team-hero-fullwidth {
        padding: 140px 20px 80px;
    }
}

/* Kanter Solutions brand styling — Founder Maturity Scorecard (form ID 3 only) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&display=swap');

#frm_form_3_container, #frm_form_3_container input, #frm_form_3_container label, #frm_form_3_container button {
  font-family: 'Inter', sans-serif !important;
}

#frm_form_3_container h1, #frm_form_3_container h2, #frm_form_3_container h3, #frm_form_3_container .frm_form_title {
  font-family: 'Inter Tight', sans-serif !important;
}

#frm_form_3_container input[type="radio"],
#frm_form_3_container input[type="checkbox"] {
  accent-color: #78D6B4 !important;
}

#frm_form_3_container .frm_primary_label {
  color: #ffffff !important;
}

#frm_form_3_container button[type="submit"],
#frm_form_3_container input[type="submit"],
#frm_form_3_container .frm_button_submit,
#frm_form_3_container .frm_next_page {
  background-color: #78D6B4 !important;
  color: #0B0D0C !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#frm_form_3_container .frm_progress_line,
#frm_form_3_container .frm-progress-bar-line,
#frm_form_3_container .frm_bar {
  background-color: #78D6B4 !important;
}
#frm_form_3_container label {
  color: #ffffff !important;
}
/* Progress bar fill + percentage text */
#frm_form_3_container .frm_bar_fill,
#frm_form_3_container .frm-progress-bar-fill,
#frm_form_3_container .frm_bar > div,
#frm_form_3_container .frm_bar span {
  background-color: #78D6B4 !important;
}

#frm_form_3_container [class*="progress"],
#frm_form_3_container [class*="percent"] {
  color: #ffffff !important;
}

/* One more attempt at the radio button */
#frm_form_3_container input[type="radio"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: #78D6B4 !important;
}
#frm_form_3_container [class*="progress"],
#frm_form_3_container [class*="bar"] {
  background-color: #78D6B4 !important;
}
#frm_form_3_container .frm_rootline_title,
#frm_form_3_container input.frm_page_back {
  background-color: #78D6B4 !important;
}
#frm_form_3_container .frm_rootline_title,
#frm_form_3_container input.frm_page_back {
  border-color: #78D6B4 !important;
}
#frm_form_3_container .frm_form_field {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}

#frm_form_3_container .frm_radio {
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}

#frm_form_3_container .frm_radio label {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

#frm_form_3_container .frm_radio:has(input:checked) {
  border-color: #78D6B4 !important;
  background: rgba(120,214,180,0.08) !important;
}

#frm_form_3_container .frm_radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  margin: 0 10px 0 0 !important;
  position: relative !important;
}

#frm_form_3_container .frm_radio input[type="radio"]:checked {
  border-color: #78D6B4 !important;
}

#frm_form_3_container .frm_radio input[type="radio"]:checked::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #78D6B4 !important;
}
#frm_form_4_container button[type="submit"],
#frm_form_4_container input[type="submit"],
#frm_form_4_container .frm_button_submit {
  background-color: #78D6B4 !important;
  color: #0B0D0C !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 0 #1B5A44 !important;
  padding: 12px 24px !important;
}
#frm_form_4_container #frm_field_77_container {
  color: rgba(255,255,255,0.75) !important;
}
#frm_form_4_container button[type="submit"],
#frm_form_4_container input[type="submit"],
#frm_form_4_container .frm_button_submit {
  background-color: #78D6B4 !important;
  color: #0B0D0C !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 0 #1B5A44 !important;
  padding: 12px 24px !important;
  margin-top: 16px !important;
}
#frm_form_4_container {
  max-width: 480px;
  margin: 80px auto 0 auto;
  padding: 40px 36px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,214,180,0.2);
  border-radius: 12px;
}
#frm_form_4_container #frm_field_77_container {
  color: rgba(255,255,255,0.75) !important;
}
#frm_form_4_container #frm_field_77_container h3 {
  color: #78D6B4 !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
}
#frm_form_4_container .frm_message {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#frm_form_3_container #frm_field_41_container {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', sans-serif !important;
}
#frm_form_3_container #frm_field_57_container h2 {
  color: #78D6B4 !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
}
#frm_form_3_container #frm_field_57_container p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', sans-serif !important;
}
@media (max-width: 600px) {
  body.page-id-697 h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  #frm_form_3_container ul.frm_page_bar {
    display: none !important;
  }
}
@media (max-width: 600px) {
  #frm_form_3_container .frm_percent_complete,
  #frm_form_3_container .frm_pages_complete {
    color: #78D6B4 !important;
    font-weight: 600 !important;
  }
}
@media (max-width: 600px) {
  #frm_form_3_container .frm_percent_complete {
    display: none !important;
  }
  #frm_form_3_container .frm_rootline_group {
    justify-content: center !important;
  }
  #frm_form_3_container .frm_pages_complete {
    color: #78D6B4 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    background: rgba(120,214,180,0.12) !important;
    border: 1px solid rgba(120,214,180,0.35) !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
  }
}
@media (max-width: 600px) {
  #frm_form_3_container .frm_pages_complete {
    float: none !important;
    display: inline-block !important;
  }
  #frm_form_3_container .frm_rootline_group {
    text-align: center !important;
  }
}
#frm_form_3_container .frm_error {
  color: #FF6B6B !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* --- 13. CONTACT FORM ---

   The old form was rendered by Formidable Forms, which brought its own styling
   with it. Nothing here existed before, so these follow the site's own
   language: mint accent, deep green ink, the same 4px radius as .btn-main. */

.contact-form-section {
    background: #f8faf9;
    padding: 100px 50px 120px;
}

.contact-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.contact-form-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #0b0d0c;
    line-height: 1.2;
    margin-bottom: 12px;
}

.contact-form-intro {
    font-size: 1.6rem;
    color: #4a5a54;
    margin-bottom: 40px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 600px) {
    .field-row { grid-template-columns: 1fr; }
    .contact-form-section { padding: 70px 25px 90px; }
}

.field { margin-bottom: 26px; }

.field label {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark-green);
    margin-bottom: 8px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #d5dfda;
    border-radius: 4px;
    background: #ffffff;
    color: #0b0d0c;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.6;
}

.field textarea { resize: vertical; min-height: 160px; }

.field input:focus-visible,
.field textarea:focus-visible {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(27, 90, 68, 0.15);
}

.field.has-error input,
.field.has-error textarea { border-color: #b4432f; }
.field.has-error label { color: #b4432f; }

.field-error {
    margin: 8px 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #b4432f;
}

.form-status {
    min-height: 1.6rem;
    margin: 0 0 20px;
    font-size: 1.4rem;
    font-weight: 700;
    /* The global p rule paints text white for the dark pages. This section is
       light, so the colour has to be stated or the status line is invisible. */
    color: var(--dark-green);
}
.form-status.is-error { color: #b4432f; }

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-sent {
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--dark-green);
    font-weight: 700;
    padding: 30px;
    background: #ffffff;
    border-left: 4px solid var(--mint);
    border-radius: 4px;
}

.contact-form-section button.btn-main {
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.contact-form-section button.btn-main[disabled] { opacity: .55; cursor: default; }