/* Base Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #fff;
    color: #333;
    padding-top: var(--header-h); /* Space for fixed navbar */
}

body {
    overflow-x: hidden;
}
/*
label;.......................................................*/


h1, h2, h3, h4 {
    font-family: 'Caladea', serif;
}

a {
    text-decoration: none;
}

p {
    margin-bottom: 1.875rem; /* 30px if base font-size is 16px */
    font-size: 1.125rem; /* ~18px */
    line-height: 1.6;
}


/* Navbar Base Styles */
#mainNavbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 1030; /* Keeps navbar on top of hero */
}

    /* Shrink on scroll */
    #mainNavbar.scrolled {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        opacity: 0.9;
    }

    /* Ensure spacing and alignment in container */
    #mainNavbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

/* Logo Sizing */
.navbar-logo {
    height: 50px;
    max-height: 50px;
    transition: height 0.3s ease;
}

#mainNavbar.scrolled .navbar-logo {
    height: 45px;
}

/* Smooth transitions */
.navbar,
.navbar-logo {
    transition: all 0.3s ease;
}

/* Centered menu spacing */
.navbar-nav {
    gap: 1.5rem;
}

/* Bold nav links */
#mainNavbar .navbar-nav > .nav-item > .nav-link {
    font-weight: 500;
    color: #333; /* Optional: ensures dark text */
}

/* Temporarily hide nav menu items without collapsing layout */
body.page-onetriad #navbarResponsive .navbar-nav {
    opacity: 0 !important;
    pointer-events: none; /* Optional: disables hover/clicks */
}

/* === Interactive Nav Links (Bootstrap Compatible) === */
#mainNavbar .navbar-nav .nav-link {
    position: relative;
    font-weight: 600;
    color: var(--brand-ink, #4e5a32);
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

    /* Hover + focus feedback */
    #mainNavbar .navbar-nav .nav-link:hover,
    #mainNavbar .navbar-nav .nav-link:focus {
        color: var(--brand, #637141);
        background: rgba(194,171,108,0.15);
        transform: translateY(-1px);
    }

    /* Animated underline for hover */
    #mainNavbar .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 0%;
        height: 2px;
        background: var(--accent, #c2ab6c);
        border-radius: 2px;
        transition: width 0.25s ease;
    }

    #mainNavbar .navbar-nav .nav-link:hover::after {
        width: 100%;
    }

    /* Active link styling */
    #mainNavbar .navbar-nav .nav-link.active,
    #mainNavbar .navbar-nav .nav-link[aria-current="page"] {
        color: #fff;
        background: var(--brand, #637141);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Focus ring for accessibility */
    #mainNavbar .navbar-nav .nav-link:focus-visible {
        outline: 2px solid var(--accent, #c2ab6c);
        outline-offset: 2px;
    }

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
    #mainNavbar .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

        #mainNavbar .navbar-nav .nav-link {
            width: 100%;
            padding: 12px 18px;
        }

            #mainNavbar .navbar-nav .nav-link::after {
                display: none; /* disable underline animation on mobile */
            }
}

/* === Navbar Logo Hover Animation (Subtle Version) === */
.navbar-logo {
    height: 50px;
    max-height: 50px;
    transition: transform 0.35s ease, filter 0.35s ease, height 0.3s ease;
    cursor: pointer;
}

    /* Hover: gentler lift + softer brightness */
    .navbar-logo:hover {
        transform: translateY(-2px) scale(1.03); /* smaller lift and scale */
        filter: brightness(1.05); /* softer brightness (was 1.1) */
    }

    /* Click: quick feedback */
    .navbar-logo:active {
        transform: translateY(-1px) scale(0.98);
        filter: brightness(0.95);
    }

/* Shrink on scroll still applies */
#mainNavbar.scrolled .navbar-logo {
    height: 45px;
    transform: none;
}


/* === CTA Buttons === */

/* Navbar CTA */
.btn-navbar-cta {
    background-color: #637141;
    color: #fff;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

    .btn-navbar-cta:hover,
    .btn-navbar-cta:active,
    .btn-navbar-cta:focus {
        background-color: #8aa151 !important;
        color: #fff !important;
        outline: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

/* HERO BUTTON / ANIMATION */

/* Bounce-in keyframes */
@keyframes bounce-in {
    0% {
        transform: scale(0.8);
    }

    60% {
        transform: scale(1.1);
    }

    80% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* Pulse glow keyframes */
@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(249, 198, 42, 0.6);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(249, 198, 42, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(249, 198, 42, 0.6);
    }
}

.btn-hero-cta {
    background-color: #f9c62a;
    color: #000;
    font-size: 1.1rem;
    padding: 1.2rem 1.8rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    transform .1s ease;
    /* 🎵 sync with fade-in delay-6 */
    animation: bounce-in 0.3s ease forwards 0.3s, /* bounce after fade */
    pulse-glow 7s ease-in-out infinite 6s; /* pulse starts later */
}

    .btn-hero-cta:hover,
    .btn-hero-cta:active,
    .btn-hero-cta:focus {
        background-color: #ffd75f !important;
        color: #000 !important;
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 25px rgba(249, 198, 42, 0.8) !important;
    }

.home-hero .mrg-top {
    margin-top: 1.3rem;
}


/* Content section CTA (optional) */
.btn-content-cta {
    background-color: #f9c62a;
    color: #000;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

    .btn-content-cta:hover,
    .btn-content-cta:active,
    .btn-content-cta:focus {
        background-color: #ffd75f !important;
        color: #000 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }



/* General Utility Section: Neutral BG + Padding */
/* color-revise */
.section-neutral {
    /*background-color: #f2f5f7;*/
    background-color: rgba(245, 242, 232, 0.75); /* #f5f2e8 variant */
}

.section-vert-pad {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-title {
    font-family: 'Caladea', serif;
    font-size: clamp(30px, 2.8vw, 42px);
    margin-bottom: .5rem;
    font-weight: 400;
}


/* Paragraph Styling */
.section-paragraph {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}



/* Hero Section */
/* ------------------------------
   DEFAULT HERO (Landing Image)
------------------------------- */
.home-hero {
    position: relative;
    height: auto;
    min-height: calc(100svh - var(--peek));
    background: url('/images/landing.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: visible;
    padding-top: calc(var(--header-h) - 0.5rem);
    padding-bottom: var(--hero-bottom-safe, 6rem);
    z-index: 1;
    box-sizing: border-box;
}

/* bump safe zones when space gets tight */
@media (max-width: 1200px) {
    :root {
        --hero-bottom-safe: 8.5rem;
        --hero-top-gap: 1rem;
    }
}

@media (max-width: 992px) {
    :root {
        --hero-bottom-safe: 10rem;
        --hero-top-gap: 1rem;
    }
}

@media (max-width: 768px) {
    :root {
        --hero-bottom-safe: 11.5rem;
        --hero-top-gap: 1rem;
    }
}

@media (max-width: 576px) {
    :root {
        --hero-bottom-safe: 13rem;
        --hero-top-gap: 2rem;
    }
}

/* fallback for browsers without svh */
@supports not (height: 1svh) {
    .home-hero {
        min-height: calc(100vh - var(--header-h));
    }
}


.home-hero-overlay {
    position: relative;
    z-index: 2;
    padding: 0rem 2rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.0); /* transparent overlay */
}

@media (max-width: 992px) {
    .home-hero-overlay {
        padding: 1rem 2rem;
    }
}

@media (max-width: 576px) {
    .home-hero-overlay {
        padding: 1rem 1.5rem;
    }
}



/* ------------------------------
   VIDEO HERO OVERRIDE
------------------------------- */
.home-hero.video-hero {
    background: none !important; /* remove default bg */
}

/* Background image ONLY when NOT video */
.home-hero:not(.video-hero) {
    background: url('/images/landing.jpg') center/cover no-repeat;
}

.home-hero.video-hero .bg-video {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.9;
    pointer-events: none;
}






/* Keyframes for fade in + slide up */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in + slight upward slide */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideIn 0.8s ease-out forwards;
}

/* Stagger delays */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

.delay-5 {
    animation-delay: 1s;
}

.delay-6 {
    animation-delay: 1.2s;
}

.delay-7 {
    animation-delay: 1.4s;
}

@keyframes fadeSlideIn {
    to {
        opacity: .9;
        transform: translateY(0);
    }
}


.home-hero h1 {
    font-size: clamp(38px, 3.4vw, 50px);
    font-family: 'Caladea', serif;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

    .home-hero h1 .highlight-key {
        color: #c2ab6c;
        /*color: #f9c62a;*/ /* your brand gold */
        text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* ensures readability */
    }

.home-hero-list {
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.35;
    font-family: 'Caladea', serif;
    margin-bottom: 1rem;
    max-width: 600px; /* <-- tighten container width */
    margin-left: auto; /* center container */
    margin-right: auto;
    text-align: left; /* align checks + text together */
}

    .home-hero-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .home-hero-list li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 0.75rem;
    }

        .home-hero-list li::before {
            content: "\2714\FE0E"; /* ✔ with text-variation selector (prevents emoji) */
            position: absolute;
            left: 0;
            color: #c2ab6c !important;
            font-weight: bold;
            font-family: system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* avoid Apple Color Emoji */
            -webkit-text-fill-color: #c2ab6c !important; /* Safari mobile fix */
            mix-blend-mode: normal; /* prevent blending on dark backgrounds */
        }


.home-hero .divider {
    width: 40px;
    height: 1px;
    background-color: #fff;
    margin: 1.2rem auto;
    /* opacity: .6;*/
}

.home-hero-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.7); /* 60% black */
    border-radius: 2rem; /* pill shape */
    padding: 0.5rem 1.25rem; /* vertical/horizontal breathing room */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0rem;
}

.home-hero-small {
    font-size: 1rem;
    font-family: 'Roboto', serif;
    font-weight: 400;
    letter-spacing:.3px;
    color: #fff; /* ensure readability */
}



/* ALT HERO – v1 (for Terms, Privacy, etc.) */
.alt-hero-v1 {
    position: relative;
    height: 400px; /* short but respectable */
    overflow: hidden;
}

    .alt-hero-v1 .alt-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.75); /* subtle darkening */
    }

/* Value Bar */

.value-bar {
    background-color: #637141;
    padding-top: 2.0rem;
    font-family: 'Caladea', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 0;
    margin-top: 0;
    clear: both;
}

.value-feature {
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.0rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .value-feature.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .value-feature:nth-child(1) {
        transition-delay: 0.1s;
    }

    .value-feature:nth-child(2) {
        transition-delay: 0.4s;
    }

    .value-feature:nth-child(3) {
        transition-delay: 0.7s;
    }

    .value-feature:nth-child(4) {
        transition-delay: 1.0s;
    }



.value-icon {
    max-height: 55px;
    flex-shrink: 0;
}

.value-text {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-left: 0.55rem;
}

/* Content */



.content-narrow .lead {
    font-weight: 300; 
    font-color: #0f0f0f; font-size: 1.25rem; /* Optional: override Bootstrap default */
    color: #0f0f0f;
    line-height: 1.6;
    text-align: left;
}
.content-narrow .divider {
    width: 40px;
    height: 1px;
    background-color: #8c8c8e;
    margin: 2rem auto;
    opacity: .4;
    align-content: center;
}


.content-narrow {
    max-width: 760px;
    margin: 0 auto;
}




/* How Section */

.animation-sandbox-specs {
    background: #fff;
    padding: 2rem .5rem 1rem .5rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    min-height: 400px;
    position: relative;
}

/* Prevent flicker on initial load */
#step-image.preload-hidden,
.step-blurb.preload-hidden {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: none !important;
    pointer-events: none !important;
}


.animation-image img {
    max-height: 380px;
    object-fit: contain;
}

/* Container for blurb blocks */
.animation-blurb-group {
    position: relative;
    margin-top: 1.4rem;
    min-height: 100px;
}

/* Each step-blurb is centered absolutely */
/*.step-blurb {
    display: flex;
    justify-content: center;*/ /* Horizontally center child */
    /*position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    transition: all 0.6s ease-in-out;
    width: 100%;
    max-width: 640px;
    pointer-events: none;
    text-align: center;
}

    .step-blurb.active {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
        z-index: 2;
    }*/

/* Keyframes: pop in effect */
@keyframes popIn {
    0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
    }

    50% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1.0);
        opacity: 1;
    }
}

