/* =========================================================
   AAKI GROUP OF COMPANIES - INTERACTIVE ORGANISATION CHART
========================================================= */

.aaki-org-chart {

    /* -----------------------------------
       CORPORATE COLOR PALETTE
    ----------------------------------- */

    --navy: #123247;
    --navy-2: #1b4d68;

    --teal: #247c7a;
    --teal-light: #3f9290;

    --gold: #d6a62a;
    --gold-dark: #b88918;

    --line: #8cabb5;
    --line-light: #c7d7dc;

    --text: #173246;
    --muted: #6c8490;

    --card-bg: #ffffff;
    --page-bg: #ffffff;
  

    width: 100%;

    padding: 45px 0 55px;

    overflow-x: hidden;

    box-sizing: border-box;

    font-family:
        "Arial",
        "Helvetica",
        sans-serif;
}


.aaki-org-chart *,
.aaki-org-chart *::before,
.aaki-org-chart *::after {
    box-sizing: border-box;
}


/* =========================================================
   INNER WRAPPER
========================================================= */

.aaki-org-inner {

    max-width: 1550px;

    margin: 0 auto;

    padding: 0 28px;
}



/* =========================================================
   GENERAL ANIMATION
========================================================= */

.aaki-org-chart .org-box,
.aaki-org-chart .company-card,
.aaki-org-chart .manager-card,
.aaki-org-chart .department,
.aaki-org-chart .department-title,
.aaki-org-chart .employee-card,
.aaki-org-chart .ownership-pill {

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        opacity .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        filter .28s ease;
}



/* =========================================================
   COMMON CARD
========================================================= */

.org-box {

    position: relative;

    border-radius: 12px;

    text-align: center;

    box-shadow:
        0 5px 15px rgba(18, 50, 71, .07);
}


.org-box strong {
    display: block;
}



/* =========================================================
   SHAREHOLDERS
========================================================= */

.shareholders-row {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(260px, 345px)
        minmax(260px, 345px);

    justify-content: center;

    gap: 38px;

    margin-bottom: 27px;
}


.shareholder-card {

    background: var(--card-bg);

    border: 1px solid rgba(36, 124, 122, .38);

    color: var(--text);

    padding: 18px 22px 16px;

    min-height: 68px;

    cursor: default;
}


.shareholder-card strong {

    font-size: 18px;

    margin-bottom: 7px;

    letter-spacing: .15px;
    color:#000;
}


.shareholder-card span {

    font-size: 13px;

    color: var(--muted);

    text-transform: uppercase;
}



/* SHAREHOLDER HOVER */

@media (hover: hover) {

    .shareholder-card:hover {

        transform: translateY(-5px);

        border-color: var(--teal);

        box-shadow:
            0 12px 25px rgba(18, 50, 71, .12);
    }

}



/* =========================================================
   SHAREHOLDER CONNECTORS
========================================================= */

.shareholders-row::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -17px;

    height: 17px;

    border-left: 1px solid var(--line);

    transform: translateX(-50%);
}


.shareholders-connector {

    position: absolute;

    left: 25%;

    right: 25%;

    bottom: -1px;

    height: 16px;

    pointer-events: none;
}


.shareholders-connector::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    border-bottom: 1px solid var(--line);
}


.shareholders-connector::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -14px;

    height: 14px;

    border-left: 1px solid var(--line);
}



/* =========================================================
   OWNERSHIP
========================================================= */

.ownership-row {

    position: relative;

    text-align: center;

    margin-bottom: 23px;
}


.ownership-pill {

    position: relative;

    display: inline-block;

    overflow: hidden;

    min-width: 210px;

    padding: 9px 24px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #d6a62a,
            #e1b942
        );

    color: var(--navy);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .15px;

    box-shadow:
        0 5px 12px rgba(214, 166, 42, .18);
}


.ownership-pill::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 55%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            transparent
        );

    transform: skewX(-20deg);
}


@media (hover: hover) {

    .ownership-pill:hover {

        transform: translateY(-3px);

        box-shadow:
            0 9px 20px rgba(214, 166, 42, .28);
    }


    .ownership-pill:hover::after {
        animation: aakiShine .8s ease;
    }

}


@keyframes aakiShine {

    from {
        left: -100%;
    }

    to {
        left: 160%;
    }

}


