@import url('typography.css');

/**
 * Base Styles
 * ===========
 * Core stylesheet loaded first. Contains:
 * - Global resets and typography (font-family: Montserrat)
 * - Layout containers (.content-container, .all-content-container)
 * - Component base styles (feature-grid, slider, bottom-box, reviews, etc.)
 * - CTA buttons (.cta-button, .cta-button-blue)
 * - Footer styles
 * - Module/pillar page headers
 * 
 * CSS LOAD ORDER:
 * 1. styles.css (this file) - Base components & desktop overrides
 * 2. global-header.css - Header structure
 * 3. navigation-header.css - Product sub-nav
 * 4. header-variants.css - Page-type header overrides
 * 5. Component CSS (animations, slider, tiles, forms)
 * 6. backgrounds.css - Background colors and angles
 * 7. Template CSS (home-page, product-page, news-article, etc.)
 * 
 * STANDARD BREAKPOINTS:
 * - Desktop: min-width: 1025px
 * - Tablet/Mobile: max-width: 1024px
 * - Small Mobile: max-width: 768px
 */

/* * {
    border: 1px solid red;
} */

html,
body {
    font-family: var(--font-family-base);
    line-height: var(--font-body-height);
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    /* Prevent horizontal scroll from header triangles */
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.section-bg-blue {
    background-color: #006997;
}

.section-bg-transparent {
    background-color: transparent !important;
}




h1 {
    font-size: var(--font-h1-size);
    color: #186AA5;
    font-weight: var(--font-h1-weight);
    line-height: var(--font-h1-height);
}

h2 {
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    color: #00A6DD;
    line-height: var(--font-h2-height);
}

h3 {
    font-size: var(--font-h3-size);
    color: #186AA5;
    font-weight: var(--font-h3-weight);
    line-height: var(--font-h3-height);

}

h4 {
    font-size: var(--font-h4-size);
}

p,
li {
    font-size: var(--font-ui-size);
    font-weight: var(--font-lead-weight);
    color: #626467;
}

p {
    line-height: var(--font-ui-height);
}

.first-paragraph {
    font-size: var(--font-lead-size);
    line-height: var(--font-lead-height);
}

a {
    text-decoration: none;
}

/* a:visited {
    color: #fff;
} */

.max-width {
    max-width: 1440px;
    margin: 0 auto;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.all-content-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    padding: 0 40px 60px;
    flex: 1;
}

/* .left-column {
    position: relative;
    flex: 0 0 25%;
    align-items: end;

}

.left-column:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 30%;
    width: 1px;
    background-color: rgb(98, 100, 103, 0.5);
    z-index: 1;
} */

/* .right-column {
    position: relative;
    flex: 0 0 75%;
} */

.single-column {
    width: 100%;
}

.section-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.background-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.content-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 40px;
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.header-image {
    flex: 0 0 30%;
    max-width: 30%;
}

.header-text {
    flex: 1;
}

.header-paragraphs {
    flex: 2;
}

/* Feature Grid Styles - Layout Only (Typography in page-specific CSS) */

/* Override content-container padding when in feature-grid-section */
.feature-grid-section .content-container {
    padding: 0;
}

.feature-grid-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;
}

.feature-grid-section-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.feature-grid-section-header h2 {
    font-family: var(--font-family-base);
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    font-style: normal;
    line-height: 39px;
    color: #027AA8;
    text-transform: none;
    margin: 0;
    flex: 1;
    /* Limit header width to 2/3 */
    max-width: 66.66%;
}

.single-image-text-header h2,
.slider-section-header {
    max-width: 66.66%;
}

.feature-grid-section-logo {
    flex-shrink: 0;
}

.feature-grid-section-logo img {
    max-width: 150px;
    height: auto;
    display: block;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 40px;
    width: 100%;
}

/* Feature Grid Item Image - Fixed height and constraints */
.feature-grid-item-image {
    width: 100%;
    height: 200px;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-end;
    /* Align to bottom */
    justify-content: flex-start;
    overflow: visible;
    /* Never crop images */
    border-radius: 8px;
}

.feature-grid-item-image img {
    max-width: 100%;
    max-height: 200px;
    /* Constrain height */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 2x2 grid variant for exactly 4 items - tighter layout */
.feature-grid--2x2 {
    grid-template-columns: max-content max-content;
    gap: 60px 250px;
}

.feature-grid--2x2 .feature-grid-item {
    align-items: flex-start;
}

.feature-grid--2x2 .feature-grid-item-image {
    margin-bottom: 8px;
    padding-left: 0;
    align-items: flex-start;
}

.feature-grid--2x2 .feature-grid-item-image img {
    width: auto;
    max-height: 200px;
    object-fit: contain;
}

.feature-grid--2x2 .feature-grid-item-copy {
    gap: 8px;
    max-width: 380px;
}

.feature-grid-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.feature-grid-item-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 420px;
    /* Enforce user requested width */
}

/* Default typography - can be overridden in page-specific CSS */
.feature-grid-item-header {
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-h3-size);
    line-height: 28px;
    color: #000000;
    margin: 0;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    width: 100%;
}

.feature-grid-item-subheader {
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    color: #58595B;
    /* Grey */
    margin: 0 0 10px 0;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.feature-grid-item-body {
    list-style: none;
    padding: 0;
    margin: 0;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}

/* Ensure list items inside body (if used) inherit or use specific body font */
.feature-grid-item-body ul {
    margin: 0;
    padding-left: 20px;
}

.feature-grid-item-body li {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #58595B;
    margin-bottom: 8px;
    list-style-type: none;
    position: relative;
    padding-left: 15px;
    /* Space for the bullet */
    /* Space for the bullet */
}

.feature-grid-item-body li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
}

.feature-grid-item-body li:last-child {
    margin-bottom: 0;
}

/* Plain style (no bullets) */
.feature-grid-item-body.plain-style p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #58595B;
    margin: 0 0 8px 0;
}

.feature-grid-item-body.plain-style p:last-child {
    margin-bottom: 0;
}

/* Responsive Styles */

/* 3 → 2 columns at 768px (was 1244px — much too early with tighter type) */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }

    .feature-grid-item-image {
        min-height: auto;
    }

    .feature-grid-item-image img {
        max-width: 100%;
        max-height: 180px;
    }

    /* 2x2 stays 2 columns at mid-mobile */
    .feature-grid--2x2 {
        grid-template-columns: minmax(0, max-content) minmax(0, max-content);
        gap: 30px 40px;
    }

    /* Reset max-width for section headers on mobile */
    .feature-grid-section-header h2,
    .single-image-text-header h2,
    .slider-section-header {
        max-width: 100%;
    }

    .feature-grid-section-header h2 {
        font-size: var(--font-h2-size);
        line-height: 39px;
    }

    .feature-grid-section-header {
        margin-bottom: 30px;
    }

    .feature-grid-item-copy {
        gap: 15px;
    }

    .feature-grid-content-wrapper {
        padding: 40px 20px;
    }
}