/* Each step-blurb is centered absolutely */
.step-blurb {
    display: flex;
    justify-content: center; /* Horizontally center child */
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    width: 100%;
    max-width: 640px;
    pointer-events: none;
    text-align: center;
}

    /* Active state triggers animation */
    .step-blurb.active {
        animation: popIn 0.6s ease forwards;
        pointer-events: auto;
        z-index: 2;
    }


/* Just the box now */
.step-blurb-box {
    padding: 0.85rem 1.25rem;
    border-radius: 50px;
    max-width: 100%;
    text-align: center;
    background: rgba(220, 225, 229, 0.6); /* ghost steel-blue from #dce1e5 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); /* Very soft glow */
}

.step-blurb-text {
    margin: 0;
    font-size: 1.325rem;
    line-height: 1.2;
    font-weight: 600;
    font-family: 'Caladea', serif;
}

#step-image {
    transition: opacity 0.5s ease-in-out;
}

/* Prevent Bootstrap gutter/margin/padding from injecting a left line */
.animation-sandbox .col-md-6:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* Also make sure image itself is clean */
#step-image {
    display: block;
    margin: 0 auto;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}
.how-step-nav {
    display: flex;
    justify-content: center;
    align-items: center;
   /* gap: 0.5rem;*/
}

.btn-nav {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #d7c89f; /* official brand color */
    cursor: pointer;
    transition: color 0.3s ease;
}

    .btn-nav:hover {
        color: #394f7c; /* slightly darker on hover (optional) */
    }

.how-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
}

.how-indicator {
    width: 5px;
    height: 5px;
    background-color: #ccc;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .how-indicator.active {
        background-color: #404040; /* Your primary logo color */
    }




/* ========== FAQ Section Styling ========== */

.faq-section {
    margin-top:1rem;
    margin-bottom:1rem;
}