.ownership-row::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -23px;

    height: 23px;

    border-left: 1px solid var(--line);
}



/* =========================================================
   COMPANIES
========================================================= */

.companies-row {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(340px, 470px)
        minmax(340px, 470px);

    justify-content: center;

    gap: 52px;

    margin-top: 30px;

    margin-bottom: 40px;
}


.companies-row::before {

    content: "";

    position: absolute;

    top: -30px;

    left: 25%;

    right: 25%;

    border-top: 1px solid var(--line);
}


.company-card {

    position: relative;

    color: #ffffff;

    padding: 20px 22px 15px;

    min-height: 76px;

    border-radius: 11px;

    box-shadow:
        0 7px 18px rgba(18, 50, 71, .12);
}


.company-card.environment {

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );
}


.company-card.consultancy {

    background:
        linear-gradient(
            135deg,
            #247c7a,
            #318d8a
        );
}


.company-card strong {

    font-size: 15px;

    line-height: 1.35;

    letter-spacing: .1px;
    color: #fff;
}


.company-card span {

    display: block;

    margin-top: 10px;

    font-size: 13px;

    opacity: .82;

    text-transform: uppercase;
}


.company-card::before {

    content: "";

    position: absolute;

    left: 50%;

    top: -30px;

    height: 30px;

    border-left: 1px solid var(--line);
}


@media (hover: hover) {

    .company-card:hover {

        transform:
            translateY(-5px)
            scale(1.01);

        box-shadow:
            0 15px 30px rgba(18, 50, 71, .18);
    }

}



/* JOIN COMPANIES */

.company-bottom-line {

    position: absolute;

    left: 25%;

    right: 25%;

    bottom: -1px;

    border-bottom: 1px solid var(--line);
}


.companies-row::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -21px;

    height: 21px;

    border-left: 1px solid var(--line);
}



/* =========================================================
   MANAGER
========================================================= */

.manager-row {

    position: relative;

    text-align: center;

    margin-bottom: 43px;
}


.manager-card {

    position: relative;

    display: inline-block;

    min-width: 350px;

    max-width: 430px;

    padding: 16px 27px 14px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #e1b63a
        );

    color: var(--navy);

    box-shadow:
        0 8px 18px rgba(214, 166, 42, .17);
}


.manager-card strong {

    display: block;

    font-size: 16px;

    margin-bottom: 7px;
    color: var(--navy);
}


.manager-card span {

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;
}


.manager-row::before {

    content: "";

    position: absolute;

    left: 50%;

    top: -21px;

    height: 21px;

    border-left: 1px solid var(--line);
}


.manager-row::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -43px;

    height: 43px;

    border-left: 1px solid var(--line);
}


@media (hover: hover) {

    .manager-card:hover {

        transform:
            translateY(-5px)
            scale(1.015);

        box-shadow:
            0 14px 28px rgba(214, 166, 42, .25);
    }

}



/* =========================================================
   DEPARTMENT SECTION
========================================================= */

.departments-wrap {

    position: relative;

    padding-top: 20px;
}


.departments-wrap::before {

    content: "";

    position: absolute;

    top: 0;

    left: 6.6%;

    right: 6.6%;

    border-top: 1px solid var(--line);
}


.departments-grid {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(145px, 1fr));

    gap: 12px;

    align-items: start;
}



/* =========================================================
   INDIVIDUAL DEPARTMENT
========================================================= */

.department {

    position: relative;

    min-width: 0;

    border-radius: 10px;
}


.department::before {

    content: "";

    position: absolute;

    left: 50%;

    top: -20px;

    height: 20px;

    border-left: 1px solid var(--line);
}



/* =========================================================
   DEPARTMENT TITLE
========================================================= */

.department-title {

    position: relative;

    min-height: 58px;

    padding: 17px 9px;

    border-radius: 9px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            var(--teal),
            var(--teal-light)
        );

    color: #ffffff;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .15px;

    cursor: pointer;

    box-shadow:
        0 6px 16px rgba(36, 124, 122, .15);
}


.department.accounts .department-title {

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );
}



/* CONNECTOR DOT */

.department-title::after {

    content: "";

    position: absolute;

    left: 50%;

    top: -24px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--teal);

    border: 2px solid var(--page-bg);

    transform: translateX(-50%);
}


