@charset "UTF-8";
/* CSS Document */
/* ─── Root Variables ─────────────────────────────── */
:root {
    --lf-orange:     #FF4F17;
    --lf-orange-dk:  #C04812;
    --lf-black:      #000000;
    --lf-dark:       #0E0A1E;
    --lf-footer-bg:  #650030;
    --lf-light-blue: #E1EFFF;
    --lf-gray-box:   #EDEDEE;
    --lf-text:       #000000;
}

.accordion {
    /*body text color*/
    --bs-accordion-color: #000000;
    /*background color*/
    --bs-accordion-bg: #FFFFFF;

    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    /*button OPEN bottom border color*/
    --bs-accordion-border-color: #FFFFFF;
    /*button OPEN bottom border width*/
    --bs-accordion-border-width: 0px;

    --bs-accordion-border-radius: var(--bs-border-radius);

    /*button OPEN border radius*/
    --bs-accordion-inner-border-radius: 0px;

    /*button text and icon X dimension padding*/ 
    --bs-accordion-btn-padding-x: 1.25rem;

    /*button text and icon Y dimension padding*/ 
    /*--bs-accordion-btn-padding-y: 1rem;*/

    --bs-accordion-btn-color: var(--bs-body-color);

    /*button OFF background color*/ 
    --bs-accordion-btn-bg: var(--bs-accordion-bg);

    /*button icon - OPEN PLUS*/
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23650300' stroke-width='4' stroke-linecap='square'%3e%3cline x1='8' y1='3' x2='8' y2='13'/%3e%3cline x1='3' y1='8' x2='13' y2='8'/%3e%3c/svg%3e");

    /*button icon - CLOSE MINUS*/
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23650300' stroke-width='4' stroke-linecap='square'%3e%3cline x1='3' y1='8' x2='13' y2='8'/%3e%3c/svg%3e");

    /*button icon size*/
    --bs-accordion-btn-icon-width: 1.4rem;

    /*button icon - animation*/
    --bs-accordion-btn-icon-transform: rotate(-180deg);

    /*button icon animation - speed and ease*/
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;

    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;

    /*button OPEN text color*/
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);

    /*button OPEN bacground color*/
    --bs-accordion-active-bg: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── HTML Behavior ─────────────────────────────── */

html { scroll-behavior: smooth; }

/* ─── Body ─────────────────────────────── */

body {
    font-family: 'Roboto', sans-serif;
    color: var(--lf-text);
    overflow-x: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; /* Ensures video covers area without stretching */
}

.vjs-title-bar { 
    display: none; 
}

.bc-player-default_default .vjs-big-play-button {
    background-color: #ff4f17;
}

.bc-player-default_default:hover .vjs-big-play-button {
    background-color: #cb3420;
}

/* Ensure the video container has a height */
.container-fluid {
    min-height: 35vh;
}

.top-spacer {
    height: 10rem;
    pointer-events: auto;
}

.footer img {
    position: absolute;
    bottom: 0;
    left: 0; /* Align to bottom-left */
}

.footer-color {
    background-color: #640931;
}

.intro-box-desktop {
    background-color: white;
    -webkit-box-shadow:0px 3px 10px 0px rgba(0,0,0,0.2);
    box-shadow:0px 3px 10px 0px rgba(0,0,0,0.2);
    display: block;
}

.intro-box-mobile {
    display: none;
}

#banner-vid {
    pointer-events: auto;
}

h1.home {
    font-family: 'Merriweather';
    color: #FFFFFF;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.6;
}

h1 {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}

h1.subpages {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 2.7rem;
    line-height: 1.45;
    padding-bottom: 15px;
}


h1.casestudy {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.45;
    padding-bottom: 15px;
}

h1.black {
    font-family: 'Merriweather';
    color: #000000;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
}

h2 {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 3.2rem;
    padding-bottom: 15px;
}

h2.smaller {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 2.5rem;
}

h2.roboto-black {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 3.2rem;
    text-align: center;
}

h3 {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 1.3rem;
}

