/* ==========================================================================
   Page Builder Modules — modules.css
   Stoneridge Theme — Page Builder Template
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared container (scoped to all module sections)
   Applies automatically to any .container inside a .module-* element.
   -------------------------------------------------------------------------- */
[class*="module-"] > .container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    [class*="module-"] > .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {
    [class*="module-"] > .container {
        padding-left: 60px;
        padding-right: 60px;
    }
}


/* ==========================================================================
   Module: Banner
   Migrated from .banner + home.css (.banner-bg, .banner-content)
   ========================================================================== */

.module-banner {
    min-height: 250px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 0;
    background-color: rgba(48, 83, 101, 1);
    position: relative;
    overflow: visible;
}

@media (min-width: 768px) {
    .module-banner {
        min-height: 420px;
        padding-bottom: 20px;
    }
}

/* Background image — absolute fill, behind content */
.module-banner-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* Dark overlay (opacity controlled via inline style) */
.module-banner-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

/* Content sits above image and overlay */
.module-banner-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* Typography — mirrors original .banner rules */
.module-banner h1 {
    color: #fff;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 20px;
}

.module-banner h1 strong {
    font-weight: 600;
}

.module-banner p {
    color: #fff;
}

.module-banner .container{
    z-index: 3;
}

@media (min-width: 768px) {
    .module-banner h1 {
        font-size: 45px;
    }

    .module-banner p {
        font-size: 20px;
        max-width: 640px;
        margin: 0 auto 30px;
    }
}

/* Button variant: Bright Blue — texto branco, hover verde */
.module-banner .btn-bright-blue {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: #fff;
}

.module-banner .btn-bright-blue:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}

/* Button variant: Bright Blue (Dark Text) — texto escuro, hover verde */
.module-banner .btn-bright-blue-dark {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: rgba(48, 83, 101, 1);
}

.module-banner .btn-bright-blue-dark::after {
    border-color: transparent transparent transparent rgba(48, 83, 101, 1);
}

.module-banner .btn-bright-blue-dark:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}

.module-banner .btn-bright-blue-dark:hover::after {
    border-color: transparent transparent transparent #fff;
}

/* Primary CTA */
.module-banner .cta-wrap {
    text-align: center;
    margin-top: 20px;
}

/* Secondary links — mobile: fluxo normal; desktop: ancorado 40px do bottom */
.module-banner .secondary-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

@media (min-width: 768px) {
    .module-banner .secondary-links {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        z-index: 3;
        flex-direction: row;
        justify-content: center;
        margin-top: 0;
    }
}

/* ----- Secondary links layout: Blue Bar ----- */
/* Mobile/tablet: bar sits in flow at the bottom of the flex column, so
   the section grows naturally with however many rows the items wrap to.
   Desktop (>=1025px): bar is taken out of flow and translated to overlap
   into the next section, matching the homepage pattern. */
.module-banner.has-blue-bar {
    min-height: 202px;
}

.module-banner-bluebar {
    width: 100%;
    margin-top: 24px;
    padding: 0;
    z-index: 4;
}

.module-banner-bluebar .container {
    padding-left: 20px;
    padding-right: 20px;
}

.module-banner-bluebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.module-banner-bluebar li {
    margin: 0;
    padding: 0;
    background: #2f5265;
}

.module-banner-bluebar a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    font-size: 20px;
    line-height: 1.4;
    transition: background 200ms ease, color 200ms ease;
}

.module-banner-bluebar a:hover,
.module-banner-bluebar a:focus {
    background: #9ea93c;
    color: #fff;
}


@media (min-width: 768px) {
    .module-banner.has-blue-bar {
        min-height: 372px;
    }
}

@media (min-width: 1025px) {
    .module-banner.has-blue-bar {
        padding-bottom: 40px;
        margin-bottom: 48px;
    }
    .module-banner-bluebar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        margin-top: 0;
    }
    .module-banner-bluebar ul {
        transform: translateY(50%);
        gap: 20px;
    }
    .module-banner-bluebar a {
        padding: 10px 24px;
    }
}