/* 2 → 1 column at 480px (was 768px — now allows 2-col grid on most phones) */
@media (max-width: 480px) {
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-grid-item-image {
        padding-left: 0;
        justify-content: center;
        margin-bottom: 15px;
    }

    .feature-grid-item-image img {
        max-width: 85%;
        max-height: 160px;
    }

    /* 2x2 goes single column on small mobile */
    .feature-grid--2x2 {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .feature-grid--2x2 .feature-grid-item-image {
        margin-bottom: 8px;
    }

    .feature-grid--2x2 .feature-grid-item-image img {
        max-width: 100%;
    }

    .feature-grid--2x2 .feature-grid-item-copy {
        gap: 8px;
        max-width: 100%;
    }

    .feature-grid-section-header h2 {
        font-size: var(--font-h3-size);
        line-height: 34px;
    }
}

img {
    width: 100%;
    height: auto;
    /* box-shadow: 0px 10px 40px #00549152; */
}

.footer-wrapper {
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Site Footer Styles */
.site-footer {
    width: 100%;
    background-color: #004664;
}

.footer-bar {
    width: 100%;
}

.footer-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 40px;
    gap: 30px;
    box-sizing: border-box;
}

/* Left column: Logo + Nav */
.footer-left-column {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.footer-brand {
    flex-shrink: 0;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    position: relative;
    top: 3px;
}

.footer-main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-main-nav a {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-main-nav a:hover {
    opacity: 0.8;
}

/* Right column: Social + Legal */
.footer-right-column {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    transition: opacity 0.2s ease;
}

.footer-social-link:hover {
    opacity: 0.8;
}

.footer-social-icon {
    width: 28px;
    height: 28px;
}

.footer-legal-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-legal-nav a {
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-micro-size);
    line-height: var(--font-micro-height);
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-legal-nav a:hover {
    opacity: 1;
}

/* Footer Responsive Styles */
@media (max-width: 1244px) {
    .footer-bar-content {
        padding: 30px 30px;
        gap: 20px;
    }

    .footer-left-column {
        gap: 30px;
    }

    .footer-main-nav {
        gap: 20px;
    }

    .footer-main-nav a {
        font-size: var(--font-body-size);
    }

    .footer-right-column {
        gap: 16px;
    }

    .footer-legal-nav {
        gap: 15px;
    }
}

@media (max-width: 900px) {
    .footer-bar-content {
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .footer-left-column {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer-main-nav {
        gap: 20px;
    }

    .footer-main-nav a {
        font-size: var(--font-ui-size);
    }

    .footer-right-column {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .footer-legal-nav {
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .footer-bar-content {
        padding: 25px 15px;
        gap: 20px;
    }

    /* Hide nav items on mobile - show only logo, social, legal */
    .footer-main-nav {
        display: none;
    }

    .footer-logo-img {
        height: 35px;
    }

    .footer-legal-nav {
        gap: 15px;
    }

    .footer-legal-nav a {
        font-size: var(--font-caption-size);
    }
}


/* CTA Button Base Styles */
.cta-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    gap: 10px;
    font-size: var(--font-ui-size);
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    /* Default: Orange gradient */
    background: linear-gradient(0deg, #A1431A 0%, #E65A1D 64.42%);
    border: 1px solid #E65A1D;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

.cta-button a {
    color: #fff;
    text-decoration: none;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.3);
    filter: brightness(1.05);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}

/* Blue Button Variant */
.cta-button-blue {
    background: linear-gradient(0deg, #006998 8.4%, #07B1E2 84.52%);
    border: 1px solid #07B1E2;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
}

.cta-button-blue:hover {
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.3);
}

.overflow-visible {
    overflow: visible;
}

.feature-tiles a:visited,
.cta-button a:visited,
.feature-tile-header a:visited {
    color: #fff;
}

/* Bottom Box Styles - Layout Only (Typography can be overridden in page-specific CSS) */
.bottom-box-background {
    width: 100%;
    height: 100%;
    background-color: #004664;
    position: absolute;
    top: 0;
    left: 0;
}

.bottom-box-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 0;
    text-align: center;
}

.bottom-box-header {
    font-family: var(--font-family-base);
    font-size: var(--font-h1-size);
    font-weight: 300;
    color: #186AA5;
    /* Brand blue on white background */
    margin: 0 0 30px 0;
    line-height: 73px;
    text-align: center;
}

.bottom-box-body {
    width: 100%;
    max-width: 1344px;
    margin: 0 auto;
    text-align: center;
}

.bottom-box-title {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h3-size);
    font-weight: 700;
    color: #07B1E2;
    margin: 0 0 12px 0;
    line-height: 34px;
    text-align: center;
}

.bottom-box-text {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h3-size);
    font-weight: 600;
    color: #006997;
    margin: 0 0 25px 0;
    line-height: 32px;
    text-align: center;
}

/* When text is the last element before CTAs, reduce margin */
.bottom-box-text:last-child {
    margin-bottom: 0;
}

.bottom-box-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* When CTAs are directly after title (no text), adjust spacing */
.bottom-box-title+.bottom-box-ctas {
    margin-top: 20px;
}

/* When CTAs are the only content in body (first child) */
.bottom-box-body>.bottom-box-ctas:first-child {
    margin-top: 0;
}

/* Outline Button Variant (Orange) */
.cta-button-outline {
    background: transparent;
    border: 2px solid #E65A1D;
    color: #E65A1D;
    box-shadow: none;
}

.cta-button-outline:hover {
    background: linear-gradient(0deg, #A1431A 0%, #E65A1D 64.42%);
    color: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

/* Outline Button Variant (Blue) */
.cta-button-outline-blue {
    background: transparent;
    border: 2px solid #07B1E2;
    color: #07B1E2;
    box-shadow: none;
}

.cta-button-outline-blue:hover {
    background: linear-gradient(0deg, #006998 8.4%, #07B1E2 84.52%);
    color: #ffffff;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}

/* Reviews Styles - Layout Only (Typography can be overridden in page-specific CSS) */
.reviews-background {
    width: 100%;
    height: 100%;
    background-color: #006997;
    position: absolute;
    top: 0;
    left: 0;
}

.reviews-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0;
}

/* Reviews Section - Fix for overlapping angles */
.reviews-section {
    position: relative;
    z-index: 20;
    /* Ensure this sits above any previous section's angle overflow (z-index 10) */
}

/* 
 * Angle Coverage Fix:
 * Ensure the reviews section is at least as tall as the angle offset from the previous section
 * so the angle doesn't "peek out" below it.
 * Offsets match the 'bottom' values in background.css
 */
@media (min-width: 1600px) and (max-width: 2499px) {
    .reviews-section {
        min-height: 350px;
    }

    .reviews-right {
        min-width: 350px;
        /* Make image container wider */
    }

    .reviews-image {
        min-height: 350px;
        /* Match section height */
        object-fit: cover;
    }
}

@media (min-width: 2500px) {
    .reviews-section {
        min-height: 400px;
    }

    .reviews-right {
        min-width: 400px;
        /* Make image container wider */
    }

    .reviews-image {
        min-height: 400px;
        /* Match section height */
        object-fit: cover;
    }
}

/* Ensure standard offset coverage for smaller screens if needed */
@media (max-width: 1599px) {
    .reviews-section {
        min-height: 300px;
        /* Standard angle offset for 1200-1599px */
    }
}

@media (max-width: 1199px) {

    /* Standard offset (200px) coverage */
    .reviews-section {
        min-height: 200px;
    }
}

.reviews-container {
    display: flex;
    align-items: stretch;
    gap: 60px;
    width: calc(100% - 80px);
    margin: 0 auto;
    min-height: 100%;
}

.reviews-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 60px 0;
    justify-content: center;
}

.reviews-quote {
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    line-height: 24px;
    margin: 0 0 20px 0;
}

.reviews-name {
    font-size: 18px;
    font-weight: 500;
    color: #00A6DD;
    line-height: 1;
    margin: 0;
    text-align: right;
}

.reviews-right {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    margin: -20px -40px -20px 0;
}

.reviews-image {
    width: 100%;
    max-width: 300px;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

@media (max-width: 1244px) {

    .all-content-container,
    .content-container {
        padding: 20px;
    }

    .bottom-box-content-wrapper {
        padding: 50px 0;
    }

    .bottom-box-header {
        font-size: var(--font-h1-size);
        line-height: 54px;
    }

    .bottom-box-title {
        font-size: var(--font-h3-size);
        line-height: 29px;
    }

    .bottom-box-text {
        font-size: var(--font-h3-size);
        line-height: 28px;
    }

    .reviews-left {
        padding: 50px 0;
    }

    .reviews-container {
        width: calc(100% - 80px);
        gap: 40px;
    }

    .reviews-right {
        margin: -20px -20px -20px 0;
    }

    .reviews-quote {
        font-size: var(--font-h4-size);
    }

    .reviews-name {
        font-size: var(--font-body-size);
    }

    .reviews-image {
        max-width: 250px;
    }
}

@media (max-width: 768px) {

    .all-content-container,
    .content-container {
        padding: 0 10px 30px 10px;
    }

    .header-image,
    .header-text,
    .header-paragraphs {
        flex-basis: 100%;
        max-width: 100%;
    }

    .header-image {
        order: -1;
    }

    .header-text {
        order: 1;
    }

    .bottom-box-content-wrapper {
        padding: 40px 0;
    }

    .bottom-box-header {
        font-size: var(--font-h3-size);
        line-height: 34px;
        margin-bottom: 20px;
    }

    .bottom-box-body {
        width: 100%;
    }

    .bottom-box-title {
        font-size: var(--font-lead-size);
        line-height: 22px;
        margin-bottom: 8px;
    }

    .bottom-box-text {
        font-size: var(--font-lead-size);
        line-height: 21px;
        margin-bottom: 20px;
    }

    .bottom-box-ctas {
        flex-direction: column;
        gap: 12px;
        margin-top: 5px;
    }

    .bottom-box-title+.bottom-box-ctas {
        margin-top: 15px;
    }

    .reviews-left {
        padding: 40px 0;
        order: 0;
        text-align: center;
    }

    .reviews-container {
        flex-direction: column;
        width: calc(100% - 20px);
        gap: 30px;
    }

    .reviews-right {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-right: 0;
    }

    .reviews-image {
        height: auto;
        max-height: 300px;
        max-width: 200px;
        border-radius: 8px;
    }

    .reviews-quote {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .reviews-name {
        font-size: 16px;
    }
}

/* Comparison Table Styles */
.comparison-table-section {
    position: relative;
}

/* Override content-container padding for comparison table - wrapper handles its own */
.comparison-table-section .content-container {
    padding: 0;
}

.comparison-table-background {
    width: 100%;
    height: 100%;
    /* background-color: #3d7ab5; */
    /* Background color will be added per-page later */
    position: absolute;
    top: 0;
    left: 0;
}

.comparison-table-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* Top Section */
.comparison-table-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* When top section has only CTA (no header), right-align it */
/* When top section has only CTA (no header), right-align it */
.comparison-table-top.cta-only {
    justify-content: flex-end;
}

/* 
   Reserve space for absolute header 
   (Only when NOT cta-only) 
*/
.comparison-table-top:not(.cta-only) {
    min-height: 100px;
    /* ~146px header + buffer */
}

/* Addon Page Specific: Smaller reserved space */
.page-type-addon-page .comparison-table-top:not(.cta-only) {
    min-height: 80px;
    /* ~61px header + buffer */
}

/* Mobile Spacing for Header (User Request) */
@media (max-width: 768px) {
    .comparison-table-top:not(.cta-only) {
        min-height: 50px;
    }
}

.comparison-table-top-header {
    position: relative;
    width: 100%;
    margin: 0;
    flex: 1;

    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h1-size);
    font-weight: 300;
    font-style: normal;
    line-height: normal;
    text-align: left;

    /* Color handled by backgrounds.css */
    margin: 0;
    flex: 1;
}

/* Compensate for absolute header rule REMOVED - handled by .comparison-table-top min-height */

/* Addon Page Specific Header (User Request) */
.page-type-addon-page .comparison-table-top-header {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: normal;
    text-align: left;

    /* Inherits color from backgrounds.css logic */
}

/* Comparison Table Spacing handled by container min-height above */

/* 
   Color Overrides for Comparison Table Header 
   Force Blue (#186AA5) on White/Light/Angle Backgrounds 
   (White text handles itself on dark backgrounds via default styles)
*/
.bg-opt-white .comparison-table-top-header,
.bg-opt-blue-angle .comparison-table-top-header,
.bg-opt-blue-dark-angle .comparison-table-top-header,
.bg-opt-orange-angle .comparison-table-top-header,
.bg-opt-smartsub-orange-angle .comparison-table-top-header {
    color: #186AA5 !important;
}

/* 
   "Frame 141" White Box Header Style for Angled Sections
   User Request: White background, shadow, rounded corners, padding
*/
.bg-opt-blue-angle .intro-flexible-header,
.bg-opt-blue-angle .smrte-sit-header,
.bg-opt-blue-angle .feature-grid-section-header h2,
.bg-opt-blue-angle .slider-section-header,
.bg-opt-blue-angle .single-image-text-header h2,
.bg-opt-blue-angle .three-column-header,
.bg-opt-blue-angle+.section-container .intro-flexible-header,
.bg-opt-blue-angle+.section-container .smrte-sit-header,
.bg-opt-blue-angle+.section-container .feature-grid-section-header h2,
.bg-opt-blue-angle+.section-container .slider-section-header,
.bg-opt-blue-angle+.section-container .single-image-text-header h2,
.bg-opt-blue-angle+.section-container .three-column-header,
.bg-opt-blue-angle+.section-container .module-header-heading,

.bg-opt-blue-dark-angle .intro-flexible-header,
.bg-opt-blue-dark-angle .smrte-sit-header,
.bg-opt-blue-dark-angle .feature-grid-section-header h2,
.bg-opt-blue-dark-angle .slider-section-header,
.bg-opt-blue-dark-angle .single-image-text-header h2,
.bg-opt-blue-dark-angle+.section-container .intro-flexible-header,
.bg-opt-blue-dark-angle+.section-container .smrte-sit-header,
.bg-opt-blue-dark-angle+.section-container .feature-grid-section-header h2,
.bg-opt-blue-dark-angle+.section-container .slider-section-header,
.bg-opt-blue-dark-angle+.section-container .single-image-text-header h2,
.bg-opt-blue-dark-angle+.section-container .module-header-heading,

.bg-opt-orange-angle .intro-flexible-header,
.bg-opt-orange-angle .smrte-sit-header,
.bg-opt-orange-angle .feature-grid-section-header h2,
.bg-opt-orange-angle .slider-section-header,
.bg-opt-orange-angle .single-image-text-header h2,
.bg-opt-orange-angle+.section-container .intro-flexible-header,
.bg-opt-orange-angle+.section-container .smrte-sit-header,
.bg-opt-orange-angle+.section-container .feature-grid-section-header h2,
.bg-opt-orange-angle+.section-container .slider-section-header,
.bg-opt-orange-angle+.section-container .single-image-text-header h2,
.bg-opt-orange-angle+.section-container .module-header-heading,

.bg-opt-smartsub-orange-angle .intro-flexible-header,
.bg-opt-smartsub-orange-angle .smrte-sit-header,
.bg-opt-smartsub-orange-angle .feature-grid-section-header h2,
.bg-opt-smartsub-orange-angle .slider-section-header,
.bg-opt-smartsub-orange-angle .single-image-text-header h2,
.bg-opt-smartsub-orange-angle+.section-container .intro-flexible-header,
.bg-opt-smartsub-orange-angle+.section-container .smrte-sit-header,
.bg-opt-smartsub-orange-angle+.section-container .feature-grid-section-header h2,
.bg-opt-smartsub-orange-angle+.section-container .slider-section-header,
.bg-opt-smartsub-orange-angle+.section-container .single-image-text-header h2,
.bg-opt-smartsub-orange-angle+.section-container .three-column-header,
.bg-opt-smartsub-orange-angle+.section-container .module-header-heading {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding: 10px;
    gap: 10px;

    background: #FFFFFF;
    box-shadow: 0px 4px 10.1px rgba(0, 0, 0, 0.25);
    border-radius: 8px;

    /* Ensure text color is blue for contrast against white box */
    /* IMPORTANT: Must override backgrounds.css which sets h2 to #00A6DD !important */
    color: #186AA5 !important;

    /* Fit content strictly to text size */
    width: fit-content;
    max-width: 100%;

    /* Prevent flex-grow from parent containers (like slider-section-header which has flex: 1) */
    flex: none;
}

/* Desktop Table */
.comparison-table-desktop {
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.comparison-table-mobile {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.comparison-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
}

.comparison-table thead {
    background-color: #006997;
}

.comparison-table th {
    padding: 20px 25px;
    text-align: left;
    vertical-align: middle;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    /* Bold */
    line-height: 36px;
    text-transform: none;
    letter-spacing: 0%;
    /* Explicit 0% */
    border-bottom: 1px dashed #006997;
}

.comparison-table th.comparison-table-col1 {
    width: 25%;
    background-color: #004664;
}

.comparison-table th.comparison-table-col2,
.comparison-table th.comparison-table-col3 {
    width: 37.5%;
}

.comparison-table-header-logo {
    max-height: 30px;
    width: auto;
    display: block;
    margin-bottom: 5px;
}

.comparison-table th span {
    display: block;
}

/* Two Column Table Styles */
.two-column-table-header {
    font-size: 18px;
    /* User spec */
}

.two-column-table-body {
    font-size: 14px;
    /* User spec */
}

.comparison-table td {
    padding: 24px 25px;
    border-bottom: 1px dashed #02709E;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

/* Column-based coloring (not row-based) */
.comparison-table td.comparison-table-col1 {
    background-color: #004664;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif;
}

.comparison-table td.comparison-table-col2 {
    background-color: #ffffff;
    color: #6E6E6E;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif;
}

.comparison-table td.comparison-table-col3 {
    background-color: #E3F9FF;
    color: #02709E;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif;
}

/* Column header colors to match */
.comparison-table th.comparison-table-col2 {
    background-color: #ffffff;
    color: #6E6E6E;
}

.comparison-table th.comparison-table-col3 {
    background-color: #E3F9FF;
    color: #02709E;
}

/* Below Table Content */
.comparison-table-below-heading {
    text-align: center;
    margin-top: 40px;
}

.comparison-table-below-heading h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h1-size);
    font-weight: 300;
    line-height: 73px;
    color: #006997;
    margin: 0;
}

.comparison-table-download {
    text-align: center;
    margin-top: 25px;
}

/* When download has no heading above it, right-align */
.comparison-table-download.cta-only {
    text-align: right;
}

/* Bottom CTA Bar */
.comparison-table-cta-section,
.cta-bar-section {
    background-color: #ffffff;
    position: relative;
    z-index: 10 !important;
    margin-bottom: -5px;
}

/* Override content-container padding for cta-bar - wrapper handles its own */
.cta-bar-section .content-container {
    padding: 0;
}

.comparison-table-cta-wrapper,
.cta-bar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 40px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* When CTA has only button (no text), right-align it */
.comparison-table-cta-wrapper.cta-only,
.cta-bar-wrapper.cta-only {
    justify-content: flex-end;
}

.comparison-table-cta-text {
    font-size: 16px;
    font-weight: 600;
    color: #006997;
}

.cta-bar-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
    color: #006997;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0;
}

/* CTA Bar specific button styling */
.cta-bar-wrapper .cta-button {
    background: linear-gradient(0deg, #CC5E33 8.4%, #C23F11 84.52%);
    border: 1px solid #E65A1D;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    padding: 8px 24px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Mobile Card Styles */
.comparison-table-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.comparison-table-card-header {
    background-color: #006997;
    padding: 15px 20px;
}

.comparison-table-card-header span {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
}

.comparison-table-card-section {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.comparison-table-card-section:last-child {
    border-bottom: none;
}

.comparison-table-card-col3 {
    background-color: #E3F9FF;
}

.comparison-table-card-col2 {
    background-color: #ffffff;
}

.comparison-table-card-logo {
    max-height: 25px;
    width: auto;
    margin-bottom: 10px;
}

.comparison-table-card-label {
    font-size: 16px;
    font-weight: 700;
    color: #006997;
    margin: 0 0 8px 0;
    text-transform: none;
}

.comparison-table-card-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 28px;
    margin: 0;
}

.comparison-table-card-col3 .comparison-table-card-text {
    color: #02709E;
    font-weight: 600;
}

.comparison-table-card-col2 .comparison-table-card-text {
    color: #6E6E6E;
    font-weight: 500;
}

/* Comparison Table Responsive - 1244px */
@media (max-width: 1244px) {
    /* .comparison-table-content-wrapper {
        padding: 50px 20px;
    } REMOVED - Keep 40px side padding */

    .comparison-table-top-header {
        font-size: 44px;
        line-height: 54px;
    }

    .comparison-table th {
        padding: 15px 18px;
        font-size: 22px;
    }

    .comparison-table td {
        padding: 15px 18px;
        font-size: 16px;
    }

    .comparison-table td.comparison-table-col1 {
        font-size: 16px;
    }

    .comparison-table-below-heading h3 {
        font-size: 44px;
        line-height: 54px;
    }

    .comparison-table-cta-wrapper,
    .cta-bar-wrapper {
        padding: 10px 20px;
    }
}

/* Comparison Table Responsive - 768px (Mobile) */
@media (max-width: 768px) {
    .comparison-table-content-wrapper {
        padding: 40px 10px;
        width: 100%;
        margin: 0 auto;
    }

    .comparison-table-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
    }

    .comparison-table-top-header {
        font-size: 28px;
        line-height: 34px;
    }

    /* Hide desktop table, show mobile cards */
    .comparison-table-desktop {
        display: none;
    }

    .comparison-table-mobile {
        display: block;
        width: 100%;
    }

    .comparison-table-card {
        width: 100%;
    }

    .comparison-table-below-heading {
        margin-top: 30px;
        width: 100%;
    }

    .comparison-table-below-heading h3 {
        font-size: 28px;
        line-height: 34px;
    }

    .comparison-table-download {
        margin-top: 20px;
        width: 100%;
    }

    .comparison-table-cta-wrapper,
    .cta-bar-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .comparison-table-cta-wrapper.cta-only,
    .cta-bar-wrapper.cta-only {
        align-items: center;
    }

    .comparison-table-cta-text {
        font-size: 14px;
    }

    .cta-bar-text {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }
}

/* Single Image Text Section Styles */
.single-image-text-section {
    position: relative;
    z-index: 20;
}

/* Override content-container padding - wrapper handles its own */
.single-image-text-section .content-container {
    padding: 0;
}

.single-image-text-background {
    width: 100%;
    height: 100%;
    /* Background color will be added per-page later */
    position: absolute;
    top: 0;
    left: 0;
}

.single-image-text-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* Breakout mode - allow image to extend beyond wrapper */
.single-image-text-section.image-breakout .content-container {
    overflow: visible;
}

.single-image-text-section.image-breakout .single-image-text-content-wrapper {
    overflow: visible;
}

.single-image-text-header {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h2-size);
    font-weight: 700;
    line-height: 39px;
    letter-spacing: 0%;
    color: #006997;
    margin: 0 0 24px 0;
    text-transform: none;
    text-align: left;
    width: 100%;
}

.single-image-text-section-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #333333;
    margin: -20px 0 40px 0;
}

.single-image-text-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.single-image-text-left {
    flex: 0 0 45%;
    max-width: 638px;
}

.single-image-text-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
}

/* Contained mode - image stays within bounds */
.single-image-text-section.image-contained .single-image-text-right {
    max-width: 50%;
}

.single-image-text-section.image-contained .single-image-text-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Breakout mode - same size as contained but allows overflow past container edge */
.single-image-text-section.image-breakout .single-image-text-right {
    position: relative;
    max-width: 50%;
    margin-right: -40px;
    /* Extend beyond wrapper padding */
}

/* Ensure images remain absolute/animated even in breakout/contained modes */
.single-image-text-section.image-breakout .single-image-text-image,
.single-image-text-section.image-contained .single-image-text-image {
    max-width: 100%;
    /* Remove height: auto to allow object-fit: contain to work with height: 100% */
    /* display: block is fine */
}

/* Divider between items */
/* Dynamic Image Transition Logic (Ported from smrte-sit) */
.single-image-text-right.single-image-text-images {
    position: relative;
    /* Ensure minimum height so images don't collapse container if absolute */
    min-height: 400px;
}

.single-image-text-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Or cover, depending on desired look. Legacy was 'wide' */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.single-image-text-image.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.single-image-text-divider {
    width: 100%;
    height: 0;
    border-top: 1px dashed #006997;
    margin: 30px 0;
}

/* Item styles */
.single-image-text-item {
    margin-bottom: 0;
}

.single-image-text-item-header {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h3-size);
    font-weight: 600;
    line-height: 30px;
    color: #006997;
    margin: 0 0 12px 0;
    text-transform: none;
}

.single-image-text-item-number {
    color: #006997;
}

/* Plain style - paragraph text */
.plain-style .single-image-text-item-body p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    margin: 0 0 10px 0;
}

.plain-style .single-image-text-item-body p:last-child {
    margin-bottom: 0;
}

/* Bullet style - list items */
.bullet-style .single-image-text-item-body {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bullet-style .single-image-text-item-body li {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    margin-bottom: 8px;
    padding-left: 25px;
    position: relative;
}

.bullet-style .single-image-text-item-body li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: inherit;
    font-weight: bold;
    font-size: 24px;
}

.bullet-style .single-image-text-item-body li {
    position: relative;
    /* Ensure li takes color from parent so inherit works in pseudo-element */
    color: inherit;
}

/* Fix for blue backgrounds in single-image-text */
.bg-opt-blue .single-image-text-item-body li,
.bg-opt-blue-dark .single-image-text-item-body li,
.bg-opt-orange .single-image-text-item-body li,
.bg-opt-blue-angle .single-image-text-item-body li,
.bg-opt-blue-dark-angle .single-image-text-item-body li,
.bg-opt-orange-angle .single-image-text-item-body li {
    color: #FFFFFF;
}

.bullet-style .single-image-text-item-body li:last-child {
    margin-bottom: 0;
}

/* Single Image Text Responsive - 1244px */
@media (max-width: 1244px) {

    /* Responsive Adjustments - 1244px */
    /* Responsive Adjustments - 1244px */
    /*.single-image-text-content-wrapper {
        padding: 50px 20px;
    } REMOVED - Keep 40px side padding */

    .single-image-text-header {
        /* font-size: 38px; REMOVED - Max 32px */
        margin-bottom: 30px;
    }

    .single-image-text-section-body {
        font-size: 16px;
        line-height: 24px;
        margin: -15px 0 30px 0;
    }

    .single-image-text-layout {
        gap: 40px;
    }

    .single-image-text-left {
        flex: 0 0 50%;
    }

    .single-image-text-section.image-breakout .single-image-text-right {
        margin-right: -20px;
    }

    .single-image-text-section.image-breakout .single-image-text-image {
        max-height: 500px;
    }

    .single-image-text-item-header {
        font-size: 24px;
        /* Max 24px */
        line-height: 34px;
    }

    .plain-style .single-image-text-item-body p,
    .bullet-style .single-image-text-item-body li {
        font-size: 16px;
        /* Max 16px */
        line-height: 24px;
        /* Adjusted line height */
    }

    .single-image-text-divider {
        margin: 25px 0;
    }
}

/* Single Image Text Responsive - 768px (Mobile) */
@media (max-width: 768px) {
    .single-image-text-content-wrapper {
        padding: 40px 20px;
    }

    .single-image-text-header {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 25px;
        text-align: left;
    }

    .single-image-text-section-body {
        font-size: 14px;
        line-height: 20px;
        margin: -10px 0 20px 0;
    }

    .single-image-text-layout {
        flex-direction: column;
        gap: 20px;
    }

    .single-image-text-left {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .single-image-text-right {
        order: 2;
        width: 100%;
        justify-content: center;
        max-width: 100%;
        margin-right: 0;
    }

    /* Reset breakout on mobile */
    .single-image-text-section.image-breakout .single-image-text-right {
        margin-right: 0;
    }

    .single-image-text-section.image-contained .single-image-text-right,
    .single-image-text-section.image-breakout .single-image-text-right {
        max-width: 100%;
    }

    .single-image-text-section.image-contained .single-image-text-image,
    .single-image-text-section.image-breakout .single-image-text-image {
        max-width: 85%;
        max-height: none;
    }

    .single-image-text-item-header {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .plain-style .single-image-text-item-body p,
    .bullet-style .single-image-text-item-body li {
        font-size: 16px;
        line-height: 24px;
    }

    .bullet-style .single-image-text-item-body li {
        padding-left: 20px;
    }

    .bullet-style .single-image-text-item-body li:before {
        font-size: 18px;
    }

    .single-image-text-divider {
        margin: 20px 0;
    }
}

/* Two Column Table Section Styles */
.two-column-table-section {
    position: relative;
}

/* =============================================================================
   Product Page Two-Column-Table Overlap
   Pulls the section up into the header for the split-color effect
   ============================================================================= */

.page-type-product-page .two-column-table-section {
    margin-top: -150px;
    /* Pull up into header area */
    z-index: 15;
    /* Above header (1), but below header content (z-index: 50) */
}

.page-type-product-page .two-column-table-content-wrapper {
    padding-top: 0;
    /* Remove top padding since we're overlapping */
}

/* Add isometric grid to split-color backgrounds on product pages */
.page-type-product-page .bg-split-blue-white::after,
.page-type-product-page .bg-split-blue-dark-white::after,
.page-type-product-page .bg-split-orange-white::after,
.page-type-product-page .bg-split-smartsub-orange-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/isometric-repeating-grid.svg');
    background-repeat: repeat-x;
    background-position: top center;
    opacity: 0.15;
    filter: saturate(0) brightness(10);
    /* White grid on color portion */
    z-index: 6;
    /* Above color (5), below content (20) */
    pointer-events: none;
    /* Fade out grid at split point */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 60%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The grid pattern for the homepage three-column section is handled via the bg-opt-transparent class if needed, or by allowing the header slope ::after to show through. */

.three-column--homepage-grid .content-container {
    position: relative !important;
    z-index: 20 !important;
}

/* Override content-container padding - wrapper handles its own */
.two-column-table-section .content-container {
    padding: 0;
}

.two-column-table-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px 120px 40px;
    /* Extra bottom padding for box-shadow */
    box-sizing: border-box;
}

.two-column-table-card {
    display: flex;
    background: linear-gradient(176.43deg, rgba(255, 255, 255, 0) 85.39%, rgba(2, 112, 158, 0.2) 103.46%), #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 4px 12px rgba(0, 61, 87, 0.08),
        0px 12px 24px rgba(0, 61, 87, 0.06),
        0px 24px 48px rgba(0, 61, 87, 0.04);
    overflow: hidden;
}

.two-column-table-left,
.two-column-table-right {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 40px;
    gap: 25px;
}

.two-column-table-right {
    background-color: #E3F9FF;
}

.two-column-table-image {
    flex: 0 0 auto;
    max-width: 120px;
}

.two-column-table-image img {
    width: 100%;
    height: auto;
    display: block;
}

.two-column-table-text {
    flex: 1;
}

.two-column-table-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    /* Updated per user request */
    font-weight: 700;
    line-height: 36px;
    margin: 0 0 15px 0;
    text-transform: none;
}

/* Left column header - grey */
.two-column-table-left .two-column-table-header {
    color: #6E6E6E;
}

/* Right column header - blue */
.two-column-table-right .two-column-table-header {
    color: #02709E;
}

.two-column-table-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    /* Updated per user request */
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}

/* Left column body - black */
.two-column-table-left .two-column-table-body {
    color: #000000;
}

/* Right column body - blue */
.two-column-table-right .two-column-table-body {
    color: #02709E;
}

/* Two Column Table - Bullet Style */
.two-column-table-body--bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.two-column-table-body--bullets li {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 0;
    padding-left: 20px;
    position: relative;
}

.two-column-table-body--bullets li:last-child {
    margin-bottom: 0;
}

.two-column-table-body--bullets li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.two-column-table-left .two-column-table-body--bullets li {
    color: #000000;
}

.two-column-table-left .two-column-table-body--bullets li:before {
    color: #6E6E6E;
}

.two-column-table-right .two-column-table-body--bullets li {
    color: #02709E;
}

.two-column-table-right .two-column-table-body--bullets li:before {
    color: #00A6DD;
}

/* Two Column Table - Paragraph divs */
.two-column-table-body p {
    margin: 0 0 8px 0;
}

.two-column-table-body p:last-child {
    margin-bottom: 0;
}

/* Two Column Table Responsive - 1244px */
@media (max-width: 1244px) {
    .two-column-table-content-wrapper {
        padding: 50px 20px 100px 20px;
        /* Extra bottom padding for box-shadow */
    }

    .two-column-table-left,
    .two-column-table-right {
        padding: 30px;
        gap: 20px;
    }

    .two-column-table-image {
        max-width: 100px;
    }

    .two-column-table-header {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 12px;
    }

    .two-column-table-body {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Two Column Table Responsive - 768px (Mobile) */
@media (max-width: 768px) {
    .two-column-table-content-wrapper {
        padding: 40px 10px 80px 10px;
        /* Extra bottom padding for box-shadow */
    }

    /* Keep columns side-by-side, but stack image above text within each column */
    .two-column-table-left,
    .two-column-table-right {
        flex-direction: column;
        align-items: center;
        padding: 20px 15px;
        gap: 10px;
    }

    /* Image centered on mobile */
    .two-column-table-image {
        max-width: 60px;
        align-self: center;
    }

    /* Text remains left-aligned on mobile */
    .two-column-table-text {
        text-align: left;
        width: 100%;
    }

    .two-column-table-header {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 8px;
    }

    .two-column-table-body {
        font-size: 12px;
        line-height: 18px;
    }

    .two-column-table-body--bullets li {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 4px;
        padding-left: 15px;
    }
}

/* Two Column Table - Font Isolation (ignore parent background) */
/* Similar to slider-items, the card has its own fixed styling */

.two-column-table-left .two-column-table-header {
    color: #6E6E6E !important;
}

.two-column-table-right .two-column-table-header {
    color: #02709E !important;
}

.two-column-table-left .two-column-table-body,
.two-column-table-left .two-column-table-body p,
.two-column-table-left .two-column-table-body--bullets li {
    color: #000000 !important;
}

.two-column-table-right .two-column-table-body,
.two-column-table-right .two-column-table-body p,
.two-column-table-right .two-column-table-body--bullets li {
    color: #02709E !important;
}

.two-column-table-left .two-column-table-body--bullets li:before {
    color: #6E6E6E !important;
}

.two-column-table-right .two-column-table-body--bullets li:before {
    color: #00A6DD !important;
}

/* Module Header Section Styles */
.module-header-section {
    position: relative;
    padding-top: 40px;
}

/* Override content-container padding - wrapper handles its own */
.module-header-section .content-container {
    padding: 0;
}

.module-header-content-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* User Request: Desktop specific padding adjustments */
@media (min-width: 1025px) {
    .module-header-content-wrapper {
        padding-top: 60px !important;
        padding-bottom: 0px !important;
    }
}

.module-header-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Left column - Logo (1/3) */
.module-header-left {
    flex: 1 1 33.333%;
    max-width: 33.333%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.module-header-logo {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Right column - Text content (2/3) */
.module-header-right {
    flex: 1 1 66.666%;
    max-width: 66.666%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.module-header-page-name {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-ui-size);
    line-height: 24px;
    color: #006997;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.module-header-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h1-size);
    font-weight: 700;
    line-height: var(--font-h1-height);
    color: #006997;
    margin: 0;
    text-transform: none;
}

.module-header-body {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-body-size);
    font-weight: 400;
    line-height: 24px;
    color: #000000;
    margin: 0;
}

/* CTA button - matches cta-bar styling */
.module-header-cta {
    background: linear-gradient(0deg, #CC5E33 8.4%, #C23F11 84.52%);
    border: 1px solid #E65A1D;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    padding: 8px 24px;
}

/* Module Header Responsive - 1244px */
@media (max-width: 1244px) {
    .module-header-content-wrapper {
        padding: 50px 20px;
    }

    .module-header-layout {
        gap: 30px;
    }

    .module-header-heading {
        font-size: var(--font-h2-size);
        line-height: 42px;
    }

    .module-header-body {
        font-size: var(--font-body-size);
        line-height: 24px;
    }
}

/* Module Header Responsive - 768px (Mobile) */
@media (max-width: 768px) {

    /* Remove section padding - let wrapper handle it (30px) */
    .module-header-section {
        padding-top: 0;
    }

    .module-header-content-wrapper {
        padding: 30px 20px 40px;
        /* Top/bottom padding includes breathing room */
    }

    /* Explicitly force same padding for other page types using module header */
    .page-type-addon-page .module-header-content-wrapper,
    .page-type-news-article .module-header-content-wrapper,
    .page-type-blog .module-header-content-wrapper,
    .page-type-news-article-roll .module-header-content-wrapper {
        padding-top: 30px !important;
    }

    .module-header-layout {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    /* Hide the module header image/logo column on mobile as requested */
    .module-header-left {
        display: none;
    }

    .module-header-right {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        /* Ensure full width */
        align-items: center;
        text-align: center;
        gap: 15px;
        padding-left: 0;
        /* Remove desktop padding */
    }

    .module-header-heading {
        font-size: 32px;
        line-height: 38px;
    }

    .module-header-page-name {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .module-header-body {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Pillar Page Header - Logo aligned with heading text */
.pillar-page-header .module-header-layout {
    align-items: flex-start;
    /* Align to top, then adjust logo position */
}

.pillar-page-header .module-header-left {
    align-items: flex-start;
    padding-top: 10px;
    justify-content: flex-start;
    /* Force left alignment */
}

.pillar-page-header .module-header-logo {
    width: 100%;
    max-width: 100%;
    /* Force full width to fill column */
}

/* Pillar Page Header - Responsive at 1024px (when global header goes mobile) */
@media (max-width: 1024px) {
    .pillar-page-header .module-header-left {
        display: none;
        /* Hide logo column on tablet/mobile for pillar pages */
    }

    .pillar-page-header .module-header-right {
        flex: 0 0 100%;
        max-width: 100%;
        align-items: flex-start;
        text-align: left;
        /* Left-align content instead of center */
    }
}

/* =============================================================================
   About Us Header Section Styles

   ============================================================================= */

.aboutus-header-section {
    position: relative;
}

.aboutus-header-section .content-container {
    padding: 0;
}

.aboutus-header-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

.aboutus-header-heading {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 75px;
    line-height: 80px;
    color: #006997;
    margin: 0 0 24px 0;
}

.aboutus-header-body {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #000000;
    margin: 0 0 40px 0;
}

.aboutus-header-tagline {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 75px;
    line-height: 80px;
    text-align: center;
    color: #07B1E2;
    margin: 0;
}

/* About Us Header Responsive - 1024px */
@media (max-width: 1024px) {
    .aboutus-header-wrapper {
        padding: 50px 30px;
    }

    .aboutus-header-heading {
        font-size: 50px;
        line-height: 56px;
    }

    .aboutus-header-body {
        font-size: 20px;
        line-height: 28px;
    }

    .aboutus-header-tagline {
        font-size: 50px;
        line-height: 56px;
    }
}

/* About Us Header Responsive - 768px (Tablet) */
@media (max-width: 768px) {
    .aboutus-header-wrapper {
        padding: 40px 20px;
    }

    .aboutus-header-heading {
        font-size: 36px;
        line-height: 42px;
        margin-bottom: 20px;
    }

    .aboutus-header-body {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 30px;
    }

    .aboutus-header-tagline {
        font-size: 36px;
        line-height: 42px;
    }
}

/* About Us Header Responsive - 480px (Mobile) */
@media (max-width: 480px) {
    .aboutus-header-wrapper {
        padding: 30px 20px;
        /* Standardized Mobile Padding */
    }

    .aboutus-header-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .aboutus-header-body {
        font-size: 16px;
        line-height: 24px;
    }

    .aboutus-header-tagline {
        font-size: 28px;
        line-height: 34px;
    }
}

/* =============================================================================
   Three Column Section Styles
   ============================================================================= */

.three-column-section {
    position: relative;
    z-index: 20;
}

.three-column-section .content-container {
    padding: 0;
}

.three-column-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 40px;
    box-sizing: border-box;
}

.three-column-header {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h3-size);
    font-weight: 500;
    line-height: 30px;
    color: #006997;
    margin: 0 0 24px 0;
}

.three-column-grid {
    display: flex;
    justify-content: space-between;
    gap: 0;
    align-items: flex-start;
    /* Ensure items start at same horizontal line */
}

.three-column-item {
    flex: 1;
    padding: 0 50px;
}

.three-column-item:first-child {
    padding-left: 0;
}

.three-column-item:last-of-type {
    padding-right: 0;
}

/* Vertical dotted divider between columns */
.three-column-divider {
    width: 0;
    align-self: stretch;
    border-left: 1px dashed #FFFFFF;
    flex-shrink: 0;
}

.three-column-item-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #006997;
    margin: 0 0 8px 0;
}

.three-column-item-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #006997;
    margin: 0 0 16px 0;
}

.three-column-item-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #4A5568;
    margin: 0;
}

/* =============================================================================
   Three Column - Vision Variant (text only, light background)
   ============================================================================= */



.three-column--vision .three-column-item-body {
    font-size: 15px;
    line-height: 1.7;
}

/* =============================================================================
   Three Column - Team Variant (with images)
   ============================================================================= */

.three-column--team .three-column-header {
    font-style: normal;
    /* Not italic for team header */
}

.three-column--team .three-column-divider {
    display: block;
    /* Show dividers for team variant */
}

.three-column--team .three-column-item {
    padding: 0 50px;
}

.three-column--team .three-column-item:first-child {
    padding-left: 0;
}

.three-column--team .three-column-item:last-of-type {
    padding-right: 0;
}

.three-column-image-wrapper {
    margin-bottom: 0px;
    /* Reduced to almost nothing per user request */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    height: 100px;
}

.three-column-image-wrapper img,
.three-column-item .three-column-image-wrapper img,
.three-column-image,
.three-column-item img {
    max-width: 178px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    margin: 0 !important;
    display: block !important;
}

.three-column--team .three-column-item-header {
    font-size: 24px;
    margin-bottom: 4px;
}

.three-column--team .three-column-item-body {
    font-size: 13px;
    line-height: 1.6;
}

/* =============================================================================
   Three Column Responsive - 1024px
   ============================================================================= */

@media (max-width: 1024px) {
    .three-column-wrapper {
        padding: 50px 30px;
    }

    .three-column-header {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .three-column-item {
        padding: 0 20px;
    }

    .three-column-item-header {
        font-size: 18px;
    }
}

/* =============================================================================
   Three Column Responsive - 768px (Tablet - stack to single column)
   ============================================================================= */

@media (max-width: 768px) {
    .three-column-wrapper {
        padding: 40px 20px;
    }

    .three-column-header {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .three-column-grid {
        flex-direction: column;
        gap: 50px;
    }

    .three-column-item {
        padding: 0;
        padding-bottom: 30px;
        border-bottom: 1px dashed #006997;
    }

    .three-column-item:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Hide vertical dividers on mobile */
    .three-column-divider,
    .three-column--team .three-column-divider {
        display: none;
    }

    /* Team variant on mobile */
    .three-column--team .three-column-item {
        border-bottom: none;
        padding: 0;
    }

    .three-column--team .three-column-grid {
        gap: 60px;
    }

    .three-column-image {
        max-width: 300px;
        height: auto;
        margin: 0 auto;
    }

    .three-column-image-wrapper {
        height: auto;
        margin-bottom: 15px;
    }

    .three-column--team .three-column-item-header {
        text-align: left;
    }

    .three-column--team .three-column-item-subtitle {
        text-align: left;
    }
}

/* =============================================================================
   Three Column Responsive - 480px (Mobile)
   ============================================================================= */

@media (max-width: 480px) {
    .three-column-wrapper {
        padding: 30px 20px;
    }

    .three-column-header {
        font-size: 20px;
    }

    .three-column-item-body {
        font-size: 14px;
    }
}

/* =============================================================================
   Single Image Paragraph Section Styles
   Similar to single-image-text but simpler (no bullets, dividers, sub-headers)
   ============================================================================= */

.single-image-paragraph-section {
    position: relative;
    z-index: 20;
}

.single-image-paragraph-section .content-container {
    padding: 0;
}

.single-image-paragraph-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

.single-image-paragraph-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.single-image-paragraph-left {
    flex: 1;
    min-width: 0;
}

.single-image-paragraph-right {
    flex: 0 0 auto;
    width: 40%;
    max-width: 400px;
}

.single-image-paragraph-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    color: #006997;
    margin: 0 0 30px 0;
    text-align: left;
    width: 100%;
}

.single-image-paragraph-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #4A5568;
    margin: 0 0 20px 0;
}

.single-image-paragraph-content p:last-child {
    margin-bottom: 0;
}

.single-image-paragraph-image {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Single Image Paragraph Responsive - 1024px
   ============================================================================= */

@media (max-width: 1024px) {
    .single-image-paragraph-wrapper {
        padding: 50px 30px;
    }

    .single-image-paragraph-layout {
        gap: 40px;
    }

    .single-image-paragraph-header {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .single-image-paragraph-right {
        width: 35%;
    }
}

/* =============================================================================
   Single Image Paragraph Responsive - 768px (Tablet - stack)
   ============================================================================= */

@media (max-width: 768px) {
    .single-image-paragraph-wrapper {
        padding: 40px 20px;
    }

    .single-image-paragraph-layout {
        flex-direction: column;
        gap: 30px;
    }

    .single-image-paragraph-left {
        order: 1;
    }

    .single-image-paragraph-right {
        order: 2;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .single-image-paragraph-header {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .single-image-paragraph-content p {
        font-size: 14px;
    }
}

/* =============================================================================
   Single Image Paragraph Responsive - 480px (Mobile)
   ============================================================================= */

@media (max-width: 480px) {
    .single-image-paragraph-wrapper {
        padding: 30px 20px;
    }

    .single-image-paragraph-header {
        font-size: 24px;
    }

    .single-image-paragraph-content p {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

/* =============================================================================
   smrt-E Single Image Text Section
   Interactive section with hoverable items that change the displayed image
   ============================================================================= */

.smrte-sit-section {
    position: relative;
    z-index: 20;
    background-color: #F8FAFB;
}

.smrte-sit-section .content-container {
    padding: 0;
}

.smrte-sit-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 60px 40px;
    box-sizing: border-box;
}

.smrte-sit-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    color: #006997;
    margin: 0 0 40px 0;
    text-align: left;
    width: 100%;
}

.smrte-sit-layout {
    display: flex;
    /* Stretch both sides to same height so images don't push content down */
    align-items: stretch;
    gap: 60px;
}

.smrte-sit-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.smrte-sit-right {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    /* Constrain to match left side height */
    overflow: hidden;
}

/* Items container */
.smrte-sit-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual item - white box with hover shadow */
.smrte-sit-item {
    padding: 16px 20px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    /* For pseudo-element positioning */
    overflow: hidden;
    /* Ensure bar stays within rounded corners */
}

/* Active Indicator Bar (Replaces border-left for better control) */
.smrte-sit-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: transparent;
    transition: background-color 0.25s ease;
    z-index: 1;
}

.smrte-sit-item:hover,
.smrte-sit-item.is-active {
    background: linear-gradient(176.43deg, rgba(255, 255, 255, 0) 85.39%, rgba(2, 112, 158, 0.1) 103.46%), #FFFFFF;
    box-shadow:
        0px 9px 21px rgba(0, 61, 87, 0.09),
        0px 38px 38px rgba(0, 61, 87, 0.08),
        0px 85px 51px rgba(0, 61, 87, 0.04);
}

.smrte-sit-item:hover::before,
.smrte-sit-item.is-active::before {
    background-color: #07B1E2;
}

.smrte-sit-item-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #07B1E2;
    margin: 0 0 6px 0;
}

.smrte-sit-item-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #4A5568;
    margin: 0;
}

/* Stack section (Works with your stack) */
.smrte-sit-stack {
    margin-top: 30px;
    padding: 0 20px;
}

.smrte-sit-stack-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #07B1E2;
    margin: 0 0 6px 0;
}

.smrte-sit-stack-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #4A5568;
    margin: 0;
}

/* CTA button */
.smrte-sit-cta {
    margin-top: 30px;
    padding: 0 20px;
}

/* Image display area */
.smrte-sit-images {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    /* Matches single-image-text-images reference */
}

/* Ensure links wrapping images are also absolute so they don't break layout */
.smrte-sit-images a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.smrte-sit-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.smrte-sit-image.is-active {
    opacity: 1;
    visibility: visible;
    position: absolute;
    /* Force absolute */
    z-index: 2;
    /* Ensure active image is on top */
}

/* =============================================================================
   smrt-E SIT Responsive - 1024px
   ============================================================================= */

@media (max-width: 1024px) {
    .smrte-sit-wrapper {
        padding: 50px 30px;
    }

    .smrte-sit-header {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .smrte-sit-layout {
        gap: 40px;
    }

    .smrte-sit-right {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* =============================================================================
   smrt-E SIT Responsive - 768px (Tablet - stack)
   ============================================================================= */

@media (max-width: 768px) {
    .smrte-sit-wrapper {
        padding: 40px 20px;
    }

    .smrte-sit-header {
        font-size: 26px;
    }

    .smrte-sit-layout {
        flex-direction: column;
        gap: 20px;
    }

    .smrte-sit-left {
        order: 1;
    }

    .smrte-sit-right {
        order: 2;
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .smrte-sit-images {
        min-height: auto;
    }

    .smrte-sit-image {
        position: relative;
        display: none;
    }

    .smrte-sit-image.is-active {
        display: block;
        max-width: 85%;
        margin: 0 auto;
    }
}

/* =============================================================================
   smrt-E SIT Responsive - 480px (Mobile)
   ============================================================================= */

@media (max-width: 480px) {
    .smrte-sit-wrapper {
        padding: 30px 20px;
    }

    .smrte-sit-header {
        font-size: 22px;
    }

    .smrte-sit-item {
        padding: 12px 15px;
    }

    .smrte-sit-item-header {
        font-size: 15px;
    }

    .smrte-sit-item-body {
        font-size: 13px;
    }
}

/* =============================================================================
   Homepage Header Section Styles
   ============================================================================= */

.homepage-header-section {
    position: relative;
}

.homepage-header-section .content-container {
    padding: 0;
}

.homepage-header-background {
    width: 100%;
    height: 100%;
    /*    background-color: #006997;*/
}

.homepage-header-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 40px 40px 0;
    box-sizing: border-box;
}

.homepage-header-content {
    flex: 1 1 0;
    max-width: 700px;
    /* Standardize with product pages */
}

.homepage-header-heading {
    max-width: 100%;
}

.homepage-header-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-h1-size);
    font-weight: 700;
    line-height: var(--font-h1-height);
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-transform: none;
}

.homepage-header-subheading {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-lead-size);
    font-weight: 500;
    line-height: var(--font-lead-height);
    color: #FFFFFF;
    margin: 0 0 24px 0;
}

.homepage-header-body {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-body-size);
    font-weight: 400;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0 0 32px 0;
}

/* CTA Button - matches module-header styling */
.homepage-header-cta {
    display: inline-block;
    margin-top: 30px;
    background: linear-gradient(0deg, #CC5E33 8.4%, #C23F11 84.52%);
    border: 1px solid #E65A1D;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    padding: 14px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
}

/* Tiles container */
.homepage-header-tiles {
    position: relative;
    flex: 0 0 450px;
    width: 450px;
    max-width: 450px;
    /* Explicit width matching .header-image */
    min-height: 450px;
}

/* Homepage Header Responsive - 1244px */
@media (max-width: 1244px) {
    .homepage-header-wrapper {
        padding: 50px 40px 60px;
        /* Standard: 40px padding */
        gap: 40px;
    }

    .homepage-header-heading {
        font-size: var(--font-h2-size);
        line-height: 42px;
    }

    .homepage-header-subheading {
        font-size: var(--font-lead-size);
        line-height: var(--font-lead-height);
    }

    .homepage-header-body {
        font-size: var(--font-body-size);
        line-height: 24px;
    }
}

/* Homepage Header Responsive - 1080px (Hide tiles) */
@media (max-width: 1080px) {
    .homepage-header-tiles {
        display: none;
    }

    .homepage-header-content {
        flex: 1;
        max-width: 100%;
    }

    .homepage-header-wrapper {
        justify-content: center;
    }
}

/* Homepage Header Responsive - 768px */
@media (max-width: 768px) {
    .homepage-header-wrapper {
        padding: 40px 20px 50px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .homepage-header-heading {
        font-size: 40px;
        line-height: 46px;
    }

    .homepage-header-subheading {
        font-size: 22px;
        line-height: 28px;
    }

    .homepage-header-body {
        font-size: 18px;
        line-height: 28px;
    }

    .homepage-header-cta {
        font-size: 16px;
        padding: 12px 30px;
    }
}

/* =============================================================================
   SMRT-E Header Section Styles
   ============================================================================= */

.smrte-header-section {
    position: relative;
}

.smrte-header-section .content-container {
    padding: 0;
}

.smrte-header-background {
    width: 100%;
    height: 100%;
    /* Gradient removed - moved to bottom box */
}

.smrte-header-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 40px;
    /* Standardized to 40px */
    box-sizing: border-box;
}

/* SMRT-E Header Responsive - 1244px (Removed to keep 40px padding) */
/* @media (max-width: 1244px) {
    .smrte-header-wrapper {
        padding: 60px 20px;
    }
} */


.smrte-header-layout {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

/* Left column - Logo, Heading, Text */
.smrte-header-left {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.smrte-header-logo {
    max-width: 370px;
    height: auto;
    display: block;
}

.smrte-header-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    color: #00B2E3;
    margin: 0;
    text-transform: none;
}

.smrte-header-text-1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    margin: 0;
}

.smrte-header-text-2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 54px;
    color: #006997;
    margin: 0;
}

/* Right column - Image */
.smrte-header-right {
    flex: 1 1 45%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.smrte-header-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

/* SMRT-E Header Responsive - 1024px */
@media (max-width: 1024px) {
    .smrte-header-wrapper {
        padding: 60px 40px;
        /* Standard: 40px padding */
    }

    .smrte-header-layout {
        gap: 40px;
    }

    /* .smrte-header-heading override removed - Max 32px */

    .smrte-header-text-1 {
        font-size: 16px;
        line-height: 24px;
    }
}

/* SMRT-E Header Responsive - 768px */
@media (max-width: 768px) {
    .smrte-header-wrapper {
        padding: 50px 20px;
    }

    .smrte-header-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .smrte-header-left {
        align-items: center;
        text-align: center;
    }

    .smrte-header-logo {
        max-width: 280px;
    }

    /* .smrte-header-heading override removed - Max 32px */

    .smrte-header-text-1 {
        font-size: 22px;
        line-height: 34px;
    }

    .smrte-header-text-2 {
        font-size: 22px;
        line-height: 34px;
    }

    .smrte-header-right {
        justify-content: center;
    }
}

/* =============================================================================
   Single Image Section Styles
   ============================================================================= */

.single-image-section {
    position: relative;
    z-index: 10;
}

.single-image-section .content-container {
    padding: 0;
}

.single-image-wrapper {
    padding: 60px 40px;
    text-align: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

.single-image-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    color: #006997;
    margin: 0 0 30px 0;
    text-transform: none;
    text-align: left;
    width: 100%;
}

.single-image-container {
    margin: 0 auto;
    max-width: 100%;
}

.single-image-main {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.single-image-bottom-content {
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.single-image-bottom-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 42px;
    color: #006997;
    margin: 0 0 20px 0;
    text-align: center;
}

.single-image-bottom-subtext {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 48px;
    color: #006997;
    margin: 0;
    text-align: center;
}

/* Single Image Responsive - 768px */
@media (max-width: 768px) {
    .single-image-wrapper {
        padding: 40px 20px;
    }

    .single-image-header {
        font-size: 22px;
        line-height: 32px;
        text-align: center;
    }

    .single-image-bottom-text,
    .single-image-bottom-subtext {
        font-size: 22px;
        line-height: 32px;
    }
}

/* =============================================================================
   Slider Section Styles
   ============================================================================= */

/* Slider Section Styles - Moved to components/slider/slider.css */

/* =============================================================================
   SMRT-E Single Image Text Section Styles
   ============================================================================= */

.smrte-sit-section {
    position: relative;
    z-index: 10;
}

/* Override content-container padding - wrapper handles its own */
.smrte-sit-section .content-container {
    padding: 0;
}




/* =============================================================================
   SMRT-E Bottom Box Section Styles
   ============================================================================= */

.smrte-bottom-box-section {
    position: relative;
    z-index: 5;
    /* Below content (20), above normal backgrounds (0-1) */
    margin-top: -150px;
    /* Overlap section above */
    padding-top: 50px;
    /* Compensation */
}

.smrte-bottom-box-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(180deg, #FFFFFF 0%, #C0F2FF 100%);
    /* White to Blue */
}

.smrte-bottom-box-section .content-container {
    padding-top: 0;
}

.smrte-bottom-box-wrapper {
    padding: 20px 50px 80px 50px;
    text-align: center;
}

.smrte-bottom-box-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #006997;
    text-align: center;
    max-width: 1220px;
    margin: 0 auto 40px auto;
    font-style: normal;
}

.smrte-bottom-box-content {
    max-width: 800px;
    margin: 0 auto;
}

.smrte-bottom-box-callout {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    color: #ED2E70;
    text-align: center;
    margin: 0 0 30px 0;
    font-style: normal;
}

.smrte-bottom-box-cta {
    display: flex;
    justify-content: center;
}

/* Pink CTA button variant — color only, inherits all else from .cta-button */
.cta-button--pink {
    background: linear-gradient(0deg, #9D1951 0%, #EE3F84 64.42%);
    border-color: #EE3F84;
}

.cta-button--pink:hover {
    background: linear-gradient(0deg, #8a1446 0%, #d93775 64.42%);
}

/* SMRT-E Bottom Box Responsive - 768px */
@media (max-width: 768px) {
    .smrte-bottom-box-wrapper {
        padding: 50px 20px;
    }

    .smrte-bottom-box-header {
        font-size: 36px;
        line-height: 44px;
    }

    .smrte-bottom-box-title {
        font-size: 22px;
        line-height: 32px;
    }


}

/* =============================================================================
   Bottom Box Alternate Background Modifier
   ============================================================================= */

/* Alternate dark blue background for homepage final section */
.bottom-box-section--alternate .bottom-box-background {
    background-color: #003D52;
}

/* Gradient variant */
.bottom-box-section--gradient .bottom-box-background {
    background: linear-gradient(180deg, #006997 0%, #004664 100%);
}

/* =============================================================================
   Image Glow Effect
   ============================================================================= */

.image-glow {
    position: absolute;
    width: 480px;
    height: 480px;
    background: rgba(57, 212, 255, 0.5);
    filter: blur(125px);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

/* Orange Background Variant - White Glow */
.bg-opt-orange .image-glow,
.bg-opt-orange-angle .image-glow {
    background: rgba(255, 255, 255, 0.4);
}

/* 
 * Utility classes to neutralize link styling for repeater item wrappers.
 * Prevents global anchor styles (color, text-transform) from bleeding into card content.
 */
.feature-grid-item-link-wrapper,
.three-column-item-link-wrapper,
.smrte-sit-item-link-wrapper,
.slider-card-link-wrapper {
    text-decoration: none !important;
    color: inherit !important;
    text-transform: none !important;
    display: block;
    cursor: pointer;
}

.feature-grid-item-link-wrapper:hover,
.three-column-item-link-wrapper:hover,
.smrte-sit-item-link-wrapper:hover,
.slider-card-link-wrapper:hover,
.feature-grid-item-link-wrapper:visited,
.three-column-item-link-wrapper:visited,
.smrte-sit-item-link-wrapper:visited,
.slider-card-link-wrapper:visited,
.feature-grid-item-link-wrapper:active,
.three-column-item-link-wrapper:active,
.smrte-sit-item-link-wrapper:active,
.slider-card-link-wrapper:active {
    text-decoration: none !important;
    color: inherit !important;
    opacity: 1 !important;
    /* Prevent opacity change if any */
}

/* Ensure all child elements inherit color correctly and don't pick up link blue */
.feature-grid-item-link-wrapper *,
.three-column-item-link-wrapper *,
.smrte-sit-item-link-wrapper *,
.slider-card-link-wrapper * {
    color: inherit;
}

/* ============================================
   Module Header Styles (Shared)
   Used by: Module, Pillar, Addon Pages
   ============================================ */

.module-header-section {
    position: relative;
    /* Ensure z-index works for stacking */
    z-index: 20;
}



/* Product Hero Logo (Mobile Only) */
.mobile-hero-logo {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-hero-logo {
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        /* Full width to allow centering */
        order: -1;
        padding-left: 0 !important;
        /* Force to top */
    }

    .mobile-hero-logo img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 80px;
        /* Reasonable max height */
        object-fit: contain;
    }

    /* Ensure Product Page Hero Text is centered on mobile */
    .product-header-section .header-text {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

}

/* Global Fix for Slider Overlap Robustness */
/* 
   Ensures that ANY section following a slider sits ON TOP of it.
   This is critical for the "Opposite Direction" angle fix (negative margin overlap)
   to work regardless of what section comes next (Comparison Table, Grid, etc.).
   
   Updated to use '~' (general sibling) instead of '+' (adjacent) to skip over
   potential non-visual elements (scripts, comments, etc.) that break adjacency.
*/
.slider-section~.section-container {
    position: relative !important;
    z-index: 20 !important;
    margin-top: -1px;
    /* Slight pull-up ensures sub-pixel gap closure */
}

/* =============================================================================
   ISOMETRIC GRID BACKGROUND (Restored)
   ============================================================================= */
.isometric-grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 
       Height: 100% matches wrapper. Use pixel-mask to control failure point.
    */
    height: 100%;
    background-image: url('/images/isometric-repeating-grid.svg');
    background-repeat: repeat;
    background-position: top center;
    opacity: 0.08;
    pointer-events: none;
    z-index: 6;
    /* Layer: Above Opaque BG (0) and Pseudo BG (5), Below Content (50) */
    /* Mask: Fade out from 400px to 900px. repeat fixes "abrupt stop" by tiling vertically. */
    mask-image: linear-gradient(to bottom, black 0px, black 400px, transparent 900px) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0px, black 400px, transparent 900px) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

/* Fix bg-opt-blue stacking specifically for homepage 3-column section to allow global grid visibility */
.page-type-home-page .three-column-section.bg-opt-blue::after {
    z-index: 2 !important;
}

/* Force Header Content above Grid */
/* Includes Global Header (.header-content) and Three Column Section */
.header-content,
.product-header-content-wrapper,
.homepage-header-wrapper,
.three-column-wrapper {
    position: relative;
    z-index: 50 !important;
}

/* White Grid for Blue Headers (Home, Product, Module, Connect) */
.page-type-module-page .isometric-grid-background,
.page-type-product-page .isometric-grid-background,
.page-type-home-page .isometric-grid-background,
.page-type-connect-page .isometric-grid-background {
    filter: saturate(0) brightness(10);
}

/* Home Page: Extend grid visibility to cover header + three-column section */


/* =============================================================================
   Comparison Table Mobile Fixes
   ============================================================================= */

@media (max-width: 768px) {

    /* Stack header and button on mobile to prevent overlap */
    .comparison-table-top {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        position: relative;
        justify-content: center !important;
        /* Override inline styles */
        margin-bottom: 30px;
        height: auto;
    }

    .comparison-table-top-header {
        position: relative;
        /* Reset positioning */
        width: 100%;
        text-align: center;
        margin: 0;
        max-width: 100%;
        left: auto;
        top: auto;
        right: auto;
        transform: none;
    }

    .comparison-table-top .cta-button {
        position: relative;
        margin: 0;
    }
}

/* =============================================================================
   Page-Specific Overrides
   Consolidated from separate files (about-us-page.css, plain.css)
   ============================================================================= */

/* About Us Page */
.page-type-about-us-page .three-column-header {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 61px;
    color: #027AA8;
}

.page-type-about-us-page .three-column-divider {
    border-left-color: #006997;
}

/* About Us: Feature grid uses regular body copy instead of bullet points */
.page-type-about-us-page .feature-grid-item-body li {
    padding-left: 0;
    display: block;
}

.page-type-about-us-page .feature-grid-item-body li:before {
    content: none;
}

@media (max-width: 768px) {
    .page-type-about-us-page .three-column-item {
        border-bottom-color: #006997;
    }
}

/* Plain Page (Terms, Privacy) */
.page-type-plain .all-content-container {
    padding-top: 180px;
}

@media (max-width: 1244px) {

    .page-type-plain .all-content-container,
    .page-type-plain .content-container {
        margin: 5px;
    }

    .page-type-plain .policy-image {
        width: 300px;
        height: auto;
    }
}

/* =============================================================================
   Desktop Tightening Overrides
   Consolidated from desktop-tightening.css (Loaded last to override)
   ============================================================================= */
@media (min-width: 1025px) {

    /* Section Padding: 60px top/bottom on desktop */
    .feature-grid-content-wrapper,
    .single-image-text-content-wrapper,
    .comparison-table-content-wrapper,
    .module-header-content-wrapper,
    .three-column-wrapper,
    .aboutus-header-wrapper,
    .single-image-paragraph-wrapper,
    .smrte-sit-wrapper,
    .homepage-header-wrapper,
    .single-image-wrapper,
    .bottom-box-content-wrapper,
    .intro-flexible-wrapper,
    .team-repeater-wrapper {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .reviews-left {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .two-column-table-content-wrapper {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    /* Homepage hero: tighter top, no bottom — flows flush into three-column below */
    .homepage-header-wrapper {
        padding-top: 30px;
        padding-bottom: 0;
    }

    /* SMRT-E header flows flush into SMRT-E content below — same pattern as homepage hero */
    .smrte-header-wrapper {
        padding-top: 60px;
        padding-bottom: 0;
    }

    .smrte-sit-wrapper {
        padding-top: 0;
    }

    /* H-Tag overrides removed — all heading sizes now controlled via
       scoped component class rules using typography.css tokens. */

    /* Feature Grid Headers */
    .feature-grid-section-header h2 {
        font-size: var(--font-h2-size);
        line-height: 39px;
    }

    .feature-grid-item-header {
        font-size: 22px;
        line-height: 28px;
    }

    .feature-grid-item-subheader {
        font-size: var(--font-lead-size);
        line-height: 26px;
    }


    /* Single Image Text Headers */
    /* .single-image-text-header {
        font-size: 40px;
        line-height: 49px;
    } */

    /* .single-image-text-item-header {
        font-size: 26px;
        line-height: 34px;
    } */

    /* Module/Page Headers — sizes controlled by token-based base rules */
    .module-header-heading,
    .homepage-header-heading,
    .aboutus-header-heading,
    .aboutus-header-tagline {
        font-size: var(--font-h1-size);
        line-height: var(--font-h1-height);
    }

    /* Comparison Table Headers */
    .comparison-table-top-header,
    .comparison-table-below-heading h3 {
        font-size: 48px;
        line-height: 58px;
    }

    /* SMRT-E Header capped at 32px */
    .smrte-header-heading {
        font-size: 32px;
        line-height: 100%;
    }

    /* Three Column Headers */
    .three-column-header {
        font-size: var(--font-h3-size);
        font-weight: 500;
        line-height: 30px;
    }

    .three-column-item-header {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%;
        color: #FFFFFF;
    }

    .three-column-item-body {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0%;
        color: #FFFFFF;
    }

    .three-column-image {
        max-width: 280px;
        /* Reduced from likely full width */
        width: 100%;
        height: auto;
    }

    /* Single Image Paragraph Headers */
    .single-image-paragraph-header {
        font-size: 32px;
        line-height: 38px;
    }

    /* SMRT-E Headers */
    .smrte-sit-header {
        font-size: 29px;
        line-height: 35px;
    }

    .smrte-header-text-1 {
        font-size: 14px;
        line-height: 22px;
    }

    .smrte-header-text-2 {
        font-size: 27px;
        line-height: 42px;
    }

    /* About Us body text kept slightly larger for readability in that layout */
    .aboutus-header-body {
        font-size: var(--font-small-size);
        line-height: 26px;
    }

    /* Feature Grid - more gap, smaller images */
    .feature-grid {
        gap: 60px 60px;
    }

    /* 2x2 Feature Grid - override above to use tighter layout */
    .feature-grid--2x2 {
        grid-template-columns: max-content max-content;
        gap: 60px 250px;
    }

    .feature-grid-item-image img {
        max-height: 200px;
    }

    .feature-grid--2x2 .feature-grid-item-image img {
        max-height: 200px;
    }

    /* Single Image Text - slightly smaller image area */
    .single-image-text-section.image-contained .single-image-text-right,
    .single-image-text-section.image-breakout .single-image-text-right {
        max-width: 45%;
    }

    /* Module Header - smaller left logo */
    .module-header-left {
        max-width: 25%;
    }

    .module-header-logo {
        max-width: 80%;
    }

    /* Feature Grid Alignment (Images same height) */
    .feature-grid-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .feature-grid-item-image {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .feature-grid-item-image img {
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .feature-grid-item-copy {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}