.faq-intro {
    max-width: 500px;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

@keyframes fadeSlideRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accordion Base */
.faq-accordion .accordion-item {
    border: 1px solid #e9dfc3;
    border-radius: 5px;
    margin-bottom: 1rem;
    background-color: #f5f2e8;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

    .faq-accordion .accordion-item.animate-in {
        animation: fadeSlideRight 0.6s ease forwards;
        animation-delay: inherit; /* used if delay is inline or class-based */
    }

/* Header button */
.faq-accordion .accordion-button {
    background-color: #f5f2e8 !important;
    font-family: 'Caladea',serif;
    font-weight: 500;
    font-size: 1.6rem;
    color: #4e4837;
    padding: 1rem 1.5rem;
    position: relative;
    padding-left: 3rem;
    border: none; /* REMOVE Bootstrap's border entirely */
    border-radius: 5px;
    transition: border 0.3s ease;
}

    /* Override any border-bottom Bootstrap re-adds */
    .faq-accordion .accordion-button:not(.collapsed) {
        border-bottom: none !important;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    /* Icon Box */
    .faq-accordion .accordion-button::before {
        content: "+";
        position: absolute;
        left: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 2px solid #645e4c;
        color: #645e4c;
        font-size: 1.6rem;
        text-align: center;
        line-height: 20px;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Active = Minus and rotate */
    .faq-accordion .accordion-button:not(.collapsed)::before {
        content: "–";
        transform: translateY(-50%) rotate(180deg);
        background-color: #645e4c;
        color: white;
        border-color: #645e4c;
    }

    /* Remove default arrow */
    .faq-accordion .accordion-button::after {
        display: none;
    }

.faq-accordion .accordion-text {
    margin-left: .8rem;
    display: inline-block;
}

.accordion-body.accordion-body-text {
    font-family: 'Roboto', sans-serif;
    color: #4e4837 !important;
}

.accordion-body-text p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.accordion-body-text .val-list {
    padding-left: 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    line-height: 1.6;
    list-style-type: lower-alpha; /* matches a, b, c, etc. */
}

    .accordion-body-text .val-list li {
        margin-bottom: 0.5rem;
    }


/* Remove focus shadow */
.faq-accordion .accordion-button:focus,
.faq-accordion .accordion-button:focus-visible,
.faq-accordion .accordion-button:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    background-color: inherit !important;
}

/* color-revise */
/* Eliminate ALL border-bottom from accordion-button */
.faq-accordion .accordion-button {
    border: none !important;
    border-radius: 5px;
    /*    background-color: #f8f9fa; */
    background-color: #f5f2e8;
}


    /* When collapsed, keep it clean — NO re-added borders */
    .faq-accordion .accordion-button.collapsed {
        border-bottom: none !important;
    }


/* Highlight open item wrapper */
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 1px solid #4e4837;
    background-color: #f5f2e8;
    /*box-shadow: 0 0 0 4px rgba(90, 103, 117, 0.15);*/ /* soft blue outer glow */
}

    /* Add our single divider line only on open */
    .faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-body {
        border-top: 1px solid #f3f1ea; /* soft gray */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }


/* color-revise */
.section-neutral {
    /*background-color: #f2f5f7;*/
    background-color: rgba(245, 242, 232, 0.55); /* #f5f2e8 variant */
}


/* color-revise */
/* === WHO WE ARE Section Styles === */
.who-we-are {
    background-color: rgba(245, 242, 232, 0.55); /* #f5f2e8 variant */
    font-family: 'Roboto', sans-serif;
    color: #333;
    padding-bottom: 5rem;
}

    .who-we-are .who-intro {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #444;
    }

        /* Style links inside the who-intro section */
        .who-we-are .who-intro a {
            color: #637141; /* choose your preferred color */
            text-decoration: underline; /* optional, for emphasis */
            transition: color 0.3s ease; /* smooth hover effect */
        }

            /* Hover state for the link */
            .who-we-are .who-intro a:hover {
                color: #005999; /* darker shade on hover */
                text-decoration: none; /* optional: remove underline on hover */
            }

    .who-we-are .who-list {
        font-size: 1.05rem;
        line-height: 1.6;
        color: #444;
    }

        .who-we-are .who-list li {
            margin-bottom: 1rem;
        }

/* Partner Logos Row (no animation here — just trigger) */
.logo-row {
    margin-top: 4rem;
}

.partner-logo {
    max-width: 200px;
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease-in-out;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Trigger animation ONLY when in viewport via .fade-in class */
.logo-row.fade-in .partner-logo {
    animation: fadeInUp 1s ease forwards;
}

    /* Staggered delays */
    .logo-row.fade-in .partner-logo:nth-child(1) {
        animation-delay: 0.3s;
    }

    .logo-row.fade-in .partner-logo:nth-child(2) {
        animation-delay: 0.6s;
    }

    .logo-row.fade-in .partner-logo:nth-child(3) {
        animation-delay: 0.9s;
    }

/* Hover scale on logo wrapper */
.logo-link {
    display: inline-block;
    transition: transform 0.4s ease-in-out;
}

    .logo-link:hover {
        transform: scale(1.17);
    }

/* Fade-up animation keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}








/* ========== ValuEdge Comparison Table ========== */

.ve-compare-section {
/*    background-color: #fff;
*/    padding: 2rem 0;
}

    .ve-compare-section .container {
        background-color: #e1dbcc;
        padding: 2.5rem 1.0rem;
        border-radius: 0px;
    }

@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ve-compare-row {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    display: block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
    .ve-compare-row.animate-in {
        animation: fadeSlideUp 0.6s ease forwards;
    }

.ve-feature-col {
    font-family: 'Caladea', serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #4e4837;
    margin-bottom: 1rem;
    text-align: center;
}

.ve-VE-col,
.ve-other-col {
    margin-bottom:0;
    font-family: 'Roboto', sans-serif !important;
    color: #333;
}

/* Style for mobile-only column labels */

.ve-mobile-label {
    font-family: 'Caladea', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.ve-mobile-header-1 {
    margin: 0 0;
}

.ve-mobile-header-2 {
    margin: 0 0;
}



/* Table-like layout for desktop (≥ 769px) */

@media (min-width: 767.8px) {



    .ve-compare-section {
     padding: 4rem 0;
}

        .ve-compare-section .container {
            background: #e4dbc4;
            padding: 2rem;
            border-radius: 20px;
            overflow: hidden;
        }
    /* Shared row layout */
    .ve-compare-row {
        display: flex;
        background: #e1dbcc;
        align-items: stretch;
        justify-content: space-between;
        padding: 0;
        margin-bottom: 0;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    /* All three column types use this flex layout */
    .ve-feature-col,
    .ve-VE-col,
    .ve-other-col {
        flex: 1;
        padding: 1.5rem;
        box-sizing: border-box;
        margin: 0;
        border: none;
        display: flex;
        align-items: center;
    }

    /* Base style for left-hand labels */
    .ve-feature-col {
        background-color: #fff;
        font-family: 'Caladea', serif;
        font-size: 1.2rem;
        font-weight: 500;
        padding-right: 2rem;
        text-align: left;
    }

    /* ValuEdge content column */
    .ve-VE-col {
        background-color: #e0d5c2;
        color: #000;
        font-family: 'Caladea', serif;
    }


    /* Other solution column */
  /*  .ve-other-col {
        background-color: red;
        color: #000;
        font-family: 'Caladea', serif;
    }*/

    .ve-feature-col,
    .ve-VE-col,
    .ve-other-col {
        display: flex;
        align-items: center; /* Vertically centers text */
    }
    
    /* VISUAL HEADER ROW: overrides only background + text style */
    .ve-compare-header-alt .ve-feature-col {
        background-color: #fff; /* or #f0f0f0 if preferred */
    }
    .ve-compare-section .container > .ve-compare-header-alt:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        overflow: hidden; /* ensures child content like .ve-feature-col doesn't leak */
    }



    .ve-compare-header-alt .ve-VE-col {
        background: #b69b4f /*linear-gradient(to bottom, #1f3752, #17293d)*/;
        color: #fff;
        font-weight: 700;
        font-size: 1.4rem;
        justify-content: center;
        text-align: center;
        font-family: 'Caladea', serif !important;
    }

        .ve-compare-header-alt .ve-other-col {
            background-color: #637141;
            color: #fff;
            font-weight: 700;
            font-size: 1.4rem;
            justify-content: center;
            text-align: center;
            font-family: 'Caladea', serif !important;
        }

    /* Round the bottom corners on the last row only */
    /*.ve-compare-row:last-of-type {
        border-radius: 0 0 20px 20px !important;
    }*/

    .ve-compare-row:nth-child(odd) .ve-feature-col {
        background-color: #f9f8f3; /* very light gray */
    }

    .ve-compare-row:nth-child(even) .ve-feature-col {
        background-color: #ffffff; /* white */
    }

    /* Alternate background ONLY for rows under the VE header */
    .ve-compare-row:nth-of-type(2) .ve-VE-col {
        background-color: #f5f2e8; /* light */
    }

    .ve-compare-row:nth-of-type(3) .ve-VE-col {
        background-color: #ede8d6; /* darker */
    }

    .ve-compare-row:nth-of-type(4) .ve-VE-col {
        background-color: #f5f2e8; /* light again */
    }
    .ve-compare-row:nth-of-type(5) .ve-VE-col {
        background-color: #ede8d6; /* darker */
    }

    /* Skip header row (which is not a .ve-compare-row), then alternate the others */
    .ve-compare-row:nth-of-type(n+2):nth-of-type(odd) .ve-other-col {
        background-color: #f9f8f3; /* dark */
    }

    .ve-compare-row:nth-of-type(n+2):nth-of-type(even) .ve-other-col {
        background-color: #ffffff; /* light */
    }
   
    /* Round bottom corners ONLY on the last row */
    .ve-last-row .ve-feature-col {
        border-bottom-left-radius: 15px;
    }

    .ve-last-row .ve-other-col {
        border-bottom-right-radius: 15px;
    }


}


/* Contact Section */

/* Gray background wrapper for contact block */
.contact-card {
    background-color: #e4dbc4; 
    border-radius: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .contact-card.animate-in {
        opacity: 1;
        transform: translateY(0);
    }

    .contact-card .row {
        display: flex;
        align-items: center; /* This centers the column content vertically */
        flex-wrap: wrap; /* Keep Bootstrap’s responsive row behavior */
    }


.contact-section-p {
    font-size: 1.0rem;
    color: #4e4837;
}

/* Checkmark text spacing */
.contact-list-indent li {
    position: relative;
    padding-left: 1.5rem; /* controls left offset of icon and text */
    text-indent: -0.5rem; /* pulls second line back so it aligns under first */
    font-style: italic;
}
.contact-list-fixed li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.contact-list-fixed i {
    flex-shrink: 0;
    margin-top: 0.2rem; /* aligns icon better with multiline text */
    color: #4e4837;
}

.contact-list-fixed span {
    font-style: italic;
    padding-left: 0.1rem;
}


/* Contact button styles */
.btn-contact {
    background-color: #637141;
    color: #fff;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius:8px;
    transition: background-color 0.3s ease;
}

    .btn-contact:hover {
        background-color: #8aa151;
        color: #fff;
    }

/* Checkmark icon color */
.text-contact-blue {
    color: #4e4837;
}

/* Subtle faded input fields with no border */
.contact-section .form-control {
    background-color: rgba(255, 255, 255, 0.75); /* white with a soft fade */
    border: none;
    color: #333;
    transition: background-color 0.3s ease;
    border-radius: 6px; /* optional: preserve some soft edges */
}

    /* Brighten on focus */
    .contact-section .form-control:focus {
        background-color: rgba(255, 255, 255, 1);
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(164, 152, 131, 0.25); /* soft glow only */
    }
.contact-section label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4e4837; /* optional: gives it contrast on light background */
    margin-bottom: 0.25rem;
    display: inline-block;
}


/* ================================
   Testimonials Carousel – 3 Card Format
   ================================ */

.testimonials {
    padding: 4rem 0 6rem 0;
    background-color: #fff; /* optional section background */
}

    .testimonials .testimonial-slider {
        max-width: 1540px;
        margin: 0 auto;
    }

    .testimonials .slick-slide {
        padding: 0 15px;
        box-sizing: border-box;
    }


    /* Testimonial card container */
    .testimonials .testimonial-card {
        border: none;
        border-radius: 15px;
        background-color: rgba(245, 242, 232, 0.55); /* creamy-beige glassy look */
        padding: 2rem 1.5rem  0rem 1.5rem;
        margin: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 550px;
        max-width: 550px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        text-align: center;
    }

    /* Large faded quote */
    .testimonials .testimonial-quote {
        width: 48px;
        margin: 0 auto 1rem;
        opacity: 0.7;
    }

    .testimonials .testimonial-text-wrapper {
        display: flex;
        align-items: center; /* Vertically center text */
        justify-content: center; /* Optional: horizontally center */
        min-height: 200px; /* Controls vertical space */
        padding: 0 1rem; /* Optional horizontal padding */
    }


    /* Testimonial text body */
    .testimonials .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #333;
        margin-bottom: 1.5rem;
        
    }

    /* Divider line between quote and author */
    .testimonials .divider {
        width: 40px;
        height: 1px;
        background-color: #ccc;
        margin: 1rem auto;
        opacity: 0.6;
    }

    /* Image or avatar style if used */
    .testimonials .testimonial-avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        margin: 1rem auto 0.5rem;
        border: 2px solid #ccc;
    }

    /* Wrap the whole author area */
    .testimonials .test-carousel-author {
        display: flex;
        flex-direction: column;
        align-items: center; /* ✅ centers everything horizontally */
        text-align: center; /* ✅ centers text inside */
        margin-top: 2rem !important;
    }

    .testimonials .testimonial-author-icon {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        margin-bottom: 0.5rem; /* space below icon */
    }

    /* Name */
    .testimonials .testimonial-author {
        font-weight: bold;
        font-size: 0.95rem;
        margin: 0; /* clean up default spacing */
    }


    /* Role */
    .testimonials .testimonial-role {
        font-size: 0.85rem;
        color: #666;
        font-weight: normal;
        display: block;
        margin-top: 0.25rem; /* small space below name */
    }



.testimonial-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

    .testimonial-slider-nav .slick-arrow {
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #d7c89f;
        cursor: pointer;
        padding: 0.4rem;
        transition: color 0.3s ease;
    }

        .testimonial-slider-nav .slick-arrow:hover {
            color: #2e507f;
        }




/* Dots */
/*.slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    position: static !important;
}

    .slick-dots li button:before {
        font-size: 12px;
        color: #aaa;
        opacity: 1;
    }

    .slick-dots li.slick-active button:before {
        color: #333;
    }*/



@media (max-width: 1000px) {

    .testimonials {
        padding: 2rem 0 4rem 0;
        background-color: #fff; /* optional section background */
    }

    .testimonials .testimonial-card {
        margin: 0 0.5rem;
        padding: 1.5rem 1rem;
        min-height: 550px;
    }

    .testimonials .testimonial-text {
        font-size: 0.9rem;
        min-height: 120px;
    }
}     


        /* 🔄 Unified Carousel Nav Style for Testimonials */
        /* Carousel container */
        .test-caro {
    position: relative;
}

    /* DOTS — matches how-indicator style */
    .test-caro .carousel-indicators {
        justify-content: center;
/*        margin-top: 2rem;
*/        gap: 0.15rem;
    }

        .test-caro .carousel-indicators [data-bs-target] {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #bbb; /* default */
            opacity: 0.6;
            border: none;
            transition: all 0.3s ease;
        }

        .test-caro .carousel-indicators .active {
            background-color: #c2ab6c; /* Your primary logo color */
            opacity: 1;
        }



.test-caro-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* spacing between arrow / dots / arrow */
    margin-top: 2rem;
}

    .test-caro-nav .carousel-indicators {
        position: static !important; /* 👈 this is the missing piece */
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
    }



/* ARROWS — now Flex items, not absolutely positioned */
    .test-caro-nav .carousel-control-prev,
    .test-caro-nav .carousel-control-next {
        position: static; /* No more absolute positioning */
        width: auto;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #d7c89f;
        padding: 0;
        opacity: 1;
        line-height: 1;
        transition: color 0.3s ease;
    }

        .test-caro-nav .carousel-control-prev:hover,
        .test-caro-nav .carousel-control-next:hover {
            color: #a38b4a;
        }


/* Hide Bootstrap default icon spans */
.test-caro-nav .carousel-control-prev-icon,
.test-caro-nav .carousel-control-next-icon {
    display: none;
}


/* Author area with image or logo */
.test-caro .test-carousel-author {
    margin-top: 2rem;
    margin-bottom:1rem;
}

.test-caro .testimonial-author-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%; /* Or remove for logos */
    border: 1px solid #ccc;
}


/* TERMS */

.terms-list {
    padding-left: 2rem; /* indentation */
    margin-bottom: 2rem;
}

    .terms-list li {
        margin-bottom: 1rem;
        line-height: 1.6;
    }
.paren-style {
    list-style: none;
    counter-reset: alpha;
    padding-left: 2rem;
}

    .paren-style li {
        counter-increment: alpha;
        position: relative;
        padding-left: 2.8rem; /* increased spacing */
        margin-bottom: 1rem;
        line-height: 1.6;
    }

        .paren-style li::before {
            content: "(" counter(alpha, lower-alpha) ")";
            position: absolute;
            left: 0;
            width: 2.5rem; /* optional: keeps markers aligned */
            text-align: right; /* right-aligns marker inside width */
            font-weight: 500;
            color: #333;
        }


.paren-style-numbers {
    list-style: none;
    counter-reset: num;
    padding-left: 2rem;
}

    .paren-style-numbers li {
        counter-increment: num;
        position: relative;
        padding-left: 2.8rem; /* INCREASED from 2rem */
        margin-bottom: 1rem;
        line-height: 1.6;
    }

        .paren-style-numbers li::before {
            content: "(" counter(num) ")";
            position: absolute;
            left: 0;
            width: 2.5rem; /* OPTIONAL: reserves space for the marker */
            text-align: right;
            font-weight:500;
            color: #333;
        }

.ordered-terms-list li {
    margin-bottom: 1.2rem; /* Adjust as needed */
}

.ordered-privacy-list li {
    margin-bottom: 1.2rem; /* Adjust as needed */
}

.terms-dates {
    font-size:.875rem !important;
}
.text-divider {
    width: 100%;
    height: 1px;
    background-color: #c8c8c8; /* Superlight gray */
    margin: 2rem 0; /* Adjust spacing above/below as needed */
    border: none;
}


/* Media | News | Blog */

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.media-section h1 {    
    font-family: 'Caladea', serif;
    font-weight:800;
}

.media-section h3 {
    font-family: 'Caladea', serif;
    font-size:2rem;
}

.media-section .card-text {
    font-size: 1rem;
}

.text-body-secondary {
    font-size:.8rem;
}

.btn-media {
    display: inline-flex; /* NOT block */
    width: auto;
    color: #000;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .btn-media:hover {
        color: #555;
        *padding: 0.25rem text-decoration: none;
    }

    .btn-media i {
        font-size: 1rem;
        margin-left: 0.5rem; /* instead of ms-1 */
        transition: transform 0.3s ease;
    }


    .btn-media:hover i {
        transform: translateX(2px);
    }

.img-thumb {
    width: 220px;
    height: 250px;
    object-fit: cover;
}


/* Article, Blog Post, News */

.blog-post {
    font-family: 'Caladea', Georgia, serif;
    line-height: 1.7;
    color: #333;
    max-width: 1000px;
    margin: 0 auto; /* ✅ centers the block */
}

.blog-post-meta {
    margin-bottom: 1.5rem;
    color: #777;
    font-size: 0.9rem;
}

.blog-post blockquote {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-left: 0.25rem solid #ccc;
    background-color: #f8f9fa;
    font-style: italic;
}

.media-article-section h1,
.media-article-section h2,
.media-article-section h3,
.media-article-section h4 {
    margin-bottom: 1.2rem;
}



/* Footer */
footer {
    background-color: #222529;
    color: rgba(255, 255, 255, 0.6); /* White at 60% opacity */
    padding: 1rem 0;
    text-align: center;
    font-size: 0.875rem;
}
    footer * {
        color: rgba(255, 255, 255, 0.6);
    }


    footer a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
    }

        footer a:hover {
            color: rgba(255, 255, 255, 0.8);
        }
.footer-logo {
    height: 40px;
    opacity: 0.6; /* Matches the text opacity */
    transition: opacity 0.3s ease;
}

.footer-links-wrapper {
    gap: 0.5rem;
    align-items: center;
}

.footer-txt {
    padding: 0 0.4rem;
    white-space: nowrap; /* keeps the links on one line */
    font-size: 0.875rem;
}

.footer-separator {
    color: #999;
}


@media (max-width: 991.98px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-hero {
        /*height: 70vh;
        min-height: unset;
        height: auto;*/ /* Optional: lets content drive height naturally */
        padding: 1rem 1rem; /* Add spacing if needed on small screens */
        padding-top: calc(var(--header-h) + 0.5rem);
        padding-bottom: var(--hero-bottom-safe, 9rem)
    }
    
    .img-thumb {
        display:none !important;
    }

    /* Layout: Navbar container flex settings */
    #mainNavbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* Logo settings */
    #mainNavbar .navbar-brand {
        max-height: 50px;
        margin-right: auto;
        display: flex;
        align-items: center;
    }

    .navbar-logo {
        height: 40px;
        max-height: 40px;
        transition: height 0.3s ease;
    }

    /* Hamburger button visibility and cleanup */
    .navbar-toggler {
        z-index: 1050;
        border: none;
        outline: none;
        box-shadow: none;
        margin-left: auto;
        padding: 0.25rem 0.75rem;
    }

        .navbar-toggler:focus {
            box-shadow: none;
        }

    /* Collapse menu area styles */
    .navbar-collapse {
        width: 100%;
        background-color: #fff;
        padding: 1rem 0;
        margin-top: 0.5rem;
        flex-basis: 100%;
        order: 3;
    }

        .navbar-collapse.show {
            display: flex !important;
        }

        .navbar-collapse .d-flex {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }

    /* Nav list styles */
    .navbar-nav {
        width: 100%;
        padding-left: 0;
    }

    #mainNavbar .navbar-nav {
        align-items: flex-start;
    }

    #mainNavbar .nav-link {
        padding-left: 1.25rem;
        text-align: left;
        width: 100%;
        font-weight: 600;
    }

    /* CTA button mobile styling */
    .btn-navbar-cta {
        margin: 1rem auto; /* Top and bottom margin for spacing */
        display: block; /* Show on mobile */
        width: 90%;
        max-width: 320px;
        text-align: center;
        font-weight:500;
        padding: 0.5rem 1rem;
        order: 2; /* Move to bottom */
    }

    /* Ensure the nav items are above the button */
    .navbar-nav {
        order: 1; /* Place nav items above the button */
    }

    /* Optional: secondary logo appearance */
    .hero-mobile-logo {
        display: block;
        height: 75px;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .btn-hero-download {
        display: inline-block;
        white-space: nowrap;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.2);
        padding: 0.6rem 1.2rem;
        border-radius: 50px;
        font-size: 0.95rem;
        text-decoration: none;
        transition: background-color 0.3s ease, border-color 0.3s ease;
        margin-bottom: 1rem;
    }

        .btn-hero-download:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 1);
        }


    .logo-stack-up {
        margin-top: 3.4rem; /* adjust as needed */
    }
}