.department.accounts .department-title::after {

    background: var(--navy);
}



/* DEPARTMENT HOVER */

@media (hover: hover) {

    .department:hover .department-title {

        transform: translateY(-4px);

        filter: brightness(1.05);

        box-shadow:
            0 12px 24px rgba(18, 50, 71, .17);
    }


    .departments-grid:has(.department:hover)
    .department:not(:hover) {

        opacity: .48;
    }


    .departments-grid:has(.department:hover)
    .department:hover {

        opacity: 1;
    }

}



/* =========================================================
   EMPLOYEE LIST
========================================================= */

.employee-list {

    position: relative;

    padding-top: 11px;
}


.employee-list::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    bottom: 0;

    border-left: 1px solid var(--line-light);

    z-index: 0;
}



/* =========================================================
   EMPLOYEE CARD
========================================================= */

.employee-card {

    position: relative;

    z-index: 1;

    min-height: 50px;

    margin-bottom: 8px;

    padding: 9px 7px 8px 13px;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, .98);

    border:
        1px solid rgba(140, 171, 181, .16);

    text-align: center;

    cursor: default;

    box-shadow:
        0 4px 12px rgba(18, 50, 71, .055);
}


.employee-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    bottom: 4px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            var(--teal),
            var(--teal-light)
        );
}



/* HELPER / SUPPORT */

.employee-card.helper::before,
.employee-card.support::before {

    background:
        linear-gradient(
            180deg,
            var(--gold),
            var(--gold-dark)
        );
}



/* EMPLOYEE TEXT */

.employee-card strong {

    display: block;

    color: var(--text);

    font-size: 13px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .1px;

    text-transform: uppercase;

    transition: color .25s ease;
}


.employee-card span {

    display: block;

    margin-top: 5px;

    color: var(--navy);

    font-size: 12px;

    line-height: 1.35;

    text-transform: uppercase;
}



/* EMPLOYEE HOVER */

@media (hover: hover) {

    .employee-card:hover {

        z-index: 10;

        transform:
            translateY(-3px)
            scale(1.018);

        border-color:
            rgba(36, 124, 122, .28);

        box-shadow:
            0 10px 22px rgba(18, 50, 71, .11);
    }


    .employee-card:hover strong {

        color: var(--teal);
    }


    .employee-card.helper:hover,
    .employee-card.support:hover {

        border-color:
            rgba(214, 166, 42, .42);
    }


    .employee-card.helper:hover strong,
    .employee-card.support:hover strong {

        color: var(--gold-dark);
    }

}



/* =========================================================
   MOBILE ACCORDION ICON
========================================================= */

.department-toggle-icon {

    display: none;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    flex: 0 0 28px;

    margin-left: 12px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .15);

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    transition:
        transform .3s ease,
        background-color .3s ease;
}



/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