h3.garnet {
    font-family: 'Roboto', sans-serif;
    color: #650030;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

h3.black {
    color: #000000;
}

h4 {
    font-family: 'Merriweather';
    color: #650030;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 2em;
}

h5 {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.8em;
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
}

p.important-head {
    font-family: 'Roboto', sans-serif;
    color: #650030;
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

p.quote {
    font-family: 'Merriweather';
    color: #650300;
    font-weight: 400;
    font-size: 1.45rem;
    text-align: center;
}

p.quotee {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
}

p.eyebrow {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 1.8rem;
}

p.eyebrowcase {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 1.6rem;
}

li.bullets {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.8rem;
    margin-left: -15px;
}

li.bullets-special {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    margin-left: -15px;
}

.important-head {
    font-family: 'Roboto', sans-serif;
    color: #650030;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 50px;
}

.bold {
    font-weight: 500;
}

.sup-merriweather {
    font-weight: 700;
    font-size: 1rem;
    vertical-align: super;
}

.sup-merriweather-subheads {
    font-weight: 700;
    font-size: .8rem;
    vertical-align: super;
}

.sup-merriweather-subheads2 {
    font-weight: 700;
    font-size: .6rem;
    vertical-align: 8px;
}

.footer-path {
    width: 100%;
    margin-top: -3rem;
}

.navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler:active {
    background-color: #ededee;
}

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

#teconsent a {
    font-family: 'Roboto Condensed', sans-serif;
	font-size: 1rem;
	font-weight: 300;
    color: #FFFFFF;
    text-decoration: underline;
}

#teconsent:hover a {
    color: #EDEDEE;
}
      
      
/* Only hides the backdrop when YOUR specific modal triggered it */
body.study-modal-open .modal-backdrop {
    display: none !important;
}

/* Your custom backdrop, scoped to the same body class */
body.study-modal-open #CaseStudyModal::before, #CaseStudyModal-ADP::before, #CaseStudyModal-EmployeeNavigator::before, #CaseStudyModal-Workday::before, #CaseStudyModal-PlanSource::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../images/Case_Study_Background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
}

/* Modal Desktop Layout Display */

#Enrollment-Desktop {
    display: flex;
}

#Enrollment-Mobile {
    display: none;
}

#EOI-Desktop {
    display: flex;
}

#EOI-Mobile {
    display: none;
}

#TabList-Desktop {
    display: block;
}

#TabList-Tablet {
    display: none;
}

#TabList-Mobile {
    display: none;
}

#EOI-Tab-Desktop {
    display: flex;
}

#EOI-Tab-Mobile {
    display: none;
}

#AbsenceSolutions-Tab-Desktop {
    display: flex;
}

#AbsenceSolutions-Tab-Mobile {
    display: none;
}

#WorkerData-Tab-Desktop {
    display: flex;
}

#WorkerData-Tab-Mobile {
    display: none;
}

#WorkerCommunication-Tab-Desktop {
    display: flex;
}

#WorkerCommunication-Tab-Mobile {
    display: none;
}

#PlanDesign-Tab-Desktop {
    display: flex;
}

#PlanDesign-Tab-Mobile {
    display: none;
}

#Quoting-Tab-Desktop {
    display: flex;
}

#Quoting-Tab-Mobile {
    display: none;
}

#Enrollment-Tab-Desktop {
    display: flex;
}

#Enrollment-Tab-Mobile {
    display: none;
}

#Payroll360-Tab-Desktop {
    display: flex;
}

#Payroll360-Tab-Mobile {
    display: none;
}

#PlanDesign-Desktop {
    display: flex;
}

#PlanDesign-Mobile {
    display: none;
}

#Quoting-Desktop {
    display: flex;
}

#Quoting-Mobile {
    display: none;
}

#Payroll360-Desktop {
    display: flex;
}

#Payroll360-Mobile {
    display: none;
}

#AIPlanDesignBuilder-Desktop {
    display: flex;
}

#AIPlanDesignBuilder-Mobile {
    display: none;
}

#WorkerData-Desktop {
    display: flex;
}

#WorkerData-Mobile {
    display: none;
}

#WorkerCommunication-Desktop {
    display: flex;
}

