/* ================================================================
     BENEFITS PAGE STYLES
     ================================================================
     This contains the CSS for the Benefits of Working Here page.
     Last update: 2026-04-21 19:10
     
     IMPORTANT: This file requires careers-variables.css (global tokens)
     ================================================================ */

/* Import global design tokens */
@import url("/v2/careers/-/media/0D5C608917CC413498E8ABCDEFBED589");

/* ================================================================
     ACCESSIBILITY IMPROVEMENTS
     ================================================================ */
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
     }
}

/* Enhanced focus indicators for keyboard navigation ONLY */
.benefits-page-v2 a:focus-visible,
.benefits-page-v2 button:focus-visible,
.benefits-page-v2 [role="button"]:focus-visible {
     outline: 1px solid #1262b2 !important;
     outline-offset: 1px !important;
     box-shadow: 0 0 0 3px rgba(18, 98, 178, 0.2) !important;
}

/* For main navigation items, apply focus to parent container */
.benefits-page-v2 .secondary-nav-button-v2:focus-within {
     outline: 1px solid #1262b2 !important;
     outline-offset: 1px !important;
     box-shadow: 0 0 0 3px rgba(18, 98, 178, 0.2) !important;
}

/* Remove outline from main nav link only (not submenu) when parent has focus-within */
.benefits-page-v2 .secondary-nav-button-v2:focus-within .nav-link-wrapper a:focus-visible {
     outline: none !important;
     box-shadow: none !important;
}

/* Ensure NO outline for mouse clicks */
.benefits-page-v2 a:focus:not(:focus-visible),
.benefits-page-v2 button:focus:not(:focus-visible),
.benefits-page-v2 [role="button"]:focus:not(:focus-visible) {
     outline: none !important;
     box-shadow: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {

     .benefits-page-v2 .hero-description,
     .benefits-page-v2 .benefit-item-description {
          font-weight: 500;
     }
}

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

/* Override tagbox list padding */
.tag-box-content ul li,
.tag-box-content ol li {
     padding: 0;
}

.container-fluid.benefits-page-v2 .yellow-nav-links li {
     padding: 0;
     margin: 0;
}

body {
     font-family: var(--font-family-sans);
     line-height: var(--line-height-base);
     color: var(--color-neutral-body-text);
     background-color: var(--color-core-white);
}

.benefits-page-v2 {
     padding-left: 0 !important;
     padding-right: 0 !important;
}

/* ================================================================
    SECTION 1: HERO SECTION (Reusing careers styles)
    ================================================================ */
.container-fluid.benefits-page-v2 .header-image-chevron {
     display: flex;
     width: 100vw;
     min-width: 991px;
     height: 522px !important;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: var(--color-core-plum);
     overflow: hidden;
     margin-left: calc(-50vw + 50%);
     margin-right: calc(-50vw + 50%);
}

.container-fluid.benefits-page-v2 .hero-content-container {
     display: inline-grid;
     max-width: var(--layout-max-width);

     height: 100%;
     padding: 0 var(--layout-content-padding);
     column-gap: var(--spacing-3xl);
     align-self: stretch;
     grid-template-rows: repeat(1, fit-content(100%));
     grid-template-columns: repeat(12, minmax(0, 1fr));
     margin: 0 auto;
     width: 100%;
     position: relative;
}

.container-fluid.benefits-page-v2 .content-container {
     display: flex;
     min-height: 350px;
     padding: var(--spacing-4xl) 0;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     grid-row: 1 / span 1;
     grid-column: 1 / span 7;
     justify-self: stretch;
}

.container-fluid.benefits-page-v2 .header-container {
     display: flex;
     padding-bottom: var(--spacing-2xl);
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-lg);
     align-self: stretch;
}

.container-fluid.benefits-page-v2 .title-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
}

/* Breadcrumb link */
.container-fluid.benefits-page-v2 .breadcrumb-link {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--color-core-white);
     font-family: var(--font-family-sans);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
     text-decoration: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: none;
     text-underline-offset: auto;
     text-underline-position: from-font;
     transition: opacity var(--transition-normal);
}

