/* =========================================================
   Our Team page only (resources/views/our-team.blade.php)
   Every rule is scoped to .brx-tm. Section titles use the home
   page's .section-title-8-wrapper from style.css.
   ========================================================= */

.brx-tm {
    --tm-teal: var(--secondary, #2F6662);
    --tm-deep: #0f2423;
    --tm-lime: var(--green, #85EE00);
    --tm-ink: #151515;
    --tm-muted: #5d6270;
    --tm-line: rgba(19, 19, 46, .1);
    --tm-soft: #f1f4f3;
    font-family: var(--font_dmsans, "DM Sans", sans-serif);
}

.brx-tm * {
    box-sizing: border-box;
}

.brx-tm section {
    position: relative;
    padding: 110px 0;
}

.brx-tm__wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- shared ---------- */
.brx-tm .section-title-8-wrapper .title {
    margin-bottom: 0;
}

.brx-tm .title mark {
    background: linear-gradient(transparent 62%, var(--tm-lime) 62%, var(--tm-lime) 92%, transparent 92%);
    color: inherit;
    padding: 0 4px;
}

.brx-tm__head-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 56px;
}

.brx-tm__lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--tm-muted);
}

.brx-tm__lead--center {
    max-width: 680px;
    margin: 22px auto 56px;
    text-align: center;
}

.brx-tm.has-js .brx-tm__reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.brx-tm.has-js .brx-tm__reveal.is-in {
    opacity: 1;
    transform: none;
}

.brx-tm a:focus-visible {
    outline: 3px solid var(--tm-lime);
    outline-offset: 4px;
}

/* ---------- 1. Leadership ---------- */
.brx-tm__intro {
    background: #fff;
    padding-bottom: 30px !important;
}

.brx-tm__intro .brx-tm__head-row {
    margin-bottom: 0;
}

/* one full section per leader */
.brx-tm__leader {
    overflow: hidden;
    padding: 120px 0 !important;
}

.brx-tm__leader--dark {
    background:
        radial-gradient(circle at 85% 20%, rgba(47, 102, 98, .55), transparent 55%),
        var(--tm-deep);
}

.brx-tm__leader--light {
    background: #fff;
}

.brx-tm__leader--soft {
    background: var(--tm-soft);
}

.brx-tm__ghost {
    position: absolute;
    right: -1%;
    bottom: -4%;
    font-family: var(--font_outfit, sans-serif);
    font-size: clamp(120px, 17vw, 280px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(47, 102, 98, .12);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.brx-tm__leader--dark .brx-tm__ghost {
    -webkit-text-stroke-color: rgba(255, 255, 255, .07);
}

.brx-tm__leader--flip .brx-tm__ghost {
    right: auto;
    left: -1%;
}

.brx-tm__leader-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 96px;
    align-items: center;
}

.brx-tm__leader--flip .brx-tm__leader-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.brx-tm__leader--flip .brx-tm__leader-media {
    order: 2;
}

.brx-tm__leader-media {
    position: relative;
}

.brx-tm__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* initials portrait: teal with a faint tile grid */
    background:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 64px 64px,
        radial-gradient(circle at 30% 20%, #3c7d78, var(--tm-teal) 45%, #163a37);
    box-shadow: 0 40px 90px rgba(15, 36, 35, .22);
}

.brx-tm__leader--dark .brx-tm__portrait {
    box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
}

/* a transparent cutout keeps the teal background */
.brx-tm__portrait.has-photo:not(.is-cutout) {
    background: var(--tm-soft);
}

.brx-tm__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

/* transparent cutout: enlarged and centred so the figure fills the frame, head near the top,
   cropped around mid-thigh. Defaults fit MAYUR-SUITE.png; other photos set their own
   --cut-top / --cut-left / --cut-width (from 'cutout' in our-team.blade.php) so every head
   sits at the same height and size */
.brx-tm__portrait.is-cutout img {
    inset: var(--cut-top, 7%) auto auto var(--cut-left, -15%);
    width: var(--cut-width, 130%);
    max-width: none;
    height: auto;
    transform-origin: 50% 0;
}

.brx-tm__leader-media:hover .brx-tm__portrait img {
    transform: scale(1.04);
}

.brx-tm__initials {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(133, 238, 0, .55);
    font-family: var(--font_outfit, sans-serif);
    font-size: clamp(56px, 6.4vw, 104px);
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
}

.brx-tm__initials::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
}

.brx-tm__tag {
    position: absolute;
    left: 24px;
    top: 24px;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--tm-lime);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #13132E;
}

.brx-tm__badge {
    position: absolute;
    right: -34px;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: var(--tm-lime);
    color: #13132E;
    box-shadow: 0 20px 50px rgba(15, 36, 35, .25);
}

.brx-tm__leader--flip .brx-tm__badge {
    right: auto;
    left: -34px;
}

.brx-tm__badge strong {
    font-family: var(--font_outfit, sans-serif);
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
}

.brx-tm__badge span {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.brx-tm__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-teal);
}

.brx-tm__kicker::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--tm-lime);
}