#WorkerCommunication-Mobile {
    display: none;
}

#AbsenceSolutions-Desktop {
    display: flex;
}

#AbsenceSolutions-Mobile {
    display: none;
}

#CaseStudy-Logo-Desktop {
    display: flex;
}

#CaseStudy-Logo-Mobile {
    display: none;
}

#CaseStudy-NeedStats-Desktop {
    display: flex;
}

#CaseStudy-NeedStats-Mobile {
    display: none;
}

#EE_Button-Desktop {
    display: flex;
}

#EE_Button-Mobile {
    display: none;
}

.case-study-cta {
    background: var(--lf-light-blue);
    padding: 15px;
}

.callout-text {
    font-family: 'Roboto', sans-serif;
    color: #650030 !important;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

a .callout-link {
    font-family: 'Roboto', sans-serif;
    color: #650030 !important;
    text-decoration: underline;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 8px;
}

a .callout-link:hover {
    color: var(--lf-orange) !important;
}

a .callout-link-lg {
    font-family: 'Roboto', sans-serif;
    color: #650030 !important;
    text-decoration: underline;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

a .callout-link-lg:hover {
    color: var(--lf-orange) !important;
}

a img:hover {
   opacity: .85;
}

.blue-wave {
    width: 100%;
    height: 100px;
}


/* ─── NAVBAR ──────────────────────────────────────── */

.img-profile {
    height: 52px;
    width: auto;
    margin: 10px;
}

.lf-navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: 0;
}

.lf-navbar .container {
    min-height: 64px;
    display: flex;
    align-items: center;
}

/* Logo area */
.lf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.lf-brand-mark {
    width: 44px;
    height: 44px;
    background: var(--lf-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lf-brand-mark span {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .5px;
}

.lf-brand-text {
    line-height: 1.1;
}

.lf-brand-text .line1 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--lf-black);
    letter-spacing: .5px;
}

.lf-brand-text .line2 {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
}

/* Nav links */
.lf-navbar .navbar-nav .nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lf-black);
    padding: 8px 25px;
    transition: color .2s;
    float: right;
}

.nav-link.active {
    color: var(--lf-orange) !important;
    text-decoration: underline;
}

.lf-navbar .navbar-nav .nav-link:hover, .lf-navbar .navbar-nav .nav-link:focus {
    color: var(--lf-orange);
    text-decoration: underline;
}

/* Dropdown */
.lf-navbar .dropdown-menu {
    margin-top: 12px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    padding: 0;
    min-width: 200px;
}

.lf-navbar .dropdown-item {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #000000;
    padding: 15px 30px 15px 30px;
    transition: background .15s, color .15s;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--lf-orange) !important;
    text-decoration: underline;
    background-color: #FFFFFF;
}

.lf-navbar .dropdown-item:hover {
    background: var(--lf-light-blue);
    color: var(--lf-orange);
    text-decoration: underline;
}

/* CTA Button */
.btn-nav-cta {
    background: var(--lf-orange);
    color: #fff !important;
    border-radius: 24px;
    padding: 8px 20px !important;
    font-weight: 700;
    font-size: 1rem;
    transition: background .2s;
}

.btn-nav-cta:hover {
    background: var(--lf-orange-dk);
    text-decoration: none !important;
}

.callout-background {
    padding: 36px 36px 32px;
    background: var(--lf-light-blue);
}

/* ─── HERO ────────────────────────────────────────── */

.hero-section {
    position: relative;
    min-height: 57vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000000;
}

/* Video layer — swap placeholder div for Brightcove embed */

.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-video-bg > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark gradient overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    /*background: linear-gradient(100deg, rgba(10,6,20,.82) 0%, rgba(40,10,60,.45) 100%);*/
    z-index: 2;
}

/* Content */
.hero-content {
    position: relative;
    z-index: 3;
    padding: 80px 0 100px;
}

.hero-logo-text {
    font-size: 3.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -1px;
}

.hero-logo-text .bracket { 
    color: var(--lf-orange);
}

.hero-logo-text sup {
    font-size: 1rem;
    vertical-align: super;
    letter-spacing: 0;
}