@media (min-width: 767.8px) and (max-width: 991.98px) {
    .value-bar {
        padding-top: .6rem;
        padding-bottom:.4rem;
        display: flex;
        flex-wrap: nowrap; /* keep them in one line */
        justify-content: space-between;
    }

    

        .value-bar .col-md-6,
        .value-bar .col-lg-3 {
            padding-left: 0.25rem; /* reduce default ~15px gutter */
            padding-right: 0.25rem;
        }

        .value-bar .value-feature {
            flex: 1 1 0; /* let them share equal width */
            margin: .6rem 0.5rem; /* spacing between items */
        }

            .value-bar .value-feature:first-child {
                margin-left: 0;
            }

            .value-bar .value-feature:last-child {
                margin-right: 0;
            }
    .value-icon {
        max-height: 45px;
        flex-shrink: 0;
    }

    .value-text {
        font-size: .87rem;
        line-height: 1.4;
        margin-left: 0.35rem;
    }

    /* Center slide horizontally */
    .testimonials .slick-track {
        display: flex !important;
        justify-content: center;
    }

    /* Ensure single card doesn't stretch or misalign */
    .testimonials .slick-slide {
        display: flex !important;
        justify-content: center;
    }

    /* Cap the width of the testimonial card */
    .testimonials .testimonial-card {
        margin: 0 auto;
        max-width: 600px;
    }

    .step-blurb-text {       
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .footer-links-wrapper {
        flex-wrap: nowrap !important; /* prevent wrapping on tablets+ */
        gap: 0.45rem; /* optional: spacing between links */
    }
}

@media (min-width: 767.8px) and (max-width: 820px) {
    .home-hero h1 {
        font-size: 2.8rem; /* down from 3.8rem */
    }
    .home-hero h2 {
        font-size: 1.2rem;       
        margin-bottom: 1rem;
    }

    .home-hero-small {
        font-size: .87rem;
    }

}



@media (max-width: 767.98px) {

    .alt-hero-v1 {
        height: 300px;
    }

    .content-narrow {
        max-width: 100%;
        padding: 0 1rem; /* Optional: adds breathing room on small screens */
    }

        .content-narrow .lead {
            font-size: 1rem;
        }

    .footer-txt {
        margin-top: 0.25rem;
    }

    .footer-logo {
        margin-bottom: 0.5rem;
    }

    .section-vert-pad {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .test-caro .carousel-wrapper {
        position: relative;
        padding: 0 .1rem;
    }

    .test-caro .carousel-item .col-md-4 {
        display: none;
    }

    .test-caro .carousel-item.active .col-md-4:nth-child(1) {
        display: block;
    }



    /* Optional: animate only the first card in the group */
    .test-caro .carousel-item .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }


    .step-blurb-text {
        font-size: 1.1rem;
    }


    /*.navbar-logo {
        height: 40px;*/ /* or whatever size looks good */
    /*transition: height 0.3s ease;
    }*/

    .home-hero {
        margin-top: 1rem;
    }

        .home-hero h1 {
            font-size: 2.0rem;
            margin-bottom: 1.8rem;
        }

        .home-hero-list {
            font-size: 1.3rem;
            line-height: 1.6rem;
            margin-bottom: 0rem;
        }

        .home-hero .divider {
            display: none;
        }

    .home-hero-small {
        font-size: .8rem;
        max-width: 100%;
    }

    /*.home-hero {
        height: 90vh;
    }*/

    .home-hero-list {
        margin-bottom: 0rem;
    }
    .home-hero-small {
        font-size: .8rem;        
    }

    /*.home-hero .mrg-top {
        margin-top:.8rem;
    }*/

    /*.home-hero-overlay {
        padding: 0 1rem;
    }*/

    .value-bar {
        padding-top: 2.0rem;
        padding-bottom: 2.0rem;
    }

        .value-bar .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

    .value-feature {
        flex: 0 0 50%;
        max-width: 50%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem 0.5rem;
        margin-bottom: .5rem;
    }

    .value-icon {
        max-height: 50px;
        margin-bottom: 0.5rem;
    }

    .value-text {
        font-size: 1.2rem;
        line-height: 1.5;
        margin: 0.5rem 0 0;
        max-width: 95%;
    }

    .testimonials-ver2 {
        padding: 2.4rem 0;
    }

    .testimonial-text-ver2 {
        font-size: 1.1rem;
    }

    .carousel-item {
        min-height: 425px; /* You can adjust this to whatever looks best */
    }

    /*.testimonial-section-ver2 {
        min-height: 750px;
    }*/
    .testimonial-arrow {
        display: none;
    }

    .faq-accordion .accordion-button {
        font-size: 1.4rem;
    }

    .faq-intro {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-section .text-md-start {
        text-align: center !important;
    }

    .faq-accordion .accordion-text {
        margin-left: 1.5rem; /* or even 1rem, depending on your visual preference */
    }

    .ve-VE-box {
        background-color: #f5f2e8; /* same as desktop VE column (even row) */
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .ve-other-box {
        background-color: rgb(249, 248, 243);
        padding: 1rem;
        border-radius: 8px;
    }

    .ve-mobile-header-box {
        padding: .2rem .2rem .2rem 1.0rem;
        border-radius: 8px;
        margin-left: .8rem;
        margin-bottom: -0.5rem;
        position: relative; /* Required for z-index to take effect */
        z-index: 1000;
        max-width: 200px;
    }

    .ve-header-gold {
        background-color: #bb9742;
        color: #fff;
    }

    .ve-header-blue {
        background-color: #637141;
        color: #fff;
    }

        /* Override text color if needed */
        .ve-header-gold .ve-mobile-label,
        .ve-header-blue .ve-mobile-label {
            color: #fff;
            font-family: 'Caladea', serif;
            font-weight: 600;
            font-size: 1rem;
            text-transform: none;
        }

    .ve-compare-section {
        background-color: #fff;
        padding: 4rem 0 0 0;
    }

        .ve-compare-section .container {
            background: #f2f5f7;
            padding: 2.5rem 1.0rem;
            border-radius: 0px;
        }


    /*.mobile-move-button {
        order: 3;
        margin-top: 2rem;
    }*/
}



/* ==== OneTriad Article — flat, mobile-first, wider body ==== */
.ot-article {
    --bg: #ffffff !important; /* Always white background */
    --ink: #0f172a;
    --muted: #4b5563;
    --brand: #637141; /* Dark Green */
    --brand-ink: #4e5a32;
    --tone: #bfc4ac; /* Grayish Yellow */
    --accent: #c2ab6c; /* Desaturated Orange */
    --ring: #d9decc;
    background-color: var(--bg) !important;
    color: var(--ink);
}

/* Disable dark mode overrides entirely */
@media (prefers-color-scheme: dark) {
    .ot-article {
        --bg: #ffffff !important; /* Still white */
        --ink: #0f172a !important;
    }
}


/* WIDER body + tighter side padding on mobile */
.ot-article {
    background: var(--bg);
    color: var(--ink) ;
    scroll-margin-top: 30px; /* ensures anchor jumps clear header */
    padding-top: 30px; /* pushes article content below navbar */
}

@media (max-width: 768px) {
    .ot-article {
        padding-top: 100px;
    }
}

.ot-wrap {
    max-width: 1400px; /* roomy overall layout */
    margin-inline: auto;
    padding-inline: 16px; /* reduced side padding (was 24–32px) */
}

.ot-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr); /* slightly narrower sidebar */
  column-gap: 56px;        /* space between ToC and text */
  align-items: start;
  grid-template-areas: "toc content";
}

/* Optional: on very wide screens, give the ToC a bit more room */
@media (min-width: 1400px) {
    .ot-grid {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .ot-body {
        max-width: 880px;
    }
}

@media (max-width: 992px) {
    .ot-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "toc";
    }

    .ot-aside {
        position: static;
        margin-top: 20px;
        margin-bottom: 24px;
        margin-left: 0; /* reset margins for mobile */
    }

    .ot-body {
        max-width: 100%;
    }
}


/* Header (flat) */
.ot-card {
    background: transparent;
    border: none;
    padding: 0 0 18px 0;
    border-bottom: 2px solid var(--ring)
}

.ot-eyebrow {
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8rem;
    margin: 0 0 6px
}

.ot-title {
    font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
    line-height: 1.15;
    margin-bottom: 12px;
}

.ot-sub {
    color: var(--muted);
    margin-bottom: 20px;
}

.ot-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .95rem
}