.brx-tm__name {
    margin: 22px 0 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: clamp(44px, 5.2vw, 80px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.brx-tm__name span {
    display: block;
    color: var(--tm-teal);
}

.brx-tm__leader-body p {
    margin: 26px 0 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--tm-muted);
}

.brx-tm__leader-body p + p {
    margin-top: 14px;
}

.brx-tm__focus {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brx-tm__focus li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid var(--tm-line);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tm-ink);
}

.brx-tm__focus li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-lime);
}

.brx-tm__sign {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
}

.brx-tm__sign-line {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--tm-line);
    background:
        linear-gradient(var(--tm-teal), var(--tm-teal)) center / 22px 2px no-repeat;
}

.brx-tm__sign strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font_outfit, sans-serif);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--tm-ink);
}

.brx-tm__sign > span:last-child {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tm-muted);
}

/* dark variant (last leader section) */
.brx-tm__leader--dark .brx-tm__kicker {
    color: var(--tm-lime);
}

.brx-tm__leader--dark .brx-tm__name {
    color: #fff;
}

.brx-tm__leader--dark .brx-tm__name span {
    color: var(--tm-lime);
}

.brx-tm__leader--dark .brx-tm__leader-body p,
.brx-tm__leader--dark .brx-tm__sign > span:last-child {
    color: rgba(255, 255, 255, .72);
}

.brx-tm__leader--dark .brx-tm__focus li {
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.brx-tm__leader--dark .brx-tm__sign strong {
    color: #fff;
}

.brx-tm__leader--dark .brx-tm__sign-line {
    border-color: rgba(255, 255, 255, .2);
    background: linear-gradient(var(--tm-lime), var(--tm-lime)) center / 22px 2px no-repeat;
}
/* ---------- 2. Teams ---------- */
.brx-tm__teams {
    background: var(--tm-soft);
}

.brx-tm__teams-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.brx-tm__team {
    position: relative;
    min-height: 440px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--tm-deep);
}

.brx-tm__team img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.brx-tm__team::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 36, 35, 0) 30%, rgba(15, 36, 35, .92) 100%);
}

.brx-tm__team:hover img {
    transform: scale(1.07);
}

.brx-tm__team-body {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px;
}

.brx-tm__team-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tm-lime);
    color: #13132E;
    font-size: 20px;
}

.brx-tm__team h3 {
    margin: 16px 0 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.brx-tm__team p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* ---------- 3. CTA ---------- */
.brx-tm__cta {
    /* light grey band, same as the footer area below and the other page CTAs */
    background: #f1f1f1;
}

.brx-tm__cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 64px;
    border-radius: 32px;
    background: var(--tm-teal);
    overflow: hidden;
}

.brx-tm__cta-box::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

.brx-tm__cta-box > * {
    position: relative;
}

.brx-tm__cta-box h2 {
    margin: 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.1;
    font-weight: 600;
    color: #fff;
}

.brx-tm__cta-box p {
    margin: 14px 0 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.brx-tm__cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex-shrink: 0;
}

.brx-tm__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.brx-tm__btn:hover {
    transform: translateY(-3px);
}

.brx-tm__btn--lime {
    background: var(--tm-lime);
    color: #13132E;
}

.brx-tm__btn--lime:hover {
    background: #fff;
    color: #13132E;
}

.brx-tm__btn--ghost {
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.brx-tm__btn--ghost:hover {
    background: #fff;
    color: var(--tm-teal);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .brx-tm.has-js .brx-tm__reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .brx-tm__portrait img,
    .brx-tm__team img {
        transition: none;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .brx-tm section {
        padding: 90px 0;
    }

    .brx-tm__leader-grid,
    .brx-tm__leader--flip .brx-tm__leader-grid {
        gap: 60px;
    }

    .brx-tm__teams-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brx-tm__team {
        min-height: 380px;
    }
}

@media (max-width: 991px) {
    .brx-tm__head-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .brx-tm__leader {
        padding: 90px 0 !important;
    }

    .brx-tm__leader-grid,
    .brx-tm__leader--flip .brx-tm__leader-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .brx-tm__leader--flip .brx-tm__leader-media {
        order: 0;
    }

    .brx-tm__leader-media {
        width: 100%;
        max-width: 520px;
    }

    .brx-tm__cta-box {
        display: block;
        padding: 52px 34px;
    }

    .brx-tm__cta-btns {
        margin-top: 28px;
    }
}

@media (max-width: 575px) {
    .brx-tm section {
        padding: 70px 0;
    }

    .brx-tm__wrap {
        padding: 0 16px;
    }

    .brx-tm__teams-grid {
        grid-template-columns: 1fr;
    }

    .brx-tm__leader {
        padding: 70px 0 !important;
    }

    .brx-tm__portrait {
        border-radius: 24px;
    }

    .brx-tm__badge,
    .brx-tm__leader--flip .brx-tm__badge {
        right: 14px;
        left: auto;
        bottom: -30px;
        width: 100px;
        height: 100px;
    }

    .brx-tm__badge strong {
        font-size: 32px;
    }

    .brx-tm__leader-body p {
        font-size: 16.5px;
    }

    .brx-tm__team {
        min-height: 320px;
    }

    .brx-tm__cta-box {
        padding: 42px 22px;
        border-radius: 24px;
    }

    .brx-tm__btn {
        width: 100%;
        justify-content: center;
    }
}