/* ==========================================================================
   Module: Two-Column Content
   New module — no existing source
   ========================================================================== */

.module-two-col {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .module-two-col {
        padding: 70px 0;
    }
}

.module-two-col .two-col-inner {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .module-two-col .two-col-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* Gap applied via inline style from ACF; padding inside each column */
.module-two-col .col-left,
.module-two-col .col-right {
    padding: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .module-two-col .col-left,
    .module-two-col .col-right {
        padding: 30px;
    }
}

.module-two-col .col-right ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.module-two-col .col-right ul ul {
    margin-left: 0;
}

@media (min-width: 768px) {
    .module-two-col .col-right ul {
        margin-left: 20px;
    }
}

/* Optional per-column CTA — spacing + button variants (same colors as
   the banner module) */
.module-two-col .cta-wrap {
    margin-top: 20px;
}

.module-two-col .btn-bright-blue {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: #fff;
}
.module-two-col .btn-bright-blue:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}
.module-two-col .btn-bright-blue-dark {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: rgba(48, 83, 101, 1);
}
.module-two-col .btn-bright-blue-dark::after {
    border-color: transparent transparent transparent rgba(48, 83, 101, 1);
}
.module-two-col .btn-bright-blue-dark:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}
.module-two-col .btn-bright-blue-dark:hover::after {
    border-color: transparent transparent transparent #fff;
}


/* ==========================================================================
   Module: Testimonials
   Slick-powered slider of testimonial quotes. Each slide takes 70% of the
   container on desktop (centered with 15% peek either side) and 100% on
   mobile. Supports background image, solid bg color, and dark overlay.
   ========================================================================== */

.module-testimonials {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .module-testimonials {
        padding: 70px 0;
    }
}

/* Section background image — absolute fill, behind content */
.module-testimonials-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* Dark overlay (opacity comes from inline style) */
.module-testimonials-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.module-testimonials > .container {
    position: relative;
    z-index: 3;
}