.hero-tagline {
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 18px;
    margin-top: 35px;
}

.hero-body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #FFFFFF;
    line-height: 1.8;
    margin-bottom: 12px;
}

.btn-cta {
    display: inline-block;
    background: var(--lf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 24px;
    border-radius: 24px;
    text-decoration: none;
    transition: background .2s;
}

.btn-cta:hover {
    background: var(--lf-orange-dk); color: #fff;
}

.btn-cta-slim {
    display: inline-block;
    background: var(--lf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 24px;
    border-radius: 24px;
    text-decoration: none;
    transition: background .2s;
}

.btn-cta-slim:hover {
    background: var(--lf-orange-dk);
    color: #fff;
}

/* Hero right-side video card */
.hero-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.hero-card-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a0a2e 0%, #3a105a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*
    ──────────────────────────────────────────────────────
    BRIGHTCOVE HERO CARD VIDEO
    Replace the inner placeholder with:

    <video-js
        data-account="1134849171001"
        data-player="default"
        data-embed="default"
        data-video-id="6356155277112"
        class="vjs-fluid"
        controls="">
    </video-js>
    <script src="https://players.brightcove.net/1134849171001/default_default_default/index.min.js"></script>
    ──────────────────────────────────────────────────────
    */
}

.hero-card-video-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px;
}

.hero-card-logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.hero-card-logo .bracket {
    color: var(--lf-orange);
}

.hero-card-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
}

.play-circle {
    width: 54px;
    height: 54px;
    background: var(--lf-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
    margin: 6px 0;
}

.play-circle:hover {
    background: var(--lf-orange-dk);
    transform: scale(1.08);
}
.play-circle i {
    font-size: 1.3rem;
    color: #fff;
    margin-left: 3px;
}

.hero-card-caption {
    font-size: 1rem;
    color: rgba(255,255,255,.55);
    line-height: 1.4;
}

/* ─── INTRO ───────────────────────────────────────── */

.intro-section {
    padding: 52px 0px 0px 0px;
    background: #fff;
}

.intro-section p {
    font-size: 1rem;
    line-height: 1.85;
    color: #000000;
    margin: 0 auto 14px;
}

/* ─── API SOLUTIONS ───────────────────────────────── */

.api-section {
    padding: 20px 0 70px;
    background: #fff;
}

.api-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

/* Gray header box */
.api-header {
    background: var(--lf-gray-box);
    padding: 28px 32px 22px;
}

.api-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lf-black);
    text-align: center;
    margin-bottom: 16px;
}

.api-links-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 0;
    row-gap: 8px;
}

.api-tab {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    padding: 2px 9px;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, background .15s;
    border: none;
    background: none;
}

.api-tab:hover {
    color: var(--lf-black);
    text-decoration: underline;
}

.api-tab.active {
    color: #FF4F17;
    font-weight: 700;
}

.api-sep {
    color: #aaa;
    font-size: 1rem;
    padding: 0 2px;
    user-select: none;
}

/* Content panels */
.api-body {
    padding: 36px 36px 32px;
    background: #ededee;
}

.api-panel {
    display: none;
}

.api-panel.active {
    display: block;
}

.api-panel h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lf-orange);
    margin-bottom: 16px;
}

.api-panel p {
    font-size: 1rem;
    line-height: 1.75;
    color: #444;
    margin-bottom: 12px;
}

.api-panel .connected-head {
    font-weight: 400;
    color: var(--lf-black);
    font-size: 1rem;
    margin-top: 18px;
    margin-bottom: 2px;
}

.api-panel .connected-head-mobile {
    font-weight: 400;
    color: var(--lf-black);
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.api-panel .connected-list {
    font-size: 1rem;
    color: #666;
}

/* Video placeholder in API panels */
.api-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--lf-dark);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
    ──────────────────────────────────────────────────────
    BRIGHTCOVE API PANEL VIDEO
    Per panel, replace the inner placeholder with the
    Brightcove embed for that API's video.
    ──────────────────────────────────────────────────────
    */
}