.container-fluid.benefits-page-v2 .breadcrumb-link:hover {
     opacity: 0.8;
     text-decoration: underline;
}

.container-fluid.benefits-page-v2 .page-label {
     color: var(--color-core-white);
     font-family: var(--font-family-sans);
     font-size: var(--font-size-headline-sm);
     font-weight: 300;
     line-height: var(--line-height-headline-sm);
}

.container-fluid.benefits-page-v2 .hero-header {
     align-self: stretch;
     color: var(--color-core-white);
     font-family: var(--font-family-serif);
     font-size: var(--font-size-display);
     font-weight: 700;
     line-height: var(--line-height-display);
     text-decoration: none;
     display: block;
}

.container-fluid.benefits-page-v2 .hero-description {
     color: var(--color-core-white);
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-lg);
     font-weight: 400;
     line-height: var(--line-height-body);
}

.container-fluid.benefits-page-v2 .hero-description p {
     margin-bottom: var(--spacing-lg);
     color: var(--color-core-white);
}

.container-fluid.benefits-page-v2 .hero-description p:last-child {
     margin-bottom: 0;
}

.container-fluid.benefits-page-v2 .image-position-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-sm);
     align-self: stretch;
     grid-row: 1 / span 1;
     grid-column: 8 / span 5;
     justify-self: stretch;
     position: relative;
}

.container-fluid.benefits-page-v2 .image-position-container>.image-container {
     display: flex;
     align-items: flex-start;
     flex: 1 0 0;
     opacity: 0.75;
     width: 100%;
     height: 100%;
     align-self: stretch;
     position: relative;
}

.container-fluid.benefits-page-v2 .hero-chevron-svg {
     width: auto;
     height: 100%;
     max-width: none;
     display: block;
     min-width: 576px;
}

.container-fluid.benefits-page-v2 .hero-rect-img {
     display: none;
     width: 100%;
     height: 100%;
     object-fit: cover;
}

/* ================================================================
    SECTION 2: YELLOW NAVIGATION (Reusing careers styles)
    ================================================================ */
.container-fluid.benefits-page-v2 .careers-yellow-nav {
     display: flex;
     height: auto;
     min-height: var(--layout-nav-height);
     min-width: 991px;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     align-self: stretch;
     border-top: var(--border-width-thick) solid var(--color-core-white);
     border-bottom: var(--border-width-thick) solid var(--color-core-white);
     background: var(--color-core-yellow);
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky-nav);
     width: 100vw;
     margin-left: calc(-50vw + 50%);
     margin-right: calc(-50vw + 50%);
}

.container-fluid.benefits-page-v2 .nav-container {
     display: flex;
     max-width: var(--layout-max-width);
     padding: 0 var(--layout-content-padding);
     justify-content: space-between;
     align-items: center;
     flex: 1 0 0;
     margin: 0 auto;
     width: 100%;
     position: relative;
}

.container-fluid.benefits-page-v2 .yellow-nav-links {
     display: flex;
     align-items: center;
     gap: 0;
     list-style: none;
     margin: 0;
     padding: 0;
}

.container-fluid.benefits-page-v2 .yellow-nav-links a {
     display: flex;
     height: 52px;
     padding: 10px 15px;
     align-items: center;
     gap: var(--spacing-sm);
     color: var(--color-core-black);
     text-decoration: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     transition: background-color var(--transition-normal);
     cursor: pointer;
     border: none;
     background: transparent;
}

.container-fluid.benefits-page-v2 .yellow-nav-links a:hover {
     background-color: var(--color-accent-yellow-light);
}

.container-fluid.benefits-page-v2 .divider-container {
     display: flex;
     align-items: center;
     align-self: stretch;
     margin-right: -1px;
}

.container-fluid.benefits-page-v2 .divider {
     width: 2px;
     height: 18px;
     background: var(--color-accent-yellow-dark);
}

