body.leadership-v2-modal-open section[data-name="elf_leadership-v2"] {
    position: relative;
    z-index: 1000;
    overflow: visible;
}


/* =========================================================
   LEADERSHIP SECTION
========================================================= */

section[data-name="elf_leadership-v2"] {
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 80px 0 180px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 68%,
        #f5fcff 78%,
        #dff5ff 88%,
        #9dddf8 100%
    );
}


/* =========================================================
   CONTAINER
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 60px;
}


/* =========================================================
   RIGHT TOP GRAPHIC
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-top-graphic {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: min(47vw,780px);
    opacity: 1;
    pointer-events: none;
}

section[data-name="elf_leadership-v2"] .leadership-top-graphic {
    overflow: visible;
}

section[data-name="elf_leadership-v2"] .leadership-top-graphic img,
section[data-name="elf_leadership-v2"] .leadership-top-graphic > svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    opacity: 1;
    overflow: visible;
}


/* =========================================================
   LEFT BOTTOM GRAPHIC SVG
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-bottom-graphic {
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: 2;
    width: 310px;
    height: auto;
    opacity: 1;
    pointer-events: none;
}

section[data-name="elf_leadership-v2"] .leadership-bottom-graphic img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    opacity: 1;
}


/* =========================================================
   BOTTOM SHAPE BASE
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-shape {
    position: absolute;
    bottom: -5px;
    z-index: 4;
    width: clamp(280px,24vw,480px);
    height: clamp(180px,20vw,360px);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
}


/* =========================================================
   LEFT BOTTOM SHAPE
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-shape-left {
    left: 0;
    background-image: url("/wp-content/uploads/2026/08/shape-left.png");
    background-position: left bottom;
}


/* =========================================================
   RIGHT BOTTOM SHAPE
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-shape-right {
    right: 0;
    background-image: url("/wp-content/uploads/2026/08/shape-right.png");
    background-position: right bottom;
}


/* =========================================================
   FILTER
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-filter-form {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0 0 58px;
}

/* With zero or one taxonomy term there is no visible tab row or reserved tab gap. */
section[data-name="elf_leadership-v2"] .leadership-filter-form--no-tabs {
    margin-bottom: 0;
}


/* =========================================================
   TABS
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


/* =========================================================
   TAB
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-tab {
    position: relative;
    min-width: 125px;
    padding: 14px 24px;
    border: 0;
    border-radius: 40px;
    background-color: transparent;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #9a9a9a;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   TAB UNDERLINE
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-tab::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -6px;
    left: 18px;
    height: 2px;
    background-color: #b0b0b0;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   ACTIVE TAB
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-tab.is-active {
    background-color: var(--color-secondary-yellow);
    color: var(--color-primary-dark);
    font-weight: 600;
}

section[data-name="elf_leadership-v2"] .leadership-tab.is-active::after {
    opacity: 0;
    transform: scaleX(0);
}


/* =========================================================
   LOADING / NO RESULT
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-loading,
section[data-name="elf_leadership-v2"] .leadership-no-result {
    grid-column: 1 / -1;
    width: 100%;
    padding: 45px 20px;
    text-align: center;
    font-family: var(--font-body);
    color: #6d6e71;
}


/* =========================================================
   PAGINATION WRAPPER
========================================================= */

section[data-name="elf_leadership-v2"] .wrapper_pagination {
    grid-column: 1 / -1;
    width: 100%;
    margin: 25px 0 0;
    text-align: center;
}


/* =========================================================
   PAGINATION
========================================================= */

section[data-name="elf_leadership-v2"] .page-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

section[data-name="elf_leadership-v2"] .page-pagination .page-item {
    display: block;
    margin: 0;
    padding: 0;
}

section[data-name="elf_leadership-v2"] .page-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #222222;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

section[data-name="elf_leadership-v2"] .page-pagination .page-item.active .page-link {
    background-color: var(--color-secondary-yellow);
    color: var(--color-primary-dark);
}

section[data-name="elf_leadership-v2"] .page-pagination .d-none {
    display: none;
}


/* V2 Option B: business-overview-commitment inspired card pattern.
   Four columns, soft shadow, vertically centered text group. */