/* Slide layout: text centered horizontally */
.module-testimonials .testimonial-slide {
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Neutralize the theme's global <blockquote> overrides (style.css) within
   this module: no white background, no left bar, no left indent, no bold/
   Spartan font on the first paragraph. The block uses the theme's body
   defaults and the section's text color cascade — only color is set,
   font weight/family/size come from the theme defaults. */
.module-testimonials .testimonial-quote {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;

}

.module-testimonials .testimonial-quote p,
.module-testimonials .testimonial-quote span {
    color: inherit;
    text-align: center;
    padding-left: 0;
    font-family: "Lato", "sans-serif";
    font-weight: 400;
}

.module-testimonials .testimonial-quote p:first-of-type::before {
    content: none;
}

/* The opening/closing quote characters are injected inline with the
   paragraph text by the block PHP (see $wrap_in_quotes). */

.module-testimonials .testimonial-author {
    display: block;
    margin-top: 16px;
    color: inherit;
}

/* Heading color override via CSS custom property (set on the section) */
.module-testimonials h1,
.module-testimonials h2,
.module-testimonials h3,
.module-testimonials h4,
.module-testimonials h5,
.module-testimonials h6 {
    color: var(--pb-heading-color, inherit);
}


/* ==========================================================================
   Module: Media With Content
   Two-column layout: WYSIWYG content + image, with optional CTA button.
   DOM order is content → media. On mobile the image is forced above the
   content via `order: -1` on .mwc-media. On desktop the order resets so
   .image-right (default) shows image after content, and .image-left flips
   it back via `order: -1`.
   ========================================================================== */

.module-media-with-content {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .module-media-with-content {
        padding: 70px 0;
    }
}

/* Section background image — absolute fill, behind content */
.module-media-with-content-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.module-media-with-content > .container {
    position: relative;
    z-index: 2;
}

/* Grid */
.module-media-with-content .mwc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

/* Mobile: image always renders above the content */
.module-media-with-content .mwc-media {
    order: -1;
}

@media (min-width: 768px) {
    .module-media-with-content .mwc-grid {
        gap: 40px;
    }

    /* Reset the mobile reorder; desktop uses DOM order (content, then media)
       by default, and the .image-left modifier flips it via order: -1 */
    .module-media-with-content .mwc-media {
        order: 0;
    }

    .module-media-with-content.ratio-50-50 .mwc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .module-media-with-content.ratio-40-60.image-right .mwc-grid {
        grid-template-columns: 6fr 4fr;
    }

    .module-media-with-content.ratio-40-60.image-left .mwc-grid {
        grid-template-columns: 4fr 6fr;
    }

    .module-media-with-content.image-left .mwc-media {
        order: -1;
    }
}

/* Media column — image capped at 250px on mobile / 350px on desktop (or
   smaller if its column is narrower), centered horizontally within its
   column. */
.module-media-with-content .mwc-media img {
    display: block;
    max-width: 100%;
    max-width: min(250px, 100%);
    height: auto;
    margin: 0 auto;
}

/* CTA spacing */
.module-media-with-content .mwc-content .cta-wrap {
    margin-top: 20px;
}

/* Heading color override via CSS custom property (set on the section) */
.module-media-with-content h1,
.module-media-with-content h2,
.module-media-with-content h3,
.module-media-with-content h4,
.module-media-with-content h5,
.module-media-with-content h6 {
    color: var(--pb-heading-color, inherit);
}

/* Button variants — same colors as the banner module */
.module-media-with-content .btn-bright-blue {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: #fff;
}
.module-media-with-content .btn-bright-blue:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}
.module-media-with-content .btn-bright-blue-dark {
    background-color: rgba(43, 179, 226, 1);
    border-color: rgba(43, 179, 226, 1);
    color: rgba(48, 83, 101, 1);
}
.module-media-with-content .btn-bright-blue-dark::after {
    border-color: transparent transparent transparent rgba(48, 83, 101, 1);
}
.module-media-with-content .btn-bright-blue-dark:hover {
    background-color: #747A2A;
    border-color: #747A2A;
    color: #fff;
}
.module-media-with-content .btn-bright-blue-dark:hover::after {
    border-color: transparent transparent transparent #fff;
}


/* ==========================================================================
   Module: Four Column with Icons
   Migrated from .tech-solutions / .tech-section / .tech-point + home.css
   ========================================================================== */

.module-four-col-icons {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .module-four-col-icons {
        padding: 70px 0;
    }
}

/* Section heading */
.module-four-col-icons .module-heading {
    text-align: center;
    margin-bottom: 20px;
}

.module-four-col-icons .module-heading h2 {
    text-align: center;
    margin: 0 auto 10px;
}

.module-four-col-icons .module-heading h2 span {
    font-weight: bold;
}

/* Grid — 2-col mobile, 4-col desktop */
.module-four-col-icons .icon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
}