.ot-badge {
    background: transparent;
    color: var(--brand-ink);
    border: 1px solid var(--ring);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem
}

/* Body */
.ot-body h2 {
    font-size: clamp(22px,2.2vw,28px);
    margin: 26px 0 12px
}

.ot-body h3 {
    font-size: clamp(18px,2vw,22px);
    margin: 22px 0 10px
}

.ot-body h4 {
    font-size: 1.1rem;
    margin: 16px 0 8px
}

.ot-body {
    max-width: 860px; /* ideal reading line length */
    grid-area: content;
}

.ot-body p {
    margin: 12px 0
}

/* Lists inside the article body */
/* Bigger, clearer lists in articles */
.ot-body ul {
    margin: 20px 0 18px;
    padding-left: 1.2rem;
    font-size: 1.08rem; /* larger text */
    line-height: 1.55;
    list-style-position: inside;
}

    .ot-body ul li {
        margin: .45rem 0;
    }

        /* brand-forward bullets */
        .ot-body ul li::marker {
            color: var(--brand); /* #637141 */
            font-size: 1.2em; /* bigger bullet */
            font-weight: 900;
        }

/* Optional: ordered lists, if you use them */
.ot-body ol {
    margin: 12px 0 16px;
    padding-left: 1.25rem;
    list-style: decimal;
}

    .ot-body ol li {
        margin: .35rem 0;
    }

/* Compact nested lists */
.ot-body li ul,
.ot-body li ol {
    margin: .25rem 0 .35rem;
}

/* Key list (only where you add class="ot-keylist") */
.ot-keylist {
    margin: 14px 0 18px;
    padding: 12px 14px 12px 18px;
    font-size: 1.12rem; /* a bit bigger than normal lists */
    line-height: 1.6;
    background: linear-gradient(90deg, rgba(194,171,108,.18), rgba(194,171,108,0));
    border-left: 6px solid var(--brand);
    border-radius: 10px;
    list-style: none; /* custom bullets below */
}

    .ot-keylist li {
        position: relative;
        margin: .5rem 0;
        padding-left: 1.35rem; /* room for custom bullet */
    }

        .ot-keylist li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .6em;
            width: 10px;
            height: 10px;
            background: var(--brand); /* green dot */
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(99,113,65,.18); /* subtle halo */
        }


.ot-lead {
    font-size: 1.06rem;
    color: var(--ink);
    background: linear-gradient(90deg, rgba(191,196,172,.25), rgba(191,196,172,0));
    border-left: 4px solid var(--brand);
    padding: 12px 14px;
    margin: 16px 0 14px
}

/* Use-cases: flat list */
.ot-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.ot-use {
    background: transparent;
    border: 0;
    padding: 12px 12px 12px 16px;
    border-left: 4px solid var(--brand)
}

    .ot-use + .ot-use {
        border-top: 1px solid var(--ring)
    }

    .ot-use h4 {
        color: var(--brand-ink);
        margin: 0 0 6px
    }

/* ===== Scoped dropdown styling: ONLY for the "How does OneTriad value…" article ===== */
#ot-valuation .ot-use summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center; /* chevron aligns with title baseline */
    gap: 10px;
    padding: 12px 10px;
    border-radius: 10px;
}

    /* remove browser marker + any previous arrow you had */
    #ot-valuation .ot-use summary::-webkit-details-marker {
        display: none;
    }

    #ot-valuation .ot-use summary::marker {
        content: "";
    }

    #ot-valuation .ot-use summary::after {
        content: none !important;
    }
    /* nuke old right-side arrow */

    /* LEFT chevron: crisp SVG mask */
    #ot-valuation .ot-use summary::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin-right: 2px;
        color: var(--brand-ink);
        background: currentColor;
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') no-repeat center / contain;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') no-repeat center / contain;
        transform: rotate(-90deg); /* points right when closed */
        transition: transform .2s ease;
    }
/* points down when open */
#ot-valuation .ot-use[open] summary::before {
    transform: rotate(0deg);
}

/* keep your short green bar on the h4 */
#ot-valuation .ot-use summary h4 {
    position: relative;
    margin: 0;
    padding-left: 14px;
    color: var(--brand-ink);
}

    #ot-valuation .ot-use summary h4::before {
        content: "";
        position: absolute;
        left: 0;
        top: .2em;
        bottom: .2em;
        width: 6px;
        background: var(--brand);
        border-radius: 3px;
    }

/* panel body stays indented (optional rail) */
#ot-valuation .ot-panel {
    padding: 8px 10px 6px 24px;
    border-left: 1px dashed var(--ring);
    margin-left: 14px;
}

/* Mobile tightening */
@media (max-width: 575.98px) {
    #ot-valuation .ot-use summary {
        padding: 10px 8px;
    }

    #ot-valuation .ot-panel {
        padding: 8px 8px 6px 20px;
    }
}

/* Make in-page anchor jumps clear a fixed header (fallback = 84px) */
#ot-valuation-need [id] {
    scroll-margin-top: var(--header-h, 84px);
}

#ot-valuation .ot-use[open] summary::before {
    transform: none
}

#ot-valuation-need .ot-use summary::marker {
    content: none
}

/* Short green bar only on the heading line */
#ot-valuation-need .ot-use summary h4 {
    position: relative;
    cursor: default;
    margin: 0;
    padding-left: 14px;
    color: #000;
    font-weight: 200 ;
    line-height: 1.28;
}


/* Mobile tightening */
@media (max-width: 575.98px) {
    #ot-valuation-need .ot-use summary {
        padding: 10px 8px;
    }

    #ot-valuation-need .ot-panel {
        padding: 8px 8px 6px 20px;
    }
}



/* Sticky ToC on the LEFT */
.ot-aside {
    grid-area: toc;
    position: sticky;
    top: 100px;
    align-self: start;
    margin-left: 8px; /* was 0 → gentle shift closer to edge */
    margin-right: 0; /* tighten spacing between ToC + article */
}

/* ToC Styling */
.ot-toc {
    background: linear-gradient(180deg, rgba(191,196,172,.18), rgba(191,196,172,0));
    border: 1px solid var(--ring);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
    max-height: calc(100vh - 140px); /* leave breathing room below header */
    overflow: auto;
    padding-right: 10px; /* room for scrollbar */
}

    .ot-toc h3 {
        margin: 0 0 8px;
        font-size: 1rem;
        color: var(--brand-ink);
    }

    /* 5) ToC links: align to left, subtle active state */
    .ot-toc nav a {
        display: block;
        padding: 8px 10px;
        border-radius: 8px;
        color: var(--muted);
        text-decoration: none;
        border-left: 3px solid transparent;
    }

        .ot-toc nav a:hover,
        .ot-toc nav a[aria-current="true"] {
            color: var(--brand-ink);
            border-left-color: var(--accent);
            background: rgba(191,196,172,.15);
        }


/* CTA: centered button, mobile-friendly stack */
.ot-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    margin: 24px 0 0;
    padding: 16px;
    border: 1px solid var(--ring);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(194,171,108,.18), rgba(194,171,108,0));
}

    .ot-cta .ot-primary {
        appearance: none;
        border: 1px solid var(--brand);
        background: var(--brand);
        color: #fff;
        border-radius: 10px;
        padding: 12px 18px;
        font-weight: 700;
        text-decoration: none;
        min-width: 180px;
    }

        .ot-cta .ot-primary:hover {
            filter: brightness(.95)
        }

.ot-article a {
    color: var(--brand-ink)
}


/* ===== Palette ===== */
:root {
    --brand: #637141; /* dark green */
    --brand-ink: #4e5a32;
    --tone: #bfc4ac; /* grayish yellow */
    --accent: #c2ab6c; /* desaturated orange */
    --ink: #0f172a;
    --muted: #475569;
    --ring: #d9decc;
    --bg: #ffffff;
    /* NEW: fixed header height (adjust as needed) */
    --header-h: 72px;
    --hero-top-gap: 0.25rem; /* extra space under the nav */
    --hero-bottom-safe: 2rem;
    --peek: 72px;
}



/* shorter header on mobile */
@media (max-width: 991.98px) {
    :root {
        --header-h: 100px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #eef2f7;
        --muted: #a3aab3;
        --bg: #0b1220;
        --brand: #8aa06a;
        --brand-ink: #cfe0b8;
        --tone: #3a4230;
        --accent: #a68f5b;
        --ring: #2b3224;
    }
}

/* =========================================================
   OneTriad — Income Approach (scoped tweaks + mobile polish)
   Targets only: #ot-income-approach
   ========================================================= */

#ot-income-approach {
    --ia-ink: #2a2f22;
    --ia-muted: #55513f;
    --ia-border: #dad6c4;
    --ia-tint: rgba(194,171,108,.16);
    --ia-wash: rgba(191,196,172,.18);
    --ia-cta: #5a6a3a;
    --ia-cta-hover: #7b9050;
    color: var(--ia-ink);
}

    /* Header */
    #ot-income-approach .ot-card {
        border-bottom: 2px solid var(--ia-border);
        padding-bottom: 16px;
    }

    #ot-income-approach .ot-eyebrow {
        letter-spacing: .08em;
    }

    #ot-income-approach .ot-sub {
        color: var(--ia-muted);
    }

    /* Body copy rhythm */
    #ot-income-approach .ot-body p {
        margin: 14px 0;
    }

    /* Divider */
    #ot-income-approach .text-divider {
        background-color: var(--ia-border);
        opacity: .9;
    }

    /* Key list */
    #ot-income-approach .ot-keylist {
        background: linear-gradient(90deg, var(--ia-tint), rgba(194,171,108,0));
        border-left-color: var(--ia-cta);
        border-radius: 12px;
    }

        #ot-income-approach .ot-keylist li::before {
            background: var(--ia-cta);
            box-shadow: 0 0 0 3px rgba(90,106,58,.18);
        }

    /* Triad cards */
    #ot-income-approach .ot-use {
        border-left: 0;
        background: #fff;
        border: 1px solid var(--ia-border);
        border-radius: 12px;
        padding: 16px 16px 14px;
        box-shadow: 0 6px 16px rgba(0,0,0,.04);
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

        #ot-income-approach .ot-use h4 {
            color: var(--ia-cta);
            padding-left: 12px;
            position: relative;
            margin-bottom: 10px;
        }

            #ot-income-approach .ot-use h4::before {
                content: "";
                position: absolute;
                left: 0;
                top: .35em;
                width: 6px;
                height: 1.1em;
                border-radius: 3px;
                background: var(--ia-cta);
                opacity: .9;
            }

/* Hover lift (desktop) */
@media (hover:hover) {
    #ot-income-approach .ot-use:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
        border-color: #cfcab4;
    }
}