.container-fluid.benefits-page-v2 .secondary-nav-cta-button-v2 {
     display: flex;
     padding: 8px 16px;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: var(--spacing-sm);
     background: var(--color-core-blue);
     border: none;
     cursor: pointer;
     transition: background-color var(--transition-slow);
     flex-shrink: 0;
     white-space: nowrap;
     text-decoration: none;
}

.container-fluid.benefits-page-v2 .secondary-nav-cta-button-v2:hover {
     background-color: var(--color-accent-blue-dark);
}

.container-fluid.benefits-page-v2 .secondary-nav-cta-button-v2 span {
     color: var(--color-core-white);
     text-align: center;
     font-family: var(--font-family-serif);
     font-size: var(--font-size-body-lg);
     font-weight: 700;
     line-height: var(--line-height-body);
}

/* Mobile menu (hidden on desktop) */
.container-fluid.benefits-page-v2 .secondary-menu-button-wrapper {
     display: none;
     position: relative;
}

/* Navigation button active/hover states */
.container-fluid.benefits-page-v2 .secondary-nav-button-v2 {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
     background: transparent;
     position: relative;
}

.container-fluid.benefits-page-v2 .secondary-nav-button-v2.active,
.container-fluid.benefits-page-v2 .secondary-nav-button-v2:hover {
     background: var(--color-accent-yellow-light);
}

.container-fluid.benefits-page-v2 .secondary-nav-button-v2.active .nav-link-wrapper,
.container-fluid.benefits-page-v2 .secondary-nav-button-v2:hover .nav-link-wrapper {
     border-bottom: 4px solid var(--color-accent-yellow-darkest);
}

.container-fluid.benefits-page-v2 .nav-link-wrapper {
     display: flex;
     height: 52px;
     padding: 10px 15px;
     align-items: center;
     gap: var(--spacing-sm);
     align-self: stretch;
     transition:
          background-color var(--transition-normal),
          border-bottom var(--transition-normal);
     border-bottom: 4px solid transparent;
}

.container-fluid.benefits-page-v2 .nav-link-wrapper a {
     color: var(--color-core-black);
     text-decoration: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     padding: 0;
     height: auto;
     border: none;
}

/* Submenu styles */
.container-fluid.benefits-page-v2 .submenu {
     display: none;
     flex-direction: column;
     align-items: flex-start;
     background: var(--color-accent-yellow-light);
     border: var(--border-width-thin) solid var(--color-accent-yellow-dark);
     box-shadow: var(--box-shadow-dropdown);
     position: absolute;
     top: 62px;
     left: 0;
     min-width: 250px;
     z-index: var(--z-index-sticky-nav);
}

.container-fluid.benefits-page-v2 .submenu.open {
     display: flex !important;
}

.container-fluid.benefits-page-v2 .submenu a {
     display: flex;
     width: 100%;
     padding: 12px 20px;
     color: var(--color-core-black);
     text-decoration: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     background: transparent;
     border: none;
     height: auto;
     transition:
          background-color var(--transition-normal),
          border-bottom var(--transition-normal);
     border-bottom: var(--border-width-thin) solid transparent;
}

.container-fluid.benefits-page-v2 .submenu a:hover {
     background-color: rgba(0, 0, 0, 0.08);
     border-bottom: var(--border-width-focus) solid var(--color-core-black);
}

/* Mobile menu button and dropdown */
.container-fluid.benefits-page-v2 .secondary-menu-button {
     display: flex;
     height: 52px;
     padding: 10px 15px;
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-sm);
     width: 100%;
     color: var(--color-core-black);
     background: transparent;
     border: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     cursor: pointer;
     transition: background-color var(--transition-normal);
}

.container-fluid.benefits-page-v2 .secondary-menu-button:hover {
     background-color: transparent;
}

.container-fluid.benefits-page-v2 .secondary-menu-button.open {
     background: var(--color-accent-yellow-light);
     border-bottom: 4px solid var(--color-accent-yellow-darkest);
}