section[data-name="elf_leadership-v2"] .elf-leadership-list {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 38px;
    align-items: stretch;
    width: 100%;
}
section[data-name="elf_leadership-v2"] .leadership-card {
    display: flex;
    min-width: 0;
    min-height: 222px;
    margin: 0;
    background: #fff;
    border: 0;
    border-left: 2px solid #45b7ee;
    border-bottom: 2px solid #45b7ee;
    border-radius: 0 12px 0 48px;
    box-shadow: 5px 8px 18px rgba(28,53,71,.14);
    transition: transform .3s ease, box-shadow .3s ease;
}
section[data-name="elf_leadership-v2"] .leadership-card.has-profile { cursor: pointer; }
section[data-name="elf_leadership-v2"] .leadership-card.has-no-profile { cursor: default; }
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:hover,
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 8px 14px 26px rgba(28,53,71,.19);
    outline: none;
}
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:focus-visible {
    outline: 3px solid var(--color-primary-dark,#114c92);
    outline-offset: 4px;
}
section[data-name="elf_leadership-v2"] .leadership-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 30px 30px;
    justify-content: center;
    text-align: left;
}
section[data-name="elf_leadership-v2"] .leadership-card-title {
    margin: 0;
    font-family: Montserrat, var(--font-heading, sans-serif);
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary-dark,#114c92);
    overflow-wrap: anywhere;
}
section[data-name="elf_leadership-v2"] .leadership-card-position {
    margin-top: 11px;
    font-family: 'Open Sans', var(--font-body, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: #333;
    overflow-wrap: anywhere;
}
/* Match existing ae-sustainability-pillars-v2 text-link button. */
section[data-name="elf_leadership-v2"] .leadership-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: 19px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #36b4e8;
    font: 500 15px/1.35 Montserrat, Arial, sans-serif;
    text-decoration: none;
    cursor: inherit;
}
section[data-name="elf_leadership-v2"] .leadership-card-arrow {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    transition: transform .25s ease;
}
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:hover .leadership-card-link,
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:focus-visible .leadership-card-link {
    text-decoration: underline;
}
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:hover .leadership-card-arrow,
section[data-name="elf_leadership-v2"] .leadership-card.has-profile:focus-visible .leadership-card-arrow {
    transform: translateX(3px);
}
/* V2 text-only profile dialog */
body.leadership-v2-modal-open {overflow:hidden;}
body.leadership-v2-modal-open section[data-name="elf_leadership-v2"] {
    position:relative;z-index:1000;overflow:visible;
}
section[data-name="elf_leadership-v2"] .leadership-modal {
    position:fixed;inset:0;z-index:999999;display:flex;
    align-items:flex-start;justify-content:center;box-sizing:border-box;
    width:100%;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:clamp(28px,7dvh,80px) 24px clamp(28px,7dvh,80px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
}
section[data-name="elf_leadership-v2"] .leadership-modal.is-open {
    opacity:1;visibility:visible;pointer-events:auto;
}
section[data-name="elf_leadership-v2"] .leadership-modal-backdrop {
    position:absolute;inset:0;z-index:1;background:rgba(7,23,39,.60);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
section[data-name="elf_leadership-v2"] .leadership-modal-dialog {
    position:relative;z-index:2;box-sizing:border-box;
    width:min(700px,100%);flex:0 0 auto;
    max-height:calc(100dvh - 2 * clamp(28px,7dvh,80px));
    overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
    border-radius:22px;background:#fff;
    box-shadow:0 30px 85px rgba(0,0,0,.2);
    opacity:0;transform:translateY(20px) scale(.98);
    transition:opacity .3s ease,transform .35s ease;
}
section[data-name="elf_leadership-v2"] .leadership-modal.is-open .leadership-modal-dialog {
    opacity:1;transform:translateY(0) scale(1);
}
section[data-name="elf_leadership-v2"] .leadership-modal-layout {padding:46px;}
section[data-name="elf_leadership-v2"] .leadership-modal-profile {display:block;}
section[data-name="elf_leadership-v2"] .leadership-modal-heading {padding-right:45px;}
section[data-name="elf_leadership-v2"] .leadership-modal-title {
    margin:0;font-family:var(--font-heading,inherit);font-size:32px;
    font-weight:600;line-height:1.25;color:var(--color-primary-dark,#15344d);
}
section[data-name="elf_leadership-v2"] .leadership-modal-position {
    margin-top:9px;font-family:var(--font-body,inherit);font-size:16px;
    line-height:1.5;color:var(--color-primary-light,#2587b9);
}
section[data-name="elf_leadership-v2"] .leadership-modal-line {
    width:64px;height:3px;margin-top:22px;background:var(--color-secondary-yellow,#d6e946);
}
section[data-name="elf_leadership-v2"] .leadership-modal-description {
    margin-top:26px;font-family:var(--font-body,inherit);font-size:16px;
    line-height:1.75;color:#49545e;overflow-wrap:anywhere;
}
section[data-name="elf_leadership-v2"] .leadership-modal-description p {margin:0 0 15px;}
section[data-name="elf_leadership-v2"] .leadership-modal-description p:last-child {margin-bottom:0;}
/* =========================================================
   CLOSE
========================================================= */

section[data-name="elf_leadership-v2"] .leadership-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-secondary-yellow);
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

section[data-name="elf_leadership-v2"] .leadership-modal-close span {
    position: absolute;
    top: 20px;
    left: 11px;
    width: 20px;
    height: 2px;
    background-color: var(--color-primary-dark);
}

section[data-name="elf_leadership-v2"] .leadership-modal-close span:first-child {
    transform: rotate(45deg);
}

section[data-name="elf_leadership-v2"] .leadership-modal-close span:last-child {
    transform: rotate(-45deg);
}

section[data-name="elf_leadership-v2"] .leadership-modal-close:hover {
    background-color: var(--color-primary-light);
    transform: rotate(90deg);
}

section[data-name="elf_leadership-v2"] .leadership-modal-close:hover span {
    background-color: var(--color-white);
}


/* Responsive layout */
section[data-name="elf_leadership-v2"] .leadership-tabs {flex-wrap:wrap;gap:10px;}
section[data-name="elf_leadership-v2"] .leadership-tab {min-width:0;font-size:17px;padding:12px 22px;}
section[data-name="elf_leadership-v2"] .leadership-container {box-sizing:border-box;}
@media (max-width:1200px) {
 section[data-name="elf_leadership-v2"] .leadership-container {padding:0 35px;}
 section[data-name="elf_leadership-v2"] .elf-leadership-list {grid-template-columns:repeat(3,minmax(0,1fr));column-gap:26px;row-gap:30px;}
 section[data-name="elf_leadership-v2"] .leadership-top-graphic {width:min(48vw,620px);}
}
@media (max-width:991px) {
 section[data-name="elf_leadership-v2"] {min-height:0;padding:70px 0 145px;}
 section[data-name="elf_leadership-v2"] .leadership-container {padding:0 26px;}
 section[data-name="elf_leadership-v2"] .elf-leadership-list {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:28px;}
 section[data-name="elf_leadership-v2"] .leadership-bottom-graphic {width:190px;}
 section[data-name="elf_leadership-v2"] .leadership-shape {width:260px;height:220px;}
}
@media (max-width:600px) {
 section[data-name="elf_leadership-v2"] {padding:55px 0 125px;}
 section[data-name="elf_leadership-v2"] .leadership-container {padding:0 20px;}
 section[data-name="elf_leadership-v2"] .leadership-filter-form {margin-bottom:42px;}
 section[data-name="elf_leadership-v2"] .leadership-tabs {justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 0 12px;scrollbar-width:thin;}
 section[data-name="elf_leadership-v2"] .leadership-tab {flex-shrink:0;white-space:nowrap;font-size:15px;padding:10px 17px;}
 section[data-name="elf_leadership-v2"] .elf-leadership-list {grid-template-columns:1fr;gap:23px;}
 section[data-name="elf_leadership-v2"] .leadership-card {min-height:190px;border-radius:0 12px 0 36px;}
 section[data-name="elf_leadership-v2"] .leadership-card-content {padding:28px 26px;}
 section[data-name="elf_leadership-v2"] .leadership-card-title {font-size:21px;}
 section[data-name="elf_leadership-v2"] .leadership-card-position {font-size:16px;}
 section[data-name="elf_leadership-v2"] .leadership-top-graphic {width:75vw;opacity:.7;}
 section[data-name="elf_leadership-v2"] .leadership-bottom-graphic {width:140px;}
 section[data-name="elf_leadership-v2"] .leadership-shape {width:190px;height:150px;}
 section[data-name="elf_leadership-v2"] .leadership-modal {padding:32px 14px 28px;}
 section[data-name="elf_leadership-v2"] .leadership-modal-dialog {max-height:calc(100dvh - 60px);border-radius:18px;}
 section[data-name="elf_leadership-v2"] .leadership-modal-layout {padding:55px 24px 30px;}
 section[data-name="elf_leadership-v2"] .leadership-modal-title {font-size:26px;}
 section[data-name="elf_leadership-v2"] .leadership-modal-description {font-size:15px;}
}
@media (prefers-reduced-motion:reduce) {
 section[data-name="elf_leadership-v2"] .leadership-card,
 section[data-name="elf_leadership-v2"] .leadership-modal-dialog {transition:none;}
}

/* Keep the top profile heading and close button reachable with long content. */
section[data-name="elf_leadership-v2"] .leadership-modal-dialog {scroll-padding-top:24px;}
section[data-name="elf_leadership-v2"] .leadership-modal-layout {min-height:0;}
@media (prefers-reduced-motion:reduce) {
 section[data-name="elf_leadership-v2"] .leadership-card-arrow,
 section[data-name="elf_leadership-v2"] .leadership-card-link {transition:none;}
}

/* Keep the no-tabs spacing consistent with the mobile form override. */
@media (max-width: 767px) {
    section[data-name="elf_leadership-v2"] .leadership-filter-form--no-tabs {
        margin-bottom: 0;
    }
}