/* Lead */
#ot-income-approach .ot-lead {
    border-left-color: var(--ia-cta);
    background: linear-gradient(90deg, rgba(191,196,172,.22), rgba(191,196,172,0));
    border-radius: 10px;
}

/* Headings spacing */
#ot-income-approach .ot-body h2 {
    margin-top: 28px;
    margin-bottom: 10px;
}

/* Triad tips list hierarchy */
#ot-income-approach .ot-use ul {
    font-size: 1rem;
    margin: 10px 0 2px;
}


/* ---------- Mobile & Tablet Enhancements ---------- */


    /* Triad: ensure clean stack and comfy gutters */
    #ot-income-approach .row.g-3 > [class*="col-"] {
        padding-left: .5rem;
        padding-right: .5rem;
        margin-bottom: .5rem;
    }

    #ot-income-approach .ot-use {
        padding: 14px 14px 12px;
        box-shadow: 0 3px 10px rgba(0,0,0,.04);
    }

}

/* ≤ 768px: tighter titles, slightly larger body font for readability */
@media (max-width: 767.98px) {
    #ot-income-approach .ot-title {
        font-size: clamp(1.75rem, 4.6vw, 2.2rem);
    }

    #ot-income-approach .ot-body p,
    #ot-income-approach .ot-body ul,
    #ot-income-approach .ot-body ol {
        font-size: 1.05rem; /* subtle boost */
    }

    #ot-income-approach .ot-lead {
        padding: 12px;
        margin: 14px 0 12px;
    }

    #ot-income-approach .ot-keylist {
        padding: 10px 12px 10px 16px;
    }
}

/* ≤ 576px: compact spacing, edge breathing room, no hover lifts */
@media (max-width: 575.98px) {
    #ot-income-approach .ot-wrap {
        padding-inline: 12px;
    }

    #ot-income-approach .ot-card {
        padding-bottom: 12px;
    }

    #ot-income-approach .ot-sub {
        margin-bottom: 12px;
    }

    #ot-income-approach .ot-use {
        padding: 12px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }

        #ot-income-approach .ot-use h4 {
            padding-left: 10px;
            margin-bottom: 8px;
        }

            #ot-income-approach .ot-use h4::before {
                width: 5px;
            }

    /* CTA block spacing */
    #ot-income-approach .ot-cta {
        gap: 10px;
        padding: 14px;
    }
}

/* Disable hover transforms on touch devices to avoid “sticky hover” */
@media (hover:none) and (pointer:coarse) {
    #ot-income-approach .ot-use {
        transform: none !important;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #ot-income-approach .ot-use {
        transition: none;
    }
}

/* ===== HERO ===== */
.media-hero {
    position: relative;
    min-height: clamp(220px, 36vw, 420px);
    color: #fff;
}

.media-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(99,113,65,.72) 0%, rgba(99,113,65,.28) 60%, rgba(99,113,65,0) 100%), url("/images/hero-int-2.jpg") center/cover no-repeat; /* use your file */
}

.media-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(12px, 3vw, 24px);
    /* Default (mobile-first): more space so header doesn't overlap */
    padding-top: calc(var(--header-h) + clamp(18px, 5vw, 32px));
    text-shadow: none;
}

/* Tablets (iPad portrait + landscape): moderate breathing room */
@media (min-width: 600px) and (max-width: 1180px) {
    .media-hero__inner {
        padding-top: calc(var(--header-h) + clamp(12px, 3vw, 28px));
    }
}

/* Desktop: tight, aligned, professional look */
@media (min-width: 1181px) {
    .media-hero__inner {
        padding-top: calc(var(--header-h) - 6px);
    }
}

/* Very small phones (extra safety for tall headers / notches) */
@media (max-width: 360px) {
    .media-hero__inner {
        padding-top: calc(var(--header-h) + clamp(20px, 6vw, 36px));
    }
}

/* Touch devices (covers tablets that behave like phones) */
@media (hover: none) and (pointer: coarse) {
    .media-hero__inner {
        padding-top: calc(var(--header-h) + 20px);
    }
}

/* Accessibility: ensure anchors or jumps clear header */
.media-hero__title,
.media-hero__sub {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Reduce motion preference — no animation-induced layout shift */
@media (prefers-reduced-motion: reduce) {
    .media-hero__inner {
        scroll-margin-top: var(--header-h);
    }
}

.media-hero__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(28px, 5vw, 56px); /* bigger on desktop, still smooth on mobile */
    line-height: 1.08;
    letter-spacing: 0.2px;
    color: #637141;
}

.media-hero__sub {
    margin: .4rem 0 0;
    font-size: clamp(14px,1.4vw,18px)
}

/* ===== GRID ===== */
.media-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(12px,2.5vw,20px);
}

.media-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width:720px) {
    .media-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width:1200px) {
    .media-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

/* ===== CARD (anchor so the whole thing is clickable) ===== */
.media-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #ffffff !important; /* Always white background */
    color: #000000 !important; /* Always black text */
    text-decoration: none;
    border: 1px solid var(--ring);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    /* Hover state */
    .media-card:hover {
        transform: translateY(-2px);
        border-color: var(--brand);
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
    }

/* Explicitly neutralize dark mode settings */
@media (prefers-color-scheme: dark) {
    .media-card {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: var(--ring) !important;
    }
}

/* Handle browsers or extensions forcing dark mode */
@media (forced-colors: active), (prefers-contrast: more) {
    .media-card {
        background: #ffffff !important;
        color: #000000 !important;
    }
}


.media-thumb {
    aspect-ratio: 16/9;
    background: #e7eadc;
    overflow: hidden;
}

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

.media-body {
    padding: 14px 14px 10px;
}

.media-kicker {
    color: var(--brand);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.media-title {
    margin: .35rem 0 .2rem;
    font-size: clamp(0.85rem, 1.2vw, 1rem); /* slightly smaller across breakpoints */
    font-weight: 700;
    line-height: 1.25;
    color: #000;
}

.media-date {
    color: var(--muted);
    font-size: .9rem;
}

.media-excerpt {
    color: #333;
    margin: .4rem 0 0;
    font-size: .97rem;
}

.media-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px 14px;
}

.btn-media {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

    .btn-media:hover {
        filter: brightness(.95);
        color: #fff;
    }

.media-arrow {
    color: var(--brand-ink);
}

/* utility: make the right rail (if any) start lower under a fixed header */
.ot-aside {
    position: sticky;
    top: 100px; /* match your header height */
    align-self: start;
}

@media (max-width: 575.98px) {
    .media-title {
        font-size: clamp(16px, 5.2vw, 18px); /* smaller on phones */
        line-height: 1.2;
        margin: .25rem 0 .15rem;
        word-break: break-word;
    }

    .media-excerpt {
        font-size: .92rem;
    }

    .media-date {
        font-size: .85rem;
    }

    .media-footer {
        padding: 0 12px 12px;
    }
}

/* optional: extra-small devices */
@media (max-width: 360px) {
    .media-title {
        font-size: 15px;
    }
}



/* ========= Scoped only to this About block ========= */
#about-us {
    --au-max: 1020px; /* total max width */
    --au-card: 860px; /* card max width */
    --au-border: var(--ring, #d9decc);
    --au-ink: var(--ink, #0f172a);
    --au-muted: var(--muted, #475569);
    --au-accent: var(--brand, #637141);
}

    #about-us .about-wrap {
        max-width: var(--au-max);
        margin: 0 auto;
        padding: 0 16px;
    }

    #about-us .about-header {
        text-align: center;
        border-bottom: 2px solid var(--au-border);
        padding-bottom: 14px;
        margin-bottom: 24px;
    }

    #about-us .about-eyebrow {
        color: var(--au-accent);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: .8rem;
        margin: 0 0 6px;
    }

    #about-us .about-title {
        font-family: 'Caladea', serif;
        font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
        line-height: 1.15;
        margin: 0 0 8px;
    }

    #about-us .about-sub {
        color: var(--au-muted);
        margin: 0 auto 8px;
        max-width: 720px;
    }

    /* Profile card (centered, roomy, mobile-first) */
    #about-us .profile {
        max-width: var(--au-card);
        margin: 0 auto 22px;
        border: 1px solid var(--au-border);
        border-radius: 14px;
        padding: 16px;
        background: #fff;
    }

    /* Flex layout that flips gracefully for mobile */
    #about-us .profile-inner {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 16px;
        align-items: start;
    }

    /* Photo styles */
    #about-us .profile-photo {
        width: 120px;
        height: 120px;
        border-radius: 14px; /* soft square (brand-friendly) */
        object-fit: cover;
        border: 1px solid var(--au-border);
        background: #e7eadc;
    }

    #about-us .profile-header h2 {
        margin: 0 0 2px;
        font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    }

    #about-us .profile-header .role {
        margin: 0;
        color: var(--au-muted);
        font-size: .98rem;
        font-family: 'Nunito Sans', sans-serif !important;
        font-weight: 600;
    }

    #about-us .profile p {
        margin: 10px 0;
        color: var(--au-ink);
        font-family: 'Nunito Sans', sans-serif !important;
        font-weight: 400;
        line-height: 1.55;
        font-size: 1.03rem;
    }

    #about-us .profile .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 18px;
        margin-top: 6px;
    }

    #about-us .profile h3 {
        font-size: 1.05rem;
        margin: 6px 0 4px;
        color: var(--au-accent);
        font-family: 'Nunito Sans', sans-serif !important;
        font-weight: 600;
    }

    #about-us .profile ul {
        margin: 0 0 4px 1.1rem;
        padding: 0;
    }

    #about-us .profile li {
        margin: .25rem 0;
        font-family: 'Nunito Sans', sans-serif !important;
        font-weight: 400;
        line-height: 1.55;
        font-size: 1.03rem;
    }

    /* CTA */
    #about-us .about-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        margin-top: 22px;
        border: 1px solid var(--au-border);
        border-radius: 12px;
        padding: 16px;
        background: linear-gradient(90deg, rgba(194,171,108,.14), rgba(194,171,108,0));
    }

        #about-us .about-cta .btn {
            background: var(--au-accent);
            color: #fff;
            border: 1px solid var(--au-accent);
            border-radius: 10px;
            padding: 10px 16px;
            font-weight: 700;
            text-decoration: none;
            min-width: 180px;
        }

            #about-us .about-cta .btn:hover {
                filter: brightness(.95);
            }

/* —— Mobile polish —— */
@media (max-width: 767.98px) {
    #about-us .profile-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    #about-us .profile-photo {
        width: 140px;
        height: 140px;
        border-radius: 16px;
    }

    #about-us .profile .two-col {
        grid-template-columns: 1fr;
        text-align: left; /* lists read better left-aligned */
        max-width: 520px;
        margin: 0 auto;
    }
}


/* Remove bootstrap's auto-caret */
.navbar .dropdown-toggle.no-caret::after {
    display: none !important;
}

/* Inline caret look & animation */
.navbar .nav-caret {
    transition: transform .18s ease;
}

.navbar .dropdown.show .nav-caret,
.navbar .dropdown-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

/* Menu box styling (polished) */
.navbar .dropdown-menu {
    min-width: 220px;
    padding: .5rem;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(23,28,33,.08);
    margin-top: 0; /* critical: removes hover gap */
    background: #fff;
    z-index: 9999;
}

