:root {
    --bg: #F2EFE8;          /* warm panel from reference */
    --ink: #1F2687;         /* illustration navy */
    --card: #7FA3F7;        /* hover card blue */
    --card-name: #16208A;   /* name on card */
    --card-text: #FFFFFF;
    --face: #FFFFFF;

    --cols: 6;
    --gap-x: clamp(10px, 1.8vw, 22px);
    --gap-y: clamp(14px, 2.4vw, 30px);
    --max: 1040px;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

.team {
    padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 48px);
    padding-inline: 0;
    padding-bottom: 2%;
}
.team .hero__title {
    font-family: var(--fontDisplay);
    font-size: 71.696px;
    font-style: normal;
    font-weight: 100;
    line-height: 108%;
    letter-spacing: 0.717px;
    text-align: center;
    margin-bottom: 50px;
    padding-inline: 20px;
}
.team .hero__title strong {
    font-family: var(--fontFrank);
    letter-spacing: 0.717px;
}
  .team__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--max);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;      /* short last row sits centred, as in the reference */
    gap: var(--gap-y) var(--gap-x);
  }
  .member {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    aspect-ratio: 5 / 6.2;
    position: relative;
  }


  .member__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .18s ease;
  }
  img.member__art { object-fit: cover; }
  .member { cursor: pointer; border-radius: 6px; outline: none; overflow: hidden; }
  .member:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* Hidden radio drives the tap/keyboard state — no JavaScript needed */
  .member__toggle {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
  }
  .member__label {
    position: absolute; inset: 0; display: block; cursor: pointer; border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .member__toggle:focus-visible + .member__label { outline: 2px solid var(--ink); outline-offset: 4px; }

  /* Hover card — occupies the portrait's footprint */
.member__card {
    position: absolute;
    inset: 0 6%;
    background: var(--card);
    border-radius: 5px;
    padding: 12% 8% 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--card-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
    container-type: inline-size;
    width: 100%;
    left: 0;
}
.member__name {
    margin: 0;
    font-weight: 900;
    color: var(--card-name);
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0;
}
  .member__title {
    font-size: 11px;
    line-height: 1.3;
    margin: 8cqi 0 0;
    font-weight: 500;
  }
.member__phone, .member__email {
    font-size: 11px;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
    word-break: break-word;
}
  .member__phone { margin-top: 8cqi; }
  .member__email { margin-top: 8cqi; }
  .member__phone:hover, .member__email:hover { text-decoration: underline; }
  .member__li {
    margin-top: auto;
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: inherit;
  }
  .member__li svg { width: 100%; height: 100%; }
  .member__card a:focus-visible { outline: 1.5px solid #fff; outline-offset: 2px; border-radius: 2px; }

  .member:hover .member__art,
  .member:focus-within .member__art { opacity: 0; }
  .member:hover .member__card,
  .member:focus-within .member__card {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility 0s;
  }
/* Close button: only on touch screens, where there is no hover-out */
  .member__close {
    display: none;
    position: absolute; top: 2px; right: 4px;
    width: 24px; height: 24px;
    align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; color: #fff; cursor: pointer;
  }
  @media (hover: none) {
    .member__close { display: flex; }
    /* on touch, only the tapped card opens (ignore sticky :hover / focus) */
    .member:hover .member__art, .member:focus-within .member__art { opacity: 1; }
    .member:hover .member__card, .member:focus-within .member__card { opacity: 0; visibility: hidden; }
    .member__toggle:checked + .member__label .member__art { opacity: 0; }
    .member__toggle:checked ~ .member__card { opacity: 1; visibility: visible; }
  }
  
  /* Responsive column counts */
  @media (max-width: 960px) { :root { --cols: 4; } }
  @media (max-width: 767px) { :root { --cols: 3; } }
  @media (max-width: 480px) { :root { --cols: 2; } }

  @media (prefers-reduced-motion: reduce) {
    .member__art, .member__card { transition: none !important; }
  }

/* work clients section */
.workClient.top-jobs {
    padding-block: 65px 80px;
    overflow: hidden;
}

.workClient.top-jobs .container {
    max-width: 100%;
}

.workClient.top-jobs .top-jobs__wrapper {
    grid-template-columns: 260px calc(100% - 275px);
}

.workClient.top-jobs .job-card {
    justify-content: center;
    padding: 32px 15px 28px 30px;
}

.workClient.top-jobs .section-title {
    font-family: var(--fontDisplay);
    font-size: 35.155px;
    font-weight: 100;
    line-height: 109%;
    max-width: 225px;
    margin-left: auto;
}

.workClient.top-jobs .jobs-slider {
    display: flex;
    align-items: center;
    gap: 32px;
}

.workClient.top-jobs .job-card .workQuote {
    max-width: 20px;
}

.workClient.top-jobs .job-card__description {
    font-size: 16px;
    font-weight: 300;
    line-height: 151%;
    letter-spacing: 0.16px;
    margin-block: 18px 20px;
    max-height: 245px;
    overflow: auto;
    padding-right: 12px;
}

.workClient.top-jobs .clientName {
    font-size: 14px;
    font-weight: 500;
    line-height: 136%;
    letter-spacing: 1.68px;
    text-transform: uppercase;
}

/* responsive css start here */

@media(max-width:1279px) {
    /*work top job section*/
    .workClient.top-jobs .top-jobs__wrapper {
        grid-template-columns: 200px calc(100% - 215px);
    }
}

@media(max-width:989px) {

    /* work top job section */
    .workClient.top-jobs {
        padding-block: 60px 70px;
    }

    .workClient.top-jobs .jobs-slider {
        gap: 22px;
    }

    /*team section*/
.team .hero__title {
    font-size: 55px;
    margin-bottom: 30px;
}
}

@media(max-width:749px) {

    /* work top jobs section */
    .workClient.top-jobs {
        padding-block: 50px 50px;
    }

    .workClient.top-jobs .section-title {
        margin-inline: auto;
        font-size: 25px;
    }

    .workClient.top-jobs .job-card__description {
        font-size: 14px;
        max-height: 190px;
    }

    .workClient.top-jobs .clientName {
        font-size: 12px;
    }

    .workClient.top-jobs .job-card {
        padding: 20px;
    }

    .workClient.top-jobs .jobs-slider {
        gap: 15px;
    }

    .workClient.top-jobs .top-jobs__wrapper {
        gap: 30px;
    }

    /*team page*/
    .member__card {
    padding: 7%;
}
.member__title, .member__phone, .member__email {
    font-size: 10px;
    margin-top: 7cqi;
}
.member__name {
    font-size: 18px;
    line-height: 19px;
}
.team .hero__title {
    font-size: 35px;
    letter-spacing: 0.35px;
    margin-bottom: 25px;
}
    
}

@media(max-width:389px) {

    /* work top jobs section */
    .workClient.top-jobs .job-card__description {
        font-size: 13px;
    }

    .workClient.top-jobs .clientName {
        font-size: 11px;
    }

    /*team*/
.team .hero__title {
    font-size: 30px;
}
}