@media (min-width: 768px) {
    .module-four-col-icons .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Individual card — mirrors .tech-point */
.module-four-col-icons .icon-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.module-four-col-icons .icon-card .card-thumbnail {
    margin-bottom: 15px;
}

.module-four-col-icons .icon-card .card-thumbnail img {
    max-width: 100%;
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.module-four-col-icons .icon-card h3 {
    font-weight: 600;
}

/* Read More — line-clamp truncation applied only when PHP decided the
   description exceeds the char limit (.is-clampable). Otherwise the
   description renders in full with no truncation. */
.module-four-col-icons .card-description {
    margin-top: 8px;
}

.module-four-col-icons .icon-card.is-clampable .card-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-four-col-icons .icon-card.expanded .card-description {
    display: block;
    overflow: visible;
}

.module-four-col-icons .read-more-toggle {
    cursor: pointer;
    margin-top: 8px;
    display: inline-block;
}

.module-four-col-icons .read-more-toggle:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   Module: Three Column Card Section
   Migrated from .post-section / .simple-post
   No slider, no posts — fully ACF-driven content
   ========================================================================== */

.module-three-col-cards {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .module-three-col-cards {
        padding: 70px 0;
    }
}

/* Background image — absolute fill, behind all content */
.module-three-col-cards-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Lift direct children above the bg image */
.module-three-col-cards > .container {
    position: relative;
    z-index: 2;
}

.module-three-col-cards h2 {
    text-align: center;
    margin-bottom: 10px;
}

/* Grid — 1-col mobile, 3-col desktop. align-items defaults to stretch so
   all cards in a row share the tallest card's height. */
.module-three-col-cards .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .module-three-col-cards .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card — mirrors .simple-post */
.module-three-col-cards .card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 23px rgba(35, 31, 32, 0.3);
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .module-three-col-cards .card {
        padding: 30px;
    }
}

/* Card header: heading above, arrow below centered */
.module-three-col-cards .card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.module-three-col-cards .card-header h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.7;
    width: 100%;
    text-align: center;
}

/* Heading alignment modifiers — applied via .heading-align-left/right class
   on the section (default is center, no class needed). */
.module-three-col-cards.heading-align-left .card-header h3 {
    text-align: left;
}

.module-three-col-cards.heading-align-right .card-header h3 {
    text-align: right;
}

/* Arrow element — green CSS triangle, rotates on open */
.module-three-col-cards .card-arrow {
    display: block;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid rgba(158, 168, 57, 1);
    transition: transform 0.3s ease;
    margin-left: 4px;
}

.module-three-col-cards .card-arrow::before {
    content: none !important;
}

.module-three-col-cards .card.open .card-arrow {
    transform: rotate(180deg);
}

/* Collapsible card content */
.module-three-col-cards .card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.module-three-col-cards .card.open .card-content {
    max-height: 2000px;
}

/* Toggle disabled: arrow is removed in PHP; header is not clickable and
   content is always visible. */
.module-three-col-cards.no-toggle .card-header {
    cursor: default;
    user-select: auto;
}

.module-three-col-cards.no-toggle .card-content {
    max-height: none;
    overflow: visible;
    transition: none;
}

/* Centered CTA below cards */
.module-three-col-cards .cta-wrap {
    text-align: center;
    margin-top: 40px;
}

/* =====================================================
   Text / Heading Color via CSS Custom Properties
   Set via inline style on the section or card wrapper.
   ===================================================== */

/* Banner */
.module-banner h1 {
    color: var(--pb-heading-color, inherit);
    margin-bottom: 0;
}

/* Two-Column */
.module-two-col h1,
.module-two-col h2,
.module-two-col h3,
.module-two-col h4,
.module-two-col h5,
.module-two-col h6 {
    color: var(--pb-heading-color, inherit);
}

.module-two-col h3 > a,
.module-two-col h3 > a *{
    color: rgba(101, 144, 166, 1);
    font-size: 18px;
}

/* Four Column with Icons */
.module-four-col-icons .module-heading h1,
.module-four-col-icons .module-heading h2,
.module-four-col-icons .module-heading h3,
.module-four-col-icons .module-heading h4,
.module-four-col-icons .module-heading h5,
.module-four-col-icons .module-heading h6 {
    color: var(--pb-heading-color, inherit);
}

.module-four-col-icons .icon-card h3 {
    color: var(--pb-card-title-color, inherit);
}

.module-four-col-icons .description-preview,
.module-four-col-icons .description-full {
    color: var(--pb-card-text-color, inherit);
}

/* Three Column Cards */
.module-three-col-cards h2 {
    color: var(--pb-heading-color, inherit);
}