.api-video-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.api-video-label {
    font-size: .7rem;
    color: rgba(255,255,255,.45);
}

/* Accordion */
.accordion-area {
    margin: 52px auto 50px auto !important;
}

.accordion-item {
    border: solid 1px;
    border-left: none;
    border-right: none;
}

.accordion-btn {
    background-color: #FFFFFF;
}

.accordion-button {
    padding-top: 1.2rem;
    padding-bottom: 0rem;
}

.accordion-body {
    padding-top: 0rem;
    padding-bottom: 2rem;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

/* ─── PARTNER SECTION ─────────────────────────────── */

.partner-api-section {
    background: var(--lf-gray-box);
    padding: 64px 0;
}

.partner-section {
    background: var(--lf-light-blue);
    padding: 64px 0;
}

.partner-intro p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.partner-intro .partner-cta-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--lf-black);
}

.partner-intro .partner-cta-text a {
    font-family: 'Roboto', sans-serif;
    color: var(--lf-orange);
    font-weight: 700;
    text-decoration: none;
}

.partner-cat-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaaaaa;
    margin-bottom: 14px;
    margin-top: 28px;
}

.partner-cat-title:first-child {
    margin-top: 0;
}

/* Partner Logos */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
    margin-bottom: 4px;
}

.logo-chip {
    background: #fff;
    border-radius: 12px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
    cursor: pointer;
    overflow: hidden;
}

.logo-chip:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.logo-chip img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    display: block;
}

/* ─── FOCUS / STATS SECTION ───────────────────────── */

.focus-section {
    padding: 72px 0 60px;
    background: #fff;
}

.focus-section .focus-lead {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: #000;
}

.stat-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0;
}

.stat-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    color: var(--lf-orange);
}

.stat-text p {
    font-size: 1rem;
    font-weight: 300;
    color: #000000;
    margin: 0;
    line-height: 1.5;
}

.stat-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lf-black);
    margin-bottom: 4px;
    line-height: 1.3;
}

.footnotes {
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 40px;
    padding-top: 20px;
}

.footnotes p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: .9rem;
    color: #000000;
    margin-bottom: 3px;
    line-height: 1.3;
    text-indent: .5em hanging;
}

/* ─── CONNECT (FULL VIDEO BG) ─────────────────────── */

.connect-section {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-bottom: 100px; /* room for footer curve overlap */
}

/* Video layer */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-video-bg > * {
    margin-top: -40px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video background when main video is visible */
/*.hero-video-bg > * {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

/* Video background without main video */
.hero-video-bg > * {
    margin-top: -40px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video layer */
.connect-video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.connect-video-bg > * {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder (DELETE when adding Brightcove) */
.connect-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #0a0618 0%, #280a38 50%, #0e1a2e 100%);
    position: relative;
}

.connect-placeholder svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.connect-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.connect-content {
    position: relative;
    z-index: 3;
    padding: 80px 20px 60px;
}

.connect-content h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 28px;
    line-height: 1.25;
}

.connect-content h2 em {
    font-style: italic;
}

.connect-content sup {
    font-size: .4em;
    vertical-align: super;
}

/* ─── FOOTER ──────────────────────────────────────── */
.footer-wrapper {
    position: relative;
    margin-top: -90px; /* overlap video section */
    z-index: 20;
}

/* SVG irregular curve */
.footer-curve-svg {
    display: block;
    width: 100%;
    height: 90px; /* keep in sync with curve viewBox height */
    overflow: visible;
}

.footer-main {
    background: var(--lf-footer-bg);
    padding: 30px 0 32px;
}

.footer-case {
    background: var(--lf-footer-bg);
    margin-bottom: 0;
    padding-bottom: 32px;
}

/* Prevent modal-content from clipping the bleed */
#CaseStudyModal .modal-content {
    overflow: hidden;
}

.footer-links a {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFFFFF;
    font-size: 1rem;
    margin-right: 18px;
    text-decoration: underline;
}

.footer-links a:hover {
    color: #ededee;
}

.footer-legal p {
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.7;
}

.footer-legal strong {
    color: #FFFFFF;
}