@keyframes aakiFadeUp {

    from {

        opacity: 0;

        transform: translateY(16px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }

}


.aaki-org-chart.aaki-loaded
.shareholder-card,

.aaki-org-chart.aaki-loaded
.ownership-pill,

.aaki-org-chart.aaki-loaded
.company-card,

.aaki-org-chart.aaki-loaded
.manager-card,

.aaki-org-chart.aaki-loaded
.department {

    animation:
        aakiFadeUp
        .55s
        cubic-bezier(.2,.8,.2,1)
        both;
}


.aaki-org-chart.aaki-loaded
.shareholder-card:nth-child(1) {
    animation-delay: .04s;
}


.aaki-org-chart.aaki-loaded
.shareholder-card:nth-child(2) {
    animation-delay: .09s;
}


.aaki-org-chart.aaki-loaded
.ownership-pill {
    animation-delay: .14s;
}


.aaki-org-chart.aaki-loaded
.company-card:nth-child(1) {
    animation-delay: .20s;
}


.aaki-org-chart.aaki-loaded
.company-card:nth-child(2) {
    animation-delay: .25s;
}


.aaki-org-chart.aaki-loaded
.manager-card {
    animation-delay: .30s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(1) {
    animation-delay: .34s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(2) {
    animation-delay: .39s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(3) {
    animation-delay: .44s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(4) {
    animation-delay: .49s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(5) {
    animation-delay: .54s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(6) {
    animation-delay: .59s;
}


.aaki-org-chart.aaki-loaded
.department:nth-child(7) {
    animation-delay: .64s;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .aaki-org-inner {

        padding-left: 20px;

        padding-right: 20px;
    }


    .departments-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 25px 15px;
    }


    .departments-wrap::before,
    .manager-row::after,
    .department::before,
    .department-title::after {

        display: none;
    }


    .departments-wrap {

        padding-top: 0;
    }


    .department-title {

        font-size: 12px;
    }


    .employee-card strong {

        font-size: 10px;
    }


    .employee-card span {

        font-size: 8px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aaki-org-chart {

        padding:
            30px 0
            38px;
    }


    .aaki-org-inner {

        padding:
            0 15px;
    }



    /* SHAREHOLDERS */

    .shareholders-row {

        grid-template-columns:
            1fr;

        gap: 12px;

        margin-bottom: 18px;
    }


    .shareholders-row::after,
    .shareholders-connector {

        display: none;
    }


    .shareholder-card {

        min-height: auto;

        padding:
            15px 16px;
    }



    /* OWNERSHIP */

    .ownership-row {

        margin:
            15px 0
            18px;
    }


    .ownership-row::after {

        height: 18px;

        bottom: -18px;
    }


    .ownership-pill {

        min-width: 0;

        max-width: 100%;

        padding:
            9px 18px;

        font-size: 8px;
    }



    /* COMPANIES */

    .companies-row {

        grid-template-columns:
            1fr;

        gap: 12px;

        margin-top: 28px;

        margin-bottom: 22px;
    }


    .companies-row::before,
    .companies-row::after,
    .company-card::before,
    .company-bottom-line {

        display: none;
    }


    .company-card {

        min-height: auto;

        padding:
            18px 15px
            14px;
    }


    .company-card strong {

        font-size: 13px;
        color:#000;
    }



    /* MANAGER */

    .manager-row {

        margin-bottom: 28px;
    }


    .manager-row::before,
    .manager-row::after {

        display: none;
    }


    .manager-card {

        width: 100%;

        min-width: 0;

        max-width: none;

        padding:
            15px;
    }


    .manager-card strong {

        font-size: 14px;
    }



    /* DEPARTMENTS */

    .departments-grid {

        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .department {

        width: 100%;
    }


    .department-title {

        min-height: 55px;

        padding:
            13px 15px;

        justify-content:
            space-between;

        text-align: left;

        font-size: 12px;
    }


    .department-toggle-icon {

        display: flex;
    }


    .department.is-open
    .department-toggle-icon {

        transform:
            rotate(45deg);

        background:
            rgba(255,255,255,.25);
    }



    /* COLLAPSIBLE EMPLOYEE LIST */

    .department .employee-list {

        max-height: 0;

        padding-top: 0;

        opacity: 0;

        overflow: hidden;

        visibility: hidden;

        transition:
            max-height .45s ease,
            opacity .28s ease,
            padding .35s ease,
            visibility .28s ease;
    }


    .department.is-open
    .employee-list {

        max-height: 3000px;

        padding-top: 9px;

        opacity: 1;

        visibility: visible;
    }


    .employee-list::before {

        left: 14px;
    }


    .employee-card {

        min-height: 54px;

        margin-bottom: 8px;

        padding:
            10px 9px
            9px 15px;
    }


    .employee-card strong {

        font-size: 10px;
    }


    .employee-card span {

        font-size: 8px;
    }

}



/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .company-card strong {

        font-size: 12px;
    }


    .manager-card strong {

        font-size: 13px;
    }


    .department-title {

        font-size: 11px;
    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.department-title:focus-visible {

    outline:
        3px solid
        rgba(214, 166, 42, .65);

    outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

    .aaki-org-chart *,
    .aaki-org-chart *::before,
    .aaki-org-chart *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================
   AAKI ORGANISATION CHART
   FRONTEND COLUMN HOVER FIX
========================================== */

@media (hover: hover) and (min-width: 768px) {

    .aaki-org-chart .departments-grid:hover
    > .department {
        opacity: 0.48 !important;
        transition: opacity 0.3s ease !important;
    }

    .aaki-org-chart .departments-grid
    > .department:hover {
        opacity: 1 !important;
    }

    .aaki-org-chart .department:hover
    .department-title {
        filter: brightness(1.08);
    }

}