.module-three-col-cards .card-header h3 {
    color: var(--pb-card-heading-color, inherit);
}

.module-three-col-cards .card-content {
    color: var(--pb-card-text-color, inherit);
}

/* ==========================================================================
   Module: Partner Logos Slider
   Migrated from .company-listing / template-homepage.php
   ========================================================================== */

.module-partner-logos {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .module-partner-logos {
        padding: 70px 0;
    }
}

.module-partner-logos .partner-logos-intro {
    text-align: center;
    margin: 0 auto 40px;
}

.module-partner-logos .partner-logos-full-track {
    width: 100%;
}

.module-partner-logos .badge-holder {
    height: 162px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

.module-partner-logos .badge-holder img {
    height: auto;
    width: auto;
    max-height: 162px;
}

.module-partner-logos .slide {
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   Module: Case Studies
   Migrated from .case-studies / template-homepage.php
   The original separate heading section is unified into this single block.
   ========================================================================== */

.module-case-studies {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .module-case-studies {
        padding: 70px 0;
    }
}

/* Background image — absolute fill, behind all content */
.module-case-studies-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.module-case-studies-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Lift direct children above the bg image */
.module-case-studies > .container,
.module-case-studies > .case-track {
    position: relative;
    z-index: 2;
}

/* Section heading */
.module-case-studies .section-heading {
    text-align: center;
    margin-bottom: 50px;
}

/* Full-width track (non-contained mode) */
.module-case-studies .case-track {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Cards grid — 1 col mobile, 3 col desktop, flush */
.module-case-studies .case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .module-case-studies .case-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Each grid cell has a fixed height */
.module-case-studies .case-card {
    height: 280px;
}

@media (min-width: 768px) {
    .module-case-studies .case-card {
        height: 350px;
    }
}

/* Card — image fills it entirely, text overlaid at bottom */
.module-case-studies .case-post {
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
}

.module-case-studies .case-post * {
    color: #fff;
}

/* Thumbnail — absolute fill behind all content */
.module-case-studies .case-post .thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.module-case-studies .case-post .thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
    display: block;
}

/* Per-card rgba color overlay — sits between image and text */
.module-case-studies .card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Content wrapper — sits on top of image, text anchored to bottom */
.module-case-studies .case-post .wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

/* Copy area */
.module-case-studies .case-post .copy {
    width: 100%;
}

@media (min-width: 768px) {
    .module-case-studies .case-post .copy {
        padding: 0 10px;
    }
}

/* Icon + label stacked vertically */
.module-case-studies .case-post .icon-industry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.module-case-studies .case-post .icon-industry img {
    max-width: 47px;
    display: block;
}

.module-case-studies .case-post .icon-industry span {
    display: block;
    font-family: "Spartan", "sans-serif";
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
}

/* Title */
.module-case-studies .case-post h3 {
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    min-height: 125px;
    margin: 0;
}

/* CTA below cards */
.module-case-studies .cta-wrap {
    text-align: center;
    margin-top: 40px;
}

/* ─── Feature Comparison ─── */
.module-feature-comparison {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .module-feature-comparison {
        padding: 70px 0;
    }
}

.module-feature-comparison .fc-intro {
    text-align: center;
    margin-bottom: 40px;
}

/* Two-column grid */
.module-feature-comparison .fc-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .module-feature-comparison .fc-columns {
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }
}

/* Each row: icon | gap | accordion */
.module-feature-comparison .fc-item {
    display: grid;
    grid-template-columns: 60px 7px 1fr;
    align-items: start;
    margin-bottom: 15px;
}

/* Square green icon box — standalone, outside accordion */
.module-feature-comparison .fc-icon {
    width: 60px;
    height: 60px;
    background: #9faa39;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-feature-comparison .fc-item.is-open .fc-icon {
    background: #747a2a;
}

/* ✓ symbol (default) / solid circle bullet (hover/open) via pseudo-element */
.module-feature-comparison .fc-icon::before {
    content: "\2713";
    color: #fff;
    font-size: 36px;
    line-height: 1;
}

.module-feature-comparison .fc-item.is-open .fc-icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
}