.footer-codes {
    margin-top: 14px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    color: #FFFFFF;
    line-height: 1.7;
}

/* ─── UTILITIES / RESPONSIVE ──────────────────────── */

@media (max-width: 1198.98px) {
    
    .footer-path {
        margin-top: 1rem;
        
    }

    /* Nav links */
    .lf-navbar .navbar-nav .nav-link {
        font-size: 1rem;
        font-weight: 600;
        color: var(--lf-black);
        padding: 8px 14px;
        transition: color .2s;
        float: right;
    }

    .connect-video-bg > * {
        margin-top: 30px;
        width: 120% !important;
        height: 120% !important;
        object-fit:none;
    }

    /* Video background when main video is visible */
    /*.hero-video-bg > * {
        margin-top: 30px;
        width: 120% !important;
        height: 120% !important;
        object-fit:none;
    }*/

    /* Video background without main video */
    .hero-video-bg > * {
        margin-top: -20px;
        width: 120% !important;
        height: 120% !important;
        object-fit:none;
    }
    
    /* Modal Mobile Layout Display */
    
    #Enrollment-Desktop {
        display: none;
    }

    #Enrollment-Mobile {
        display: flex;
    }

    #EOI-Desktop {
        display: none;
    }

    #EOI-Mobile {
        display: flex;
    }

    #EOI-Tab-Desktop {
        display: flex;
    }

    #EOI-Tab-Mobile {
        display: none;
    }

    #AbsenceSolutions-Tab-Desktop {
        display: flex;
    }

    #AbsenceSolutions-Tab-Mobile {
        display: none;
    }

    #WorkerData-Tab-Desktop {
        display: flex;
    }

    #WorkerData-Tab-Mobile {
        display: none;
    }

    #WorkerCommunication-Tab-Desktop {
        display: flex;
    }

    #WorkerCommunication-Tab-Mobile {
        display: none;
    }

    #PlanDesign-Tab-Desktop {
        display: flex;
    }

    #PlanDesign-Tab-Mobile {
        display: none;
    }

    #Quoting-Tab-Desktop {
        display: flex;
    }

    #Quoting-Tab-Mobile {
        display: none;
    }

    #Enrollment-Tab-Desktop {
        display: flex;
    }

    #Enrollment-Tab-Mobile {
        display: none;
    }

    #Payroll360-Tab-Desktop {
        display: flex;
    }

    #Payroll360-Tab-Mobile {
        display: none;
    }

    #PlanDesign-Desktop {
        display: none;
    }

    #PlanDesign-Mobile {
        display: flex;
    }

    #Quoting-Desktop {
        display: none;
    }

    #Quoting-Mobile {
        display: flex;
    }

    #Payroll360-Desktop {
        display: none;
    }

    #Payroll360-Mobile {
        display: flex;
    }

    #AIPlanDesignBuilder-Desktop {
        display: none;
    }

    #AIPlanDesignBuilder-Mobile {
        display: flex;
    }

    #WorkerData-Desktop {
        display: none;
    }

    #WorkerData-Mobile {
        display: flex;
    }

    #WorkerCommunication-Desktop {
        display: none;
    }

    #WorkerCommunication-Mobile {
        display: flex;
    }

    #AbsenceSolutions-Desktop {
        display: none;
    }

    #AbsenceSolutions-Mobile {
        display: flex;
    }

    #CaseStudy-Logo-Desktop {
        display: none;
    }

    #CaseStudy-Logo-Mobile {
        display: flex;
    }

    #CaseStudy-NeedStats-Desktop {
        display: none;
    }

    #CaseStudy-NeedStats-Mobile {
        display: flex;
    }

    #EE_Button-Desktop {
        display: flex;
    }

    #EE_Button-Mobile {
        display: none;
    }
    
}