.container-fluid.benefits-page-v2 .menu-chevron-svg {
     width: 11.775px;
     height: 20px;
     transform: rotate(0deg);
     fill: var(--color-core-black);
     transition: transform var(--transition-slow);
}

.container-fluid.benefits-page-v2 .secondary-menu-button.open .menu-chevron-svg {
     transform: rotate(180deg);
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown {
     display: none;
     flex-direction: column;
     align-items: flex-start;
     background: var(--color-accent-yellow-light);
     border: var(--border-width-thin) solid var(--color-accent-yellow-dark);
     box-shadow: var(--box-shadow-dropdown);
     position: absolute;
     top: 100%;
     left: 0;
     z-index: var(--z-index-dropdown);
     margin-top: var(--spacing-sm);
     gap: 0;
     min-width: 250px;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown.open {
     display: flex !important;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a {
     display: flex;
     width: 100%;
     padding: 0;
     color: var(--color-core-black);
     text-decoration: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     background: transparent;
     transition: background-color var(--transition-normal);
     white-space: nowrap;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-sm);
     align-self: stretch;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a>span,
.container-fluid.benefits-page-v2 .secondary-menu-dropdown a:not(:has(span)) {
     display: flex;
     height: 52px;
     padding: 10px 15px;
     align-items: center;
     gap: var(--spacing-sm);
     width: 100%;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a:hover>span,
.container-fluid.benefits-page-v2 .secondary-menu-dropdown a:hover {
     background: transparent;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a.active {
     background: var(--color-accent-yellow-light);
     border-bottom: 4px solid var(--color-accent-yellow-darkest);
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a.active>span {
     border-bottom: 4px solid var(--color-accent-yellow-darkest);
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a:hover {
     background-color: transparent;
}

/* Mobile nested menu items */
.container-fluid.benefits-page-v2 #early-career-mobile-submenu {
     display: none;
     width: 100%;
}

.container-fluid.benefits-page-v2 #early-career-mobile-submenu a {
     background: #ffdb66;
     white-space: nowrap;
}

.container-fluid.benefits-page-v2 #early-career-mobile-submenu a span {
     padding-left: 35px;
}

/* Early Career parent link - override flex-direction to keep chevron on same line */
.container-fluid.benefits-page-v2 .secondary-menu-dropdown a[onclick*="toggleEarlyCareerMobile"] {
     flex-direction: row !important;
     justify-content: space-between !important;
     align-items: center !important;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a[onclick*="toggleEarlyCareerMobile"] span {
     flex: 1;
     padding: 0;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown a[onclick*="toggleEarlyCareerMobile"] .menu-chevron-svg {
     flex-shrink: 0;
}

.container-fluid.benefits-page-v2 .mobile-search-button-wrapper {
     display: flex;
     width: 100%;
     padding: 10px 0;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: var(--spacing-sm);
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown .mobile-search-button {
     display: flex;
     padding: 12px 20px;
     justify-content: center;
     align-items: center;
     background: var(--color-core-blue);
     color: var(--color-core-white);
     text-align: center;
     font-family: var(--font-family-serif);
     font-size: var(--font-size-body-lg);
     font-weight: 700;
     line-height: var(--line-height-body);
     border: none;
     cursor: pointer;
     transition: background-color var(--transition-slow);
     white-space: nowrap;
     width: 100%;
}

.container-fluid.benefits-page-v2 .secondary-menu-dropdown .mobile-search-button:hover {
     background-color: var(--color-accent-blue-dark);
}

/* Desktop submenu (Early Career dropdown) */
.container-fluid.benefits-page-v2 .submenu {
     display: none;
     flex-direction: column;
     align-items: flex-start;
     background: var(--color-core-yellow);
     border: var(--border-width-thin) solid var(--color-accent-yellow-dark);
     box-shadow: var(--box-shadow-dropdown);
     position: absolute;
     top: 62px;
     left: 0;
     min-width: 250px;
     z-index: var(--z-index-sticky-nav);
}

.container-fluid.benefits-page-v2 .submenu.open {
     display: flex !important;
}

.container-fluid.benefits-page-v2 .submenu a {
     display: flex;
     width: 100%;
     padding: 12px 20px;
     color: var(--color-core-black);
     text-decoration: none;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-body-md);
     font-weight: 400;
     line-height: var(--line-height-body-sm);
     background: transparent;
     border: none;
     height: auto;
     transition:
          background-color var(--transition-normal),
          border-bottom var(--transition-normal);
     border-bottom: var(--border-width-thin) solid transparent;
}

.container-fluid.benefits-page-v2 .submenu a:hover {
     background: var(--color-accent-yellow-light);
     border-bottom: var(--border-width-focus) solid var(--color-core-black);
}

.container-fluid.benefits-page-v2 .submenu a.active {
     background: var(--color-accent-yellow-light);
     border-bottom: var(--border-width-focus) solid var(--color-core-black);
}

/* ================================================================
    SECTION 3: CARD MESSAGE LARGE (Employee Experience)
    ================================================================ */
.container-fluid.benefits-page-v2 .card-message-large {
     display: flex;
     width: 100%;
     min-width: 1200px;
     padding: 64px 0;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
     align-self: stretch;
     background: #e6f9f4;
}

.container-fluid.benefits-page-v2 .card-container {
     display: flex;
     max-width: 1200px;
     padding: 0 40px;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     align-self: stretch;
     margin: 0 auto;
}

.container-fluid.benefits-page-v2 .card {
     display: inline-grid;
     max-width: 1208px;
     column-gap: 40px;
     align-self: stretch;
     grid-template-rows: repeat(1, fit-content(100%));
     grid-template-columns: repeat(12, minmax(0, 1fr));
     margin: 0 auto;
}

.container-fluid.benefits-page-v2 .chevron-image-container {
     display: flex;
     justify-content: center;
     align-items: center;
     align-self: stretch;
     grid-row: 1 / span 1;
     grid-column: 2 / span 5;
     justify-self: stretch;
}

.container-fluid.benefits-page-v2 .chevron-image-container .image-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     flex: 1 0 0;
     align-self: stretch;
}

.container-fluid.benefits-page-v2 .employee-experience-image {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     flex: 1 0 0;
     align-self: stretch;
     width: 100%;
     height: auto;
     object-fit: cover;
     opacity: 1;
}

.container-fluid.benefits-page-v2 .card .content {
     display: flex;
     min-height: 280px;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: 24px;
     grid-row: 1 / span 1;
     grid-column: 7 / span 6;
     justify-self: stretch;
}

.container-fluid.benefits-page-v2 .card .title-container {
     display: flex;
     min-height: 60px;
     align-items: flex-start;
     gap: 47px;
     align-self: stretch;
}

.container-fluid.benefits-page-v2 .card .title-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     flex: 1 0 0;
     align-self: stretch;
     color: var(--color-core-blue);
     font-family: var(--font-family-serif);
     font-size: 32px;
     font-weight: 700;
     line-height: 36px;
}

.container-fluid.benefits-page-v2 .card .description-text {
     align-self: stretch;
     color: var(--color-core-black);
     font-family: var(--font-family-sans);
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
}

/* ================================================================
    SECTION 4: BENEFITS SECTION (Frame 2864)
    ================================================================ */
.container-fluid.benefits-page-v2 .benefits-section {
     display: flex;
     max-width: 1200px;
     padding: 64px 40px;
     flex-direction: column;
     align-items: center;
     gap: 40px;
     align-self: stretch;
     background: var(--color-core-white);
     margin: 0 auto;
}

/* Frame 155 - Intro section */
.container-fluid.benefits-page-v2 .benefits-intro {
     display: inline-grid;
     row-gap: 16px;
     column-gap: 16px;
     align-self: stretch;
     grid-template-rows: repeat(2, fit-content(100%));
     grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Frame 2845 - Benefits title */
.container-fluid.benefits-page-v2 .benefits-title-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 5px;
     grid-row: 1 / span 1;
     grid-column: 3 / span 8;
     justify-self: stretch;
}

.container-fluid.benefits-page-v2 .benefits-title {
     align-self: stretch;
     color: var(--color-core-blue);
     font-family: var(--font-family-serif);
     font-size: 32px;
     font-weight: 700;
     line-height: 40px;
}

/* Intro text */
.container-fluid.benefits-page-v2 .benefits-intro-text {
     grid-row: 2 / span 1;
     grid-column: 3 / span 8;
     justify-self: stretch;
}

.container-fluid.benefits-page-v2 .benefits-intro-text p {
     color: var(--color-core-black);
     font-family: var(--font-family-sans);
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     margin: 0;
}

/* Frame 2862 - Benefits cards grid */
.container-fluid.benefits-page-v2 .benefits-cards-grid {
     display: inline-grid;
     row-gap: 40px;
     column-gap: 40px;
     align-self: stretch;
     grid-template-rows: repeat(5, fit-content(100%));
     grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Individual benefit card */
.container-fluid.benefits-page-v2 .benefit-item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 15px;
     justify-self: stretch;
     text-align: left;
}

/* Desktop: 2 cards per row (4 columns each), centered in 12-column grid */
.container-fluid.benefits-page-v2 .benefit-item:nth-child(odd) {
     grid-column: 3 / span 4;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(even) {
     grid-column: 7 / span 4;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(1) {
     grid-row: 1;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(2) {
     grid-row: 1;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(3) {
     grid-row: 2;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(4) {
     grid-row: 2;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(5) {
     grid-row: 3;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(6) {
     grid-row: 3;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(7) {
     grid-row: 4;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(8) {
     grid-row: 4;
}

.container-fluid.benefits-page-v2 .benefit-item:nth-child(9) {
     grid-row: 5;
}

.container-fluid.benefits-page-v2 .benefit-item-title {
     align-self: stretch;
     color: var(--color-core-black);
     font-family: var(--font-family-serif);
     font-size: 20px;
     font-weight: 700;
     line-height: 30px;
     text-decoration: none;
     display: inline;
}

.container-fluid.benefits-page-v2 .benefit-item-description {
     align-self: stretch;
     color: var(--color-core-black);
     font-family: var(--font-family-sans);
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     margin: 0;
}

/* ================================================================
    RESPONSIVE DESIGN
    ================================================================ */
/* Tablet - 991px */
@media (max-width: 991px) {
     .container-fluid.benefits-page-v2 .header-image-chevron {
          min-width: 768px;
          max-width: 990px;
          height: auto !important;
          min-height: 250px;
     }

     .container-fluid.benefits-page-v2 .hero-content-container {
          min-height: 250px;
          grid-template-rows: repeat(2, fit-content(100%));
          grid-template-columns: repeat(8, minmax(0, 1fr));
          padding: 0;
     }

     .container-fluid.benefits-page-v2 .content-container {
          min-height: 250px;
          padding: var(--spacing-3xl);
          grid-row: 2 / span 1;
          grid-column: 1 / span 8;
     }

     .container-fluid.benefits-page-v2 .image-position-container {
          grid-row: 1 / span 1;
          grid-column: 1 / span 8;
     }

     .container-fluid.benefits-page-v2 .hero-chevron-svg {
          display: none;
     }

     .container-fluid.benefits-page-v2 .hero-rect-img {
          display: block;
          opacity: var(--opacity-hero-image);
     }

     .container-fluid.benefits-page-v2 .careers-yellow-nav {
          min-width: auto;
     }

     .container-fluid.benefits-page-v2 .nav-container {
          padding: 0 20px;
          gap: var(--spacing-sm);
     }

     /* Benefits section - Tablet */
     .container-fluid.benefits-page-v2 .benefits-intro {
          grid-template-columns: repeat(8, minmax(0, 1fr));
     }

     .container-fluid.benefits-page-v2 .benefits-title-container {
          grid-column: 1 / span 8;
     }

     .container-fluid.benefits-page-v2 .benefits-intro-text {
          grid-column: 1 / span 8;
     }

     .container-fluid.benefits-page-v2 .benefits-cards-grid {
          grid-template-columns: repeat(8, minmax(0, 1fr));
     }

     /* Tablet: 2 cards per row (4 columns each) */
     .container-fluid.benefits-page-v2 .benefit-item:nth-child(1) {
          grid-row: 1;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(2) {
          grid-row: 1;
          grid-column: 5 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(3) {
          grid-row: 2;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(4) {
          grid-row: 2;
          grid-column: 5 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(5) {
          grid-row: 3;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(6) {
          grid-row: 3;
          grid-column: 5 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(7) {
          grid-row: 4;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(8) {
          grid-row: 4;
          grid-column: 5 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(9) {
          grid-row: 5;
          grid-column: 1 / span 4;
     }

     /* Employee Experience - Tablet */
     .container-fluid.benefits-page-v2 .card-message-large {
          width: 100vw;
          min-width: auto;
          max-width: none;
          padding: 64px 20px;
          margin-left: calc(-50vw + 50%);
          margin-right: calc(-50vw + 50%);
     }

     .container-fluid.benefits-page-v2 .card {
          grid-template-columns: repeat(8, minmax(0, 1fr));
          grid-template-rows: repeat(2, fit-content(100%));
     }

     .container-fluid.benefits-page-v2 .chevron-image-container {
          grid-row: 1;
          grid-column: 1 / span 8;
     }

     .container-fluid.benefits-page-v2 .card .content {
          grid-row: 2;
          grid-column: 1 / span 8;
          min-height: auto;
          padding: 30px 0 0 0;
     }
}

/* Small Tablet - 765px */
@media (max-width: 765px) {
     .container-fluid.benefits-page-v2 .header-image-chevron {
          min-width: 320px;
          max-width: 767px;
     }

     .container-fluid.benefits-page-v2 .hero-content-container {
          grid-template-columns: repeat(4, minmax(0, 1fr));
          padding: 0;
     }

     .container-fluid.benefits-page-v2 .content-container {
          padding: 20px var(--spacing-3xl);
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .image-position-container {
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .hero-header {
          font-size: 36px;
          line-height: 42px;
     }

     .container-fluid.benefits-page-v2 .page-label {
          font-size: 18px;
          line-height: 27px;
     }

     /* Show mobile menu */
     .container-fluid.benefits-page-v2 .secondary-menu-button-wrapper {
          display: block;
          flex: 1;
     }

     .container-fluid.benefits-page-v2 .nav-container {
          width: auto;
          flex: 0 0 auto;
          justify-content: flex-start;
          margin: 0;
     }

     .container-fluid.benefits-page-v2 .yellow-nav-links {
          display: none;
     }

     .container-fluid.benefits-page-v2 .button-container {
          display: none;
     }

     /* Benefits section - Mobile */
     .container-fluid.benefits-page-v2 .benefits-section {
          padding: 64px 20px;
          gap: 20px;
     }

     .container-fluid.benefits-page-v2 .benefits-cards-grid {
          grid-template-rows: repeat(9, fit-content(100%));
          grid-template-columns: repeat(4, minmax(0, 1fr));
     }

     /* Mobile: 1 card per row (full width) */
     .container-fluid.benefits-page-v2 .benefit-item:nth-child(1) {
          grid-row: 1;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(2) {
          grid-row: 2;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(3) {
          grid-row: 3;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(4) {
          grid-row: 4;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(5) {
          grid-row: 5;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(6) {
          grid-row: 6;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(7) {
          grid-row: 7;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(8) {
          grid-row: 8;
          grid-column: 1 / span 4;
     }

     .container-fluid.benefits-page-v2 .benefit-item:nth-child(9) {
          grid-row: 9;
          grid-column: 1 / span 4;
     }
}

/* Mobile - 346px */
@media (max-width: 346px) {
     .container-fluid.benefits-page-v2 .hero-header {
          font-size: 28px;
          line-height: 34px;
     }

     .container-fluid.benefits-page-v2 .nav-container {
          padding: 0 15px;
     }
}