/* Accordion wrapper — border and radius live here, not on fc-item */
.module-feature-comparison .fc-accordion {
    grid-column: 3;
    border: 2px solid #e1e3e6;
    border-radius: 6px;
    overflow: hidden;
}

/* Row inside accordion: just the header, clickable */
.module-feature-comparison .fc-row {
    cursor: pointer;
    user-select: none;
}

/* Header area: gray background */
.module-feature-comparison .fc-header {
    background: #e1e3e6;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.module-feature-comparison .fc-header h3 {
    margin: 0;
}

/* Body panel: max-height transition for smooth expand */
.module-feature-comparison .fc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-feature-comparison .fc-item.is-open .fc-body {
    max-height: 600px;
}

/* Body inner: white background creates visual split from gray header */
.module-feature-comparison .fc-body-inner {
    background: #fff;
    padding: 20px;
}

/* ==========================================================================
   Module: Split Content
   Asymmetric two-col layout (7/12 left + 5/12 right stacked).
   Full-bleed column backgrounds via ::before pseudo-elements.
   ========================================================================== */

.module-split-content {
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Grid: stacked on mobile, 7/12 + 5/12 on desktop */
.module-split-content .split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    /* Stretch rows so col-side fills height to match col-main on desktop */
    align-items: stretch;
}

@media (min-width: 768px) {
    .module-split-content .split-grid {
        grid-template-columns: 7fr 5fr;
    }
}

/* ── Column: full-bleed background technique ──
   Each column is position:relative. The ::before pseudo bleeds outside the
   .container by extending 9999px in the bleed direction.
   The section's overflow:hidden clips the bleed cleanly.
   Content sits inside .col-inner at z-index:1, above the ::before.
   ──────────────────────────────────────────────────────────────────────── */

.module-split-content .col-main,
.module-split-content .col-side-top,
.module-split-content .col-side-bottom {
    position: relative;
    padding: 70px 0;
}

/* Mobile: all columns bleed both sides (no directional bias) */
.module-split-content .col-main::before,
.module-split-content .col-side-top::before,
.module-split-content .col-side-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: -9999px;
    z-index: 0;
}

.module-split-content .col-main::before {
    background-color: var(--sc-col1-bg, transparent);
}

.module-split-content .col-side-top::before {
    background-color: var(--sc-col21-bg, transparent);
}

.module-split-content .col-side-bottom::before {
    background-color: var(--sc-col22-bg, transparent);
}

/* Desktop: restore directional bleed */
@media (min-width: 768px) {
    .module-split-content .col-main::before {
        left: -9999px;
        right: 0;
    }

    .module-split-content .col-side-top::before,
    .module-split-content .col-side-bottom::before {
        left: 0;
        right: -9999px;
    }
}

/* Content wrapper — sits above the pseudo background */
.module-split-content .col-inner {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .module-split-content .col-inner {
        padding: 0 40px;
    }

    /* Col 1 (left): no inner padding on the left edge */
    .module-split-content .col-main .col-inner {
        padding-left: 0;
    }

    /* Col 2.1 and 2.2 (right): no inner padding on the right edge */
    .module-split-content .col-side-top .col-inner,
    .module-split-content .col-side-bottom .col-inner {
        padding-right: 0;
    }
}

/* Right side: stack 2.1 on top of 2.2, both auto-height */
.module-split-content .col-side {
    display: flex;
    flex-direction: column;
}

/* Col 2.1 expands to fill remaining height; col 2.2 always anchored at bottom */
.module-split-content .col-side-top {
    flex: 1;
}

.module-split-content .col-side-bottom {
    flex: none;
    margin-top: auto;
}