@media (max-width: 991.98px) {
    
    .hero-logo-text {
        font-size: 2.8rem;
    }
    
    .hero-tagline {
        font-size: 1.15rem;
    }
    
    .hero-content {
        padding: 60px 0 80px;
    }
    
    .connect-content h2 {
        font-size: 1.55rem;
    }

    /* Nav links */
    .lf-navbar .navbar-nav .nav-link {
        font-size: 1rem;
        font-weight: 600;
        color: #000000;
        padding: 15px 15px 15px 0px;
        transition: color .2s;
        float: right;
    }
    
    .lf-navbar .dropdown-item {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 1rem;
        color: #000000;
        text-align: end;
        padding: 15px 15px 15px 0px;
        transition: none;
    }
    
    .lf-navbar .dropdown-item:hover {
        background: #FFFFFF;
        color: var(--lf-orange);
        text-decoration: underline;
    }
    
    /* Dropdown */
    .lf-navbar .dropdown-menu {
        margin-top: 12px;
        border: none;
        border-radius: 0px;
        box-shadow: none;
        padding: 0;
        min-width: 200px;
    }

    /* CTA Button */
    .btn-nav-cta {
        margin: 15px 15px 35px 0px;
    }
    
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-path {
        margin-top: 0rem;
    }
    
    #Enrollment-Desktop {
    display: none;
    }

    #Enrollment-Mobile {
        display: flex;
    }

    #EOI-Desktop {
        display: none;
    }

    #EOI-Mobile {
        display: flex;
    }

    #TabList-Desktop {
        display: none;
    }

    #TabList-Tablet {
        display: block;
    }

    #TabList-Mobile {
        display: none;
    }

    #EOI-Tab-Desktop {
        display: none;
    }

    #EOI-Tab-Mobile {
        display: flex;
    }

    #AbsenceSolutions-Tab-Desktop {
        display: none;
    }

    #AbsenceSolutions-Tab-Mobile {
        display: flex;
    }

    #WorkerData-Tab-Desktop {
        display: none;
    }

    #WorkerData-Tab-Mobile {
        display: flex;
    }

    #WorkerCommunication-Tab-Desktop {
        display: none;
    }

    #WorkerCommunication-Tab-Mobile {
        display: flex;
    }

    #PlanDesign-Tab-Desktop {
        display: none;
    }

    #PlanDesign-Tab-Mobile {
        display: flex;
    }

    #Quoting-Tab-Desktop {
        display: none;
    }

    #Quoting-Tab-Mobile {
        display: flex;
    }

    #Enrollment-Tab-Desktop {
        display: none;
    }

    #Enrollment-Tab-Mobile {
        display: flex;
    }

    #Payroll360-Tab-Desktop {
        display: none;
    }

    #Payroll360-Tab-Mobile {
        display: flex;
    }

    #PlanDesign-Desktop {
        display: none;
    }

    #PlanDesign-Mobile {
        display: flex;
    }

    #Quoting-Desktop {
        display: none;
    }

    #Quoting-Mobile {
        display: flex;
    }

    #Payroll360-Desktop {
        display: none;
    }

    #Payroll360-Mobile {
        display: flex;
    }

    #AIPlanDesignBuilder-Desktop {
        display: none;
    }

    #AIPlanDesignBuilder-Mobile {
        display: flex;
    }

    #WorkerData-Desktop {
        display: none;
    }

    #WorkerData-Mobile {
        display: flex;
    }

    #WorkerCommunication-Desktop {
        display: none;
    }

    #WorkerCommunication-Mobile {
        display: flex;
    }

    #AbsenceSolutions-Desktop {
        display: none;
    }

    #AbsenceSolutions-Mobile {
        display: flex;
    }

    #CaseStudy-Logo-Desktop {
        display: none;
    }

    #CaseStudy-Logo-Mobile {
        display: flex;
    }

    #CaseStudy-NeedStats-Desktop {
        display: none;
    }

    #CaseStudy-NeedStats-Mobile {
        display: flex;
    }

    #EE_Button-Desktop {
        display: none;
    }

    #EE_Button-Mobile {
        display: flex;
    }
    
    /* Video background when main video is visible */
    /*.hero-video-bg > * {
        margin-top: 200px;
        width: 200% !important;
        height: 200% !important;
        object-fit:none;
    }*/
    
    /* Video background without main video */
    .hero-video-bg > * {
        margin-top: -70px;
        width: 160%!important;
        height: 160% !important;
        object-fit:none;
    }
}