/* Links inside menu */
.navbar .dropdown-item {
    border-radius: 8px;
    padding: .55rem .75rem;
    font-weight: 500;
    color: #333;
}

    .navbar .dropdown-item:hover {
        background-color: #f1e9d2 !important; /* soft gold-beige tone */
        color: #5c4b1f !important; /* deep muted gold text */
    }

    .navbar .dropdown-item.active {
        background-color: #f1e9d2 !important; /* soft gold-beige tone */
        color: #5c4b1f !important; /* deep muted gold text */
    }

/* Desktop hover behavior — mobile stays click */
@media (min-width:992px) {
    .dropdown-hover:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-hover > .dropdown-toggle:active {
        pointer-events: none;
    }
}

/* Optional: styles if you ever switch to navbar-dark */
.navbar.navbar-dark .dropdown-menu {
    background: #1e2227;
    border-color: #2a2f36;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

.navbar.navbar-dark .dropdown-item {
    color: #d9dee5;
}

    .navbar.navbar-dark .dropdown-item:hover {
        background-color: #f1e9d2 !important; /* soft gold-beige tone */
        color: #5c4b1f !important; /* deep muted gold text */
    }

/* === OneTriad Profile — NEW CLASSES ONLY (safe to append) === */

.container-narrow {
    width: min(100% - 2rem, 980px);
    margin-inline: auto;
}

.ot-profile {
    padding: clamp(2rem,6vw,4rem) 0;
    background: #fff;
}

.ot-breadcrumb {
    margin-bottom: 1rem;
}

.ot-link-sm {
    font-size: .95rem;
    color: #777;
}

    .ot-link-sm:hover {
        color: #000;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.ot-hero {
    margin-bottom: clamp(1.5rem,4vw,2.5rem);
}

.ot-hero-title {
    font-size: clamp(1.8rem,4vw,2.4rem);
    margin: 0 0 .25rem;
}

.ot-hero-sub {
    margin: 0 0 .5rem;
    font-weight: 600;
    color: #777;
}

.ot-hero-intro {
    font-size: 1.05rem;
    max-width: 72ch;
}

.ot-profile-grid {
    display: grid;
    gap: 2rem;
}

@media(min-width:980px) {
    .ot-profile-grid {
        grid-template-columns: 320px 1fr;
    }
}

.ot-profile-aside {
}

@media(min-width:980px) {
    .ot-profile-aside {
        position: sticky;
        top: 100px;
    }
}

.ot-headshot {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    margin-bottom: 1rem;
}

.ot-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 1rem;
}

.ot-card-tight {
    padding: .75rem;
}

.ot-kv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

    .ot-kv li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .ot-kv span {
        color: #666;
    }

    .ot-kv a {
        text-decoration: underline;
    }

.ot-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.ot-chip {
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(194,171,108,.15);
    font-size: .85rem;
    font-weight: 600;
}

.ot-profile-body {
}

.ot-section {
    margin-bottom: 2rem;
}

.ot-h2 {
    font-size: 1.4rem;
    margin-bottom: .4rem;
}

.ot-h3 {
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

/* Primary structured list */
.ot-list {
    margin: 1.5rem 0;
    padding-left: 0;
    list-style: none;
}

    .ot-list li {
        position: relative;
        padding-left: 1.25rem;
        margin-bottom: 0.6rem;
        margin: .35rem 0;
        line-height: 1.55;
    }

        .ot-list li::before {
            content: "–";
            position: absolute;
            left: 0;
            color: #555;
        }


/* Alternate list – parenthetical marker */
.ot-list-alt {
    margin: 1.6rem 0;
    padding-left: 0;
    list-style: none;
}

    .ot-list-alt li {
        position: relative;
        padding-left: 1.6rem;
        margin-bottom: 0.65rem;
        line-height: 1.55;
    }

        .ot-list-alt li::before {
            content: "(" counter(item) ")";
            counter-increment: item;
            position: absolute;
            left: 0;
            color: #444;
            font-size: 0.9em;
        }

.ot-list-alt {
    counter-reset: item;
}

    .ot-list.two-col {
        columns: 2;
    }

@media(max-width:700px) {
    .ot-list.two-col {
        columns: 1;
    }
}

.ot-muted {
    color: #777;
}

/* === ABOVE-THE-FOLD OVERRIDES (place at the very end) === */

/* Desktop / large screens */
@media (min-width: 992px) {
    .home-hero {
        min-height: 74vh !important; /* was ~100svh - 72px */
        padding-top: calc(var(--header-h) - 2rem) !important;
        padding-bottom: 0.5rem !important; /* was 6–13rem via var */
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero {
        min-height: 80vh !important;
        padding-bottom: 1.25rem !important;
    }
}

/* Phones */
@media (max-width: 767.98px) {
    .home-hero {
        min-height: 84vh !important;
        padding-bottom: 1.5rem !important;
    }
}

/* tighten internal spacing just a bit */
.home-hero-badge {
    margin-top: .25rem !important;
}

.home-hero-list {
    margin-bottom: .5rem !important;
}

.home-hero .divider {
    margin: .5rem auto !important;
}

.btn-hero-cta {
    margin-bottom: .75rem !important;
}

/* ========= OneTriad Our Team (scoped + final refined) ========= */
#team-page.otp-section {
    --otp-brand: #637141;
    --otp-ring: #d9decc;
    --otp-ink: #0f172a;
    --otp-muted: #475569;
    background: #fff;
    color: var(--otp-ink);
    font-family: Roboto,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
    padding: 2rem 0 3rem; /* reduced top space */
}

@media(max-width: 768px) {
    #team-page.otp-section {
        padding-top: 6rem;
    }
}

#team-page .otp-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem
}

/* Header */
#team-page .otp-head {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--otp-ring);
    padding-bottom: 1rem;
}

#team-page .otp-eyebrow {
    color: var(--otp-brand);
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    margin: 0 0 .35rem;
}

#team-page .otp-title {
    font-family: Caladea,serif;
    font-weight: 500;
    font-size: clamp(2.2rem,2.6vw,2.8rem);
    margin: .1rem 0;
    color: var(--otp-ink);
}

#team-page .otp-sub {
    max-width: 720px;
    margin: 0 auto;
    color: var(--otp-muted);
    font-size: 1.05rem;
}

/* Grid */
#team-page .otp-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
}

@media(min-width:900px) {
    #team-page .otp-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
        gap: 2rem;
        justify-content: center;
    }
}

/* Card (clickable) */
#team-page .otp-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--otp-ring);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}

@media(hover:hover) {
    #team-page .otp-member:hover {
        transform: translateY(-4px);
        border-color: var(--otp-brand);
        box-shadow: 0 14px 26px rgba(0,0,0,.08);
    }
}

/* Photo container + overlay */
#team-page .otp-photo-wrap {
    position: relative;
    width: 100%
}

#team-page .otp-headshot {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-bottom: 1px solid var(--otp-ring);
    background: #f1f3ed;
    transition: transform .3s ease;
}

#team-page .otp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(99,113,65,.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-weight: 600;
    letter-spacing: .05em;
    font-size: .9rem;
    text-transform: uppercase;
    transition: opacity .25s ease;
}

#team-page .otp-photo-wrap:hover .otp-overlay {
    opacity: 1;
}

#team-page .otp-photo-wrap:hover .otp-headshot {
    transform: scale(1.02);
}

/* Info */
#team-page .otp-info {
    padding: 1.1rem 1rem 1.4rem
}

#team-page .otp-name {
    font-family: Caladea,serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 .3rem;
}

#team-page .otp-role {
    color: var(--otp-muted);
    font-weight: 600;
    font-size: .96rem;
}

/* Minimal Contact Line */
#team-page .otp-contact {
    text-align: center;
    margin-top: 2.5rem;
    color: var(--otp-muted);
    font-size: .95rem;
}

    #team-page .otp-contact a {
        color: var(--otp-brand);
        text-decoration: none;
        font-weight: 600;
    }

        #team-page .otp-contact a:hover {
            text-decoration: underline;
        }

/* ===========================================================
   OneTriad — Profile System (SCOPED + RESPONSIVE)
   Scope: .otp-profile (append safely to site.css)
   Depends on: --brand, --brand-ink, --accent, --ring, --header-h
   =========================================================== */