/* Reset ul/li margins inside WYSIWYG columns (keep list-style bullets) */
.module-split-content .col-main ul,
.module-split-content .col-side-top ul,
.module-split-content .col-side-bottom ul {
    margin-left: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.module-split-content .col-main ul ul,
.module-split-content .col-side-top ul ul,
.module-split-content .col-side-bottom ul ul {
    margin-left: 20px;
    list-style-type: disc;
}

/* Text color via CSS custom properties (set as inline style on column wrapper) */
.module-split-content .col-main h1,
.module-split-content .col-main h2,
.module-split-content .col-main h3,
.module-split-content .col-main h4,
.module-split-content .col-main h5,
.module-split-content .col-main h6,
.module-split-content .col-main p,
.module-split-content .col-main li,
.module-split-content .col-main a {
    color: var(--sc-col1-text-color, inherit);
}

.module-split-content .col-side-top h1,
.module-split-content .col-side-top h2,
.module-split-content .col-side-top h3,
.module-split-content .col-side-top h4,
.module-split-content .col-side-top h5,
.module-split-content .col-side-top h6,
.module-split-content .col-side-top p,
.module-split-content .col-side-top li,
.module-split-content .col-side-top a:not(.btn) {
    color: var(--sc-col21-text-color, inherit);
}

.module-split-content .col-side-bottom h1,
.module-split-content .col-side-bottom h2,
.module-split-content .col-side-bottom h3,
.module-split-content .col-side-bottom h4,
.module-split-content .col-side-bottom h5,
.module-split-content .col-side-bottom h6,
.module-split-content .col-side-bottom p,
.module-split-content .col-side-bottom li,
.module-split-content .col-side-bottom a {
    color: var(--sc-col22-text-color, inherit);
}

/* CTA button spacing */
.module-split-content .col-inner .btn {
    margin-top: 40px;
    display: inline-block;
}

/* ==========================================================================
   Module: Video Gallery
   Migrated from .video-library (layouts.php).
   Main showcase slider (click-to-play) + thumbnail nav slider via Slick asNavFor.
   ========================================================================== */

.module-video-gallery {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .module-video-gallery {
        padding: 70px 0;
    }
}

.module-video-gallery .vg-heading {
    text-align: center;
    margin-bottom: 30px;
}

/* Text color via CSS custom property */
.module-video-gallery .vg-heading h1,
.module-video-gallery .vg-heading h2,
.module-video-gallery .vg-heading h3,
.module-video-gallery .vg-heading h4,
.module-video-gallery .vg-heading h5,
.module-video-gallery .vg-heading h6,
.module-video-gallery .vg-heading p,
.module-video-gallery .vg-heading li,
.module-video-gallery .vg-heading a {
    color: var(--vg-text-color, inherit);
}

/* Narrow container cap (matches .video-library .narrow) */
.module-video-gallery .container.narrow {
    max-width: 1024px;
}

.module-video-gallery .no-padd {
    padding: 0;
}

/* Thumbnail strip padding */
.module-video-gallery .video-gallery {
    padding: 0 40px;
}

/* Slide padding */
.module-video-gallery .video-gallery .slide {
    padding: 10px;
}

/* Main showcase iframe: full width, 16:9 */
.module-video-gallery .video-showcase .slide iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: 100%;
}

.module-video-gallery .video-gallery .slick-slider {
    padding: 0;
}

/* Thumbnail images */
.module-video-gallery .video-gallery img {
    margin: 0 0 -5px 0;
    border: 4px solid transparent;
    transition: all 300ms ease-out;
}

/* Active thumbnail highlight */
@media (min-width: 768px) {
    .module-video-gallery .video-gallery .slide {
        padding: 0;
    }

    .module-video-gallery .video-showcase .slick-slider {
        padding: 0;
    }

    .module-video-gallery .video-gallery.slick-vertical .slick-slide.slick-current img {
        border: 4px solid #3eb7d3;
    }
}