@media (max-width: 767.98px) {
    .api-tab {
        font-size: 1rem;
    }
    
    .api-body {
        padding: 24px 20px;
    }
    
    .logo-grid {
        gap: 8px;
    }
    
    .logo-chip {
        height: 100px; padding: 8px 12px;
    }
    
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .connect-video-bg > * {
        margin-top: 200px;
        width: 200% !important;
        height: 200% !important;
        object-fit:none;
    }

    #TabList-Desktop {
        display: none;
    }

    #TabList-Tablet {
        display: none;
    }

    #TabList-Mobile {
        display: block;
    }
    
    /* Video background without main video */
    .hero-video-bg > * {
        margin-top: 0px;
        width: 170%!important;
        height: 170% !important;
        object-fit:none;
    }
    
}

@media (max-width: 575.98px) {

    /* Video background when main video is visible */
    /*.hero-video-bg > * {
        margin-top: 60px;
        width: 300% !important;
        height: 300% !important;
        object-fit:none;
    }*/
    
    /* Video background without main video */
    .hero-video-bg > * {
        margin-top: 50px;
        width: 180% !important;
        height: 180% !important;
        object-fit:none;
    }
    
}

@media (max-width: 479.98px) {
    .api-tab {
        font-size: 1rem;
    }
    
    .api-body {
        padding: 24px 20px;
    }
    
    .logo-grid {
        gap: 8px;
    }
    
    .logo-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .logo-chip {
        height: 100px; padding: 8px 12px;
    }

    .connect-video-bg > * {
        margin-top: 400px;
        width: 300% !important;
        height: 300% !important;
        object-fit:none;
    }
    
    /* Video background when main video is visible */
    /*.hero-video-bg > * {
        margin-top: 60px;
        width: 300% !important;
        height: 300% !important;
        object-fit:none;
    }*/
    
    /* Video background without main video */
    .hero-video-bg > * {
        margin-top: 0px;
        width: 280% !important;
        height: 280% !important;
        object-fit:none;
    }
    
}

/* Brightcove: ensure video-js fills container */
.vjs-fluid {
    width: 100% !important;
}

.disclosure {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1rem;
}

.disclosure-bold {
    font-family: 'Roboto Condensed', sans-serif;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
}

.disclosure-link {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1rem;
	font-weight: 300;
    color: #FFFFFF;
    text-decoration: underline;
}

.disclosure-link:hover {
    color: #E2EEF9;
    text-decoration: underline;
}

.no-sell {
    color: #FFFFFF;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    font-size: 16px;
    text-decoration: underline;
}

.fade-in {
    opacity: 0; /* Start invisible */
    animation: fadeIn 1.5s ease-in forwards;
    animation-delay: 0.15s; /* Delay before fade starts */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

/* change transition duration to control the speed of fade effect */
.carousel-item {
    transition: transform 1s ease-in-out;
}

.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
    transition: opacity 0s 1s;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

.btn-transparent {
    background-color: transparent;
    color: #000000;
    border-radius: 24px;
    border: none;
    padding: 5px 16px 5px 16px;
    font-weight: 400;
}

.btn-transparent.active {
    font-family: 'Roboto', sans-serif;
    font-weight: 700 ;
    color: #ff4f17;
}

button.btn.btn-transparent:hover, button.btn.btn-transparent:active, button.btn.btn-transparent:focus {
    font-family: 'Roboto', sans-serif;
    font-weight: 700 ;
    color: #ff4f17;
}

.btn-transparent-close {
    background-color: transparent;
    color: #000000;
    text-decoration: underline;
    border-radius: 24px;
    border: none;
    font-weight: 700;
}

.btn-transparent-close:hover, .btn-transparent-close:focus {
    color: #ff4f17;
}

.carousel-indicators {
    position: absolute;
    bottom: -70px;
    height: 50px;
}

.carousel .carousel-indicators button {
    background-color: #aaaaaa;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.carousel .carousel-indicators .active {
    background-color: #650030;
}

.carousel-inner {
    height: auto;
    margin-bottom: 0;
}