.otp-profile {
    --otp-ink: var(--ink, #0f172a);
    --otp-muted: #555;
    --otp-brand: var(--brand, #637141);
    --otp-brand-ink: var(--brand-ink, #4e5a32);
    --otp-accent: var(--accent, #c2ab6c);
    --otp-ring: var(--ring, #d9decc);
    --otp-shadow: 0 10px 24px rgba(0,0,0,.06);
    --otp-shadow-soft: 0 3px 10px rgba(0,0,0,.035);
    --otp-radius: 14px;
    --otp-radius-lg: 16px;
}

    /* ---------- Layout & Containers ---------- */
    .otp-profile .otp-section {
        background: #fff;
        padding: clamp(2rem, 3vw, 3rem) 0;
    }

    .otp-profile .otp-container {
        width: min(100% - 2rem, 1080px);
        margin-inline: auto;
    }

    .otp-profile .otp-crumb {
        margin-bottom: .8rem;
    }

    .otp-profile .otp-link-sm {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: "Roboto", system-ui, sans-serif;
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--otp-brand-ink);
        text-decoration: none;
        background: color-mix(in srgb, var(--otp-accent), transparent 88%);
        border: 1px solid color-mix(in srgb, var(--otp-accent), #fff 70%);
        border-radius: 999px;
        padding: 0.35rem 0.75rem 0.35rem 0.55rem;
        transition: all 0.25s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

        .otp-profile .otp-link-sm::before {
            font-weight: 600;
            color: var(--otp-brand);
            margin-right: 0.25rem;
            transition: transform 0.25s ease;
        }

        .otp-profile .otp-link-sm:hover {
            background: color-mix(in srgb, var(--otp-accent), transparent 70%);
            color: var(--otp-brand-ink);
            border-color: var(--otp-brand);
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

            .otp-profile .otp-link-sm:hover::before {
                transform: translateX(-2px);
            }

    /* ---------- Hero ---------- */
    .otp-profile .otp-title {
        font-family: Caladea,serif;
        font-weight: 700;
        letter-spacing: .2px;
        color: var(--otp-brand-ink);
        font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem);
        line-height: 1.15;
        margin: 0 0 .25rem;
    }

    .otp-profile .otp-sub {
        margin: 0 0 .5rem;
        color: var(--otp-brand);
        font-weight: 600;
        font-family: Caladea,serif;
    }

    .otp-profile .otp-intro {
        color: var(--otp-muted);
        font-size: 1.06rem;
        max-width: 72ch;
    }

    /* ---------- Grid ---------- */
    .otp-profile .otp-grid {
        display: grid;
        gap: clamp(1.4rem,3vw,2rem);
    }

@media (max-width: 1000px) {
    .otp-profile .otp-section {
        padding-top: clamp(7rem, 18vw, 9rem);
    }
}

@media (min-width:980px) {
    .otp-profile .otp-grid {
        grid-template-columns: 320px 1fr;
    }
}

/* ---------- Sidebar / Media ---------- */
.otp-profile .otp-aside {
    align-self: start;
}

@media (min-width:980px) {
    .otp-profile .otp-aside {
        position: sticky;
        top: calc(var(--header-h,72px) + 28px);
    }
}

.otp-profile .otp-figure {
    margin: 0;
}

/* Dynamic photo (hover + reveal) */
.otp-profile .otp-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--otp-radius-lg);
    border: 1px solid var(--otp-ring);
    background: #f1f3ed;
    box-shadow: var(--otp-shadow);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow .35s ease;
    animation: otpFadeIn .5s ease both;
}

@media (hover:hover) {
    .otp-profile .otp-photo:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 18px 36px rgba(0,0,0,.12);
    }
}

@keyframes otpFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Optional sidebar card (contact, etc.) */
.otp-profile .otp-card {
    background: #fff;
    border: 1px solid var(--otp-ring);
    border-radius: var(--otp-radius);
    box-shadow: var(--otp-shadow);
    padding: 1rem;
}

.otp-profile .otp-tight {
    padding: .75rem;
}

/* Key/Value list */
.otp-profile .otp-kv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

    .otp-profile .otp-kv li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .otp-profile .otp-kv span {
        color: var(--otp-muted);
    }

    .otp-profile .otp-kv a {
        color: var(--otp-brand-ink);
        text-decoration: underline;
    }

/* Chips */
.otp-profile .otp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.otp-profile .otp-chip {
    padding: .38rem .65rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    background: color-mix(in srgb, var(--otp-accent), transparent 82%);
    border: 1px solid color-mix(in srgb, var(--otp-accent), #fff 78%);
    color: #4e4837;
}

/* ---------- Body & Sections ---------- */
.otp-profile .otp-body {
    display: grid;
    gap: clamp(1.1rem, 2.2vw, 1.6rem);
}

.otp-profile .otp-block {
    border: 1px solid var(--otp-ring);
    background: #fff;
    border-radius: var(--otp-radius);
    padding: clamp(1rem, 2.2vw, 1.25rem);
    box-shadow: var(--otp-shadow-soft);
    animation: otpFadeUp .35s ease both;
    font-family: "Caladea", serif;
}

.otp-profile .otp-h2,
.otp-profile .otp-h3 {
    font-family: Caladea,serif;
    color: var(--otp-brand-ink);
    margin: 0 0 .5rem;
}

.otp-profile .otp-h2 {
    font-size: 1.45rem;
}

.otp-profile .otp-h3 {
    font-size: 1.15rem;
}

@keyframes otpFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Lists */
.otp-profile .otp-list {
    padding-left: 1.2rem;
    margin: .35rem 0 0;
}

    .otp-profile .otp-list li {
        margin: .35rem 0;
    }

        .otp-profile .otp-list li::marker {
            color: var(--otp-brand);
            font-weight: 700;
        }

.otp-profile .otp-two-col {
    columns: 2;
    column-gap: 1.4rem;
}

@media (max-width:700px) {
    .otp-profile .otp-two-col {
        columns: 1;
    }
}

.otp-profile .otp-muted {
    color: var(--otp-muted);
}

/* ---------- CTA (brand-aligned, scoped) ---------- */
.otp-profile .ot-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--otp-ring);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: clamp(1.2rem, 2.8vw, 1.8rem);
    background: linear-gradient(90deg, color-mix(in srgb, var(--otp-accent), transparent 86%), transparent 30%);
}

    .otp-profile .ot-cta span {
        color: #333;
        font-size: 1rem;
    }

    .otp-profile .ot-cta .ot-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-width: 180px;
        padding: .6rem 1rem;
        border-radius: 10px;
        border: 1px solid var(--otp-brand);
        background: var(--otp-brand);
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        transition: filter .2s ease, transform .2s ease;
    }

        .otp-profile .ot-cta .ot-primary:hover {
            filter: brightness(.95);
            transform: translateY(-1px);
        }

/* ---------- Utilities ---------- */
.otp-profile .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Responsive polish: Tablets (700–980px) ---------- */
@media (min-width:700px) and (max-width:979.98px) {
    .otp-profile .otp-grid {
        grid-template-columns: 1fr; /* stack */
        gap: 1.6rem;
    }

    .otp-profile .otp-aside {
        position: static !important;
        display: flex;
        justify-content: center;
        margin-bottom: .5rem;
    }

    .otp-profile .otp-photo {
        max-width: clamp(380px, 62vw, 560px);
        aspect-ratio: 3 / 4;
        margin-inline: auto;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(0,0,0,.08);
        object-position: center top;
    }

    .otp-profile .otp-intro {
        max-width: 60ch;
    }
}

/* ---------- Phones (≤699px) ---------- */
@media (max-width:699.98px) {
    .otp-profile .otp-photo {
        max-width: min(92vw, 520px);
        margin-inline: auto;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .otp-profile .otp-photo,
    .otp-profile .otp-block,
    .otp-profile .ot-cta .ot-primary {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Print (only inside profile scope) ---------- */
@media print {
    .otp-profile .otp-crumb {
        display: none;
    }

    .otp-profile .otp-aside {
        position: static !important;
    }

    .otp-profile .ot-cta {
        border: 1px solid #000;
        background: #fff;
    }

        .otp-profile .ot-cta .ot-primary {
            color: #000;
            background: #fff;
            border-color: #000;
        }
}

/* ---------- Optional Per-Person Variants (accent swaps) ---------- */
.otp-profile.otp-justin {
    --otp-brand: #637141;
    --otp-brand-ink: #4e5a32;
    --otp-accent: #c2ab6c;
}

.otp-profile.otp-agustin {
    --otp-brand: #637141;
    --otp-brand-ink: #4e5a32;
    --otp-accent: #c2ab6c;
}

.otp-profile.otp-michele {
    --otp-brand: #637141;
    --otp-brand-ink: #4e5a32;
    --otp-accent: #c2ab6c;
}

/* ---------- Dark-mode harmonization (keep profiles crisp/white) ---------- */
@media (prefers-color-scheme: dark) {
    .otp-profile .otp-section,
    .otp-profile .otp-container,
    .otp-profile .otp-block,
    .otp-profile .otp-card {
        background: #fff !important;
        color: #000 !important;
    }

    .otp-profile .otp-title,
    .otp-profile .otp-h2,
    .otp-profile .otp-h3 {
        color: var(--otp-brand-ink) !important;
    }

    .otp-profile .otp-photo {
        background: #e9ecdf;
    }

    .otp-profile .otp-list li::marker {
        color: var(--otp-brand) !important;
    }

    .otp-profile .ot-cta {
        background: linear-gradient(90deg, rgba(194,171,108,.18), transparent 30%) !important;
    }
}

/* ================================================================
   OneTriad — OUR STORY PAGE
   Matches "Our Team" header + CTA, adds refined storytelling layout
   ================================================================ */

#our-story.otp-section {
    --os-brand: #637141;
    --os-accent: #c2ab6c;
    --os-ring: #d9decc;
    --os-ink: #0f172a;
    --os-muted: #475569;
    --os-bg: #ffffff;
    background: var(--os-bg);
    color: var(--os-ink);
    padding: 2rem 0 3rem;
}

/* Keep header identical to Our Team */
#our-story .otp-head {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--os-ring);
    padding-bottom: 1rem;
}

#our-story .otp-eyebrow {
    color: var(--os-brand);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

#our-story .otp-title {
    font-family: "Caladea", Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    line-height: 1.15;
    margin: 0.2rem 0 0.5rem;
    color: var(--os-ink);
}

#our-story .otp-sub {
    max-width: 700px;
    margin: 0 auto;
    color: #4e4837; /* match the soft neutral tone on Our Team */
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------- Story Content ---------------- */
#our-story .otp-wrap {
    max-width: 1100px;
    margin-inline: auto;
    padding: 0 1rem;
}

#our-story .content-narrow {
    max-width: 900px;
    margin: 0 auto;
}

#our-story .otp-story {
    margin-top: 1.2rem;
}

    #our-story .otp-story p {
        margin-bottom: 1.2rem;
        font-size: 1.02rem;
        line-height: 1.7;
        color: var(--os-ink);
        font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    }

    #our-story .otp-story a {
        color: var(--os-brand);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        #our-story .otp-story a:hover {
            color: #4e5a32;
        }

/* ---------------- Intro Callout ---------------- */
#our-story .ot-intro-callout {
    border: 1px solid var(--os-ring);
    border-left: 6px solid var(--os-brand);
    background: linear-gradient(90deg, rgba(194,171,108,.14), rgba(194,171,108,0));
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 1.2rem;
}


/* ---------------- Pull Quote ---------------- */
#our-story .ot-pull {
    margin: 1.4rem 0 1.4rem;
    text-align: center;
}

    #our-story .ot-pull blockquote {
        display: inline-block;
        font-family: "Caladea", Georgia, serif;
        font-size: 1.5rem;
        line-height: 1.35;
        color: #4e4837;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        background: color-mix(in srgb, var(--os-accent), transparent 88%);
    }

/* ---------------- Dividers ---------------- */
#our-story .text-divider {
    border: 0;
    border-top: 1px solid var(--os-ring);
    margin: 1.2rem 0 1.8rem;
}

/* ---------------- CTA (unchanged from Our Team) ---------------- */
#our-story .ot-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--os-ring);
    border-radius: 12px;
    padding: 16px 18px;
    background: linear-gradient(90deg, rgba(194,171,108,0.18), transparent 30%);
    margin: 2rem auto 0;
    max-width: 800px;
}

    #our-story .ot-cta span {
        color: var(--os-ink);
        font-size: 1rem;
        line-height: 1.4;
    }

    #our-story .ot-cta .ot-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        padding: 0.6rem 1rem;
        border-radius: 10px;
        border: 1px solid var(--os-brand);
        background: var(--os-brand);
        color: #fff;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: filter 0.2s ease, transform 0.2s ease;
    }

        #our-story .ot-cta .ot-primary:hover {
            filter: brightness(0.95);
            transform: translateY(-1px);
        }

/* ---------------- Responsive adjustments ---------------- */
@media (max-width: 768px) {
    #our-story.otp-section {
        padding-top: 6rem;
    }

    #our-story .otp-story p {
        font-size: 0.98rem;
    }

    #our-story .ot-pull blockquote {
        font-size: 1.08rem;
    }
}

/* LinkedIn icon link */
.linkedin-icon {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Image styling */
.linkedin-logo {
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover effect */
.linkedin-icon:hover .linkedin-logo {
    transform: scale(1.1);
    opacity: 0.85;
}

/* Wrapper: handles outline + radius + scrolling */
.ot-table-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* smooth rounded outline in soft gold */
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--ring) 65%);
    /* fallback if color-mix unsupported */
    /* border: 1px solid #cfc7a8; */

    background: var(--bg);
}

/* Table itself: no outer border/radius, so no weird corners */
.ot-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.55;
    border: 0;
    border-radius: 0;
}

    /* Header with light/darker green + gold underline, labels wrap */
    .ot-table thead th {
        background-color: color-mix(in srgb, var(--brand) 20%, #ffffff 80%);
        /* fallback: #e8eddf; */

        color: var(--ink);
        font-weight: 600;
        padding: 0.9rem 1rem;
        text-align: left;
        border-bottom: 2px solid var(--accent);
        letter-spacing: 0.2px;
        white-space: normal;
        word-break: break-word;
    }

    /* Body cells */
    .ot-table tbody td {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--ring);
        color: var(--muted);
        word-break: break-word;
    }

    /* Zebra striping */
    .ot-table tbody tr:nth-child(odd) {
        background-color: #fafbf8;
    }

/* Hover (desktop) */
@media (hover: hover) {
    .ot-table tbody tr:hover {
        background-color: rgba(99, 113, 65, 0.08);
    }
}

/* Grid safety on mobile so nothing overflows to the right */
@media (max-width: 768px) {
    .ot-body {
        min-width: 0;
    }
}