/* Click-to-play poster */
.module-video-gallery .video-placeholder {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.module-video-gallery .video-placeholder .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.module-video-gallery .video-placeholder .play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    pointer-events: none;
}

/* ============================================================
   MODULE: Accordion
   .module-accordion
   Source: .accordion-section (includes/layouts.php)
   ============================================================ */

.module-accordion {
    padding: 50px 0;
    --pb-acc-accent: rgba(158, 168, 57, 1);
}

@media (min-width: 768px) {
    .module-accordion {
        padding: 70px 0;
    }
}

.module-accordion .acc-heading {
    margin-bottom: 30px;
}

.module-accordion .accordion .acct-section {
    border-bottom: 2px solid #2e3133;
}

/* Button row */
.module-accordion .accordion .acc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 18px 60px 18px 18px;
    position: relative;
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 200ms ease;
}

.module-accordion .accordion .acc-btn:hover {
    background: rgba(225, 227, 230, 1);
}

/* Icon inside button */
.module-accordion .accordion .acc-btn img {
    width: 40px;
    flex-shrink: 0;
}

/* Title */
.module-accordion .accordion .acc-btn h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transition: color 200ms ease;
}

/* Chevron arrow via FontAwesome (matches original) */
.module-accordion .accordion .acc-btn::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "fontawesome";
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    color: var(--pb-acc-accent);
    font-size: 25px;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease-in-out;
}

/* Open state — button */
.module-accordion .accordion .acct-section.open > .acc-btn {
    background-color: var(--pb-acc-accent);
}

.module-accordion .accordion .acct-section.open > .acc-btn h3 {
    color: #fff;
}

/* Chevron up + white when open */
.module-accordion .accordion .acct-section.open > .acc-btn::after {
    content: "\f077"; /* fa-chevron-up */
    color: #fff;
}

/* Content panel — max-height transition (no display:none) */
.module-accordion .accordion .acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease;
    padding: 0 18px;
}

.module-accordion .accordion .acct-section.open > .acc-content {
    max-height: 2000px;
    padding: 12px 18px 28px;
}

.module-accordion .accordion .acc-content p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   MODULE: Blog Posts
   .module-blog-posts
   Source: .post-section from template-homepage.php
   Slider: .page .post-slider initialized globally in main.js
   ============================================================ */

.module-blog-posts {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .module-blog-posts {
        padding: 70px 0;
    }
}

/* Background image — absolute fill, behind all content */
.module-blog-posts-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Lift direct children above the bg image */
.module-blog-posts > .container {
    position: relative;
    z-index: 2;
}

.module-blog-posts .posts-heading {
    text-align: center;
    margin-bottom: 30px;
}

.module-blog-posts .row.wide {
    display: block;
    width: 100%;
}

.module-blog-posts .row.wide .post-slider {
    padding: 0 40px;
}

.module-blog-posts .post-slider .slide {
    padding: 0 20px 70px;
}

.module-blog-posts .posts-cta-row {
    text-align: center;
    margin-top: 20px;
}

/* ==========================================================================
   Padding Utility Classes
   Control section top/bottom spacing via CSS classes.
   Applied dynamically from ACF padding_top / padding_bottom fields.
   "default" = no class (each module keeps its own padding rule).
   "none"    = .pt-none / .pb-none added to <section>.
   ========================================================================== */

.pt-none { padding-top: 0 !important; }
.pb-none { padding-bottom: 0 !important; }

/* Split Content special case: padding lives on the columns, not the section.
   Propagate the utility classes down to the relevant column elements. */
.module-split-content.pt-none .col-main,
.module-split-content.pt-none .col-side-top {
    padding-top: 0 !important;
}

.module-split-content.pb-none .col-main,
.module-split-content.pb-none .col-side-bottom {
    padding-bottom: 0 !important;
}