/* TOP page sections, diagrams and scroll stacking. Includes the current FV/about design. */
.section-band--services {
    background: var(--navy);
}

.section-band--company {
    background: var(--color-surface-top);
    isolation: isolate;
    overflow: hidden;
}

.section-band--hero .section-inner {
    max-width: none;
}

.photo--hero>img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.strength__index small {
    font-family: var(--font-heading);
}

.photo--about {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 661/749;
    margin-top: 0;
}

.photo--about img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.strength-intro {
    display: grid;
    grid-template-columns: 38.1% 29.7% 24.6%;
    gap: 3.8%;
    padding: 0 7.88% 158px;
    margin-top: -76px;
    align-items: start;
    position: relative;
}

.strength-intro__heading {
    padding-top: 177px;
}

.strength-intro .eyebrow {
    line-height: 1.4;
}

.strength-intro h2 {
    font-size: clamp(1.75rem, 3.125vw, 2.8125rem);
    line-height: 1.696;
    margin-top: 25px;
    white-space: nowrap;
}

.strength-intro__copy {
    font-size: clamp(1rem, 1.751vw, 1.5756875rem);
    line-height: 1.9;
    padding-top: 228px;
    white-space: nowrap;
}

.photo--intro {
    aspect-ratio: 301.05/454.542;
    margin-top: 9px;
}

.photo--intro>img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.section-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: #c8dbf6;
}

.strength {
    display: grid;
    grid-template-columns: 84px minmax(0, 482fr) minmax(0, 735fr);
    column-gap: 60px;
    padding-left: 5.104%;
    padding-right: 0;
    align-items: start;
}

.strength--divisions {
    padding-top: 190px;
    padding-bottom: 109px;
}

.strength--locations {
    padding-top: 95px;
    padding-bottom: 150px;
}

.strength--ai {
    padding-top: 39px;
    padding-bottom: 80px;
    padding-right: 9%;
    column-gap: 60px;
    grid-template-columns: 84px minmax(0, 457fr) minmax(0, 605fr);
}

.strength__index {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
    font-size: 3.375rem;
    line-height: 1.2;
}

.strength__index>.index-rule {
    display: block;
    width: 1px;
    height: 97px;
    background: #c5d3df;
    margin-left: 25px;
}

.strength__index small {
    writing-mode: vertical-rl;
    font-size: 0.946875rem;
    letter-spacing: 0.215625rem;
    line-height: 1;
    margin-left: 21px;
}

.strength__copy h2 {
    font-size: clamp(1.75rem, 3.125vw, 2.8125rem);
    line-height: 1.5;
    margin-bottom: 33px;
}

.strength__copy h3 {
    font-size: clamp(1.25rem, 2.292vw, 2.0625rem);
    line-height: 1.5;
    margin-bottom: 30px;
    letter-spacing: -.025em;
}

.strength__copy>p {
    font-size: clamp(0.9375rem, 1.354vw, 1.21875rem);
    line-height: 1.75;
    max-width: 100%;
}

.strength__copy mgt-button {
    margin-top: 90px;
    max-width: 367.5px;
}

.strength--locations .strength__copy>p {
    font-size: clamp(0.9375rem, 1.458vw, 1.3125rem);
    line-height: 1.8;
}

.strength--locations .strength__copy h3 {
    margin-bottom: 58px;
}

.strength--locations .strength__copy mgt-button {
    margin-top: 66px;
}

.strength--ai .strength__copy {
    padding-top: 31px;
}

.strength--ai .strength__index {
    padding-top: 30px;
}

.strength--ai .strength__copy h2 {
    font-size: clamp(1.75rem, 3.438vw, 3.09375rem);
    margin-bottom: 11px;
}

.strength--ai .strength__copy mgt-button {
    margin-top: 58px;
}

.strength .button {
    font-size: 0.75rem;
    padding-inline: 42px 38px;
}

.service-grid .button {
    font-size: 0.75rem;
    padding-inline: 25px 18px;
}

/* Centre the diagram on the copy block beside it; it may overhang into the section padding. */
.division-visual {
    position: relative;
    align-self: stretch;
}

.division-visual .division-image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.division-image {
    display: block;
    width: 100%;
    height: auto;
}

.division-diagram {
    width: 750px;
    height: 480px;
    font-size: 1.21875rem;
}

.division-ring {
    position: absolute;
    left: 99px;
    top: 81px;
}

.division-node {
    position: absolute;
    width: 205.5px;
    height: 205.5px;
}

.division-node>img {
    position: absolute;
    inset: 0;
}

.division-node strong {
    position: absolute;
    top: 117px;
    left: 10.5px;
    width: 184.5px;
    text-align: center;
    line-height: 1.7671875rem;
    font-size: 1.21875rem;
}

.division-node--system {
    left: 181.5px;
    top: 0;
}

.division-node--consult {
    left: 0;
    top: 238.5px;
}

.division-node--marketing {
    left: 388.5px;
    top: 237px;
}

.system-icon {
    position: absolute;
    left: 75.5px;
    top: 42px;
    width: 56px;
    height: 60px;
}

.system-icon img {
    position: absolute;
    width: 56px;
    height: 36px;
}

.system-icon img:nth-child(2) {
    top: 12px;
}

.system-icon img:nth-child(3) {
    top: 24px;
}

.people-icon {
    position: absolute;
    top: 46.5px;
    left: 64px;
    display: flex;
    align-items: center;
    gap: 0;
}

.people-icon span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.people-icon span:nth-child(2) {
    transform: translateY(-6px);
}

.people-icon span:nth-child(3) {
    transform: translateY(3px);
}

.people-icon span>img:last-child {
    height: 24px;
    width: 30px;
}

.bars-icon {
    position: absolute;
    top: 42px;
    left: 51px;
    display: flex;
    align-items: end;
    gap: 6px;
    height: 49.5px;
}

.bars-icon i {
    width: 12px;
    height: 22.5px;
    border: 1px solid #000;
    background: #fff;
}

.bars-icon i:nth-child(2) {
    height: 36px;
}

.bars-icon i:nth-child(3) {
    height: 49.5px;
}

.division-center {
    position: absolute;
    left: 183px;
    top: 219px;
    width: 216px;
    text-align: center;
}

.division-center strong {
    display: block;
    font-size: 2.625rem;
    line-height: 3.15rem;
}

.division-center small {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-top: 6px;
}

.division-note {
    position: absolute;
    line-height: 1.65;
}

.division-note--system {
    left: 427.5px;
    top: 33px;
}

.division-note--consult {
    left: 216px;
    top: 375px;
}

.division-note--marketing {
    left: 585px;
    top: 375px;
    font-size: 1.078125rem;
}

.locations-visual {
    margin-top: -27px;
}

.locations-image {
    display: block;
    width: 100%;
    height: auto;
}

.photo--ai {
    aspect-ratio: 604.8/664.35;
}

.photo--ai img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.services {
    padding: 129px 3.5% 140px 5.7%;
    color: #fff;
    background: var(--navy);
}

.services__heading {
    display: grid;
    grid-template-columns: 31.5% 1fr;
    gap: 0;
    margin-bottom: 106px;
}

.services h2 {
    font-size: clamp(1.75rem, 3.405vw, 3.0643125rem);
    line-height: 1.4;
}

.services__heading>p {
    font-size: clamp(1.0625rem, 1.639vw, 1.4754375rem);
    line-height: 1.65;
}

.service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1fr) 7px minmax(0, 1fr);
    gap: 3.6%;
}

.service-grid article {
    display: flex;
    flex-direction: column;
}

.service-number {
    display: block;
    font-size: 2.213125rem;
    line-height: 1.1;
}

.service-grid h3 {
    font-size: clamp(1.1875rem, 2.144vw, 1.6rem);
    line-height: 1.5;
    white-space: nowrap;
}

.service-grid p {
    font-size: clamp(0.9375rem, 1.513vw, 1.3619375rem);
    line-height: 1.72;
    margin-top: 33px;
    flex: 1;
}

.service-grid mgt-button {
    margin-top: 58px;
    max-width: 304px;
}

.service-grid .button {
    min-height: 69px;
}

.service-divider {
    display: block;
    height: 453px;
    width: 1px;
    max-height: 100%;
    justify-self: center;
    background: #91a3b5;
}

.news {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    column-gap: 4%;
    row-gap: 40px;
    align-content: center;
    padding: 94px 5.98% 97px;
}

.news h2 {
    font-size: clamp(1.75rem, 2.988vw, 2.6888125rem);
    line-height: 1.4;
    margin-top: 30px;
}

.news mgt-button {
    grid-column: 1;
    max-width: 237px;
}

.news .button {
    min-height: 64px;
}

.news-list {
    grid-column: 2;
    grid-row: 1/3;
}

.news-list a {
    display: grid;
    grid-template-columns: 15% 104px minmax(0, 1fr) 15px;
    align-items: start;
    gap: 12px;
    padding: 0 9px 28px;
    font-size: 0.75rem;
    line-height: 1.5;
}

.news-list li+li a {
    padding-top: 31px;
}

.news-list strong {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.news-category {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    background: #f0f0f0;
    color: var(--ink);
    width: 104px;
    max-width: 100%;
    padding: 3px 8px;
    justify-self: start;
}

.news-list a>img {
    width: 15px;
    height: 24px;
    margin-top: 6px;
}

.news-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: #e1e5e8;
}

.company {
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    gap: 3.5%;
    align-items: center;
    padding: 177px 6.3% 189px;
    position: relative;
    background: transparent;
    overflow: visible;
}

.company__background {
    position: absolute;
    right: -2px;
    top: -22.5px;
    transform: scaleX(-1);
    mask-image: url('../images/7e5bc.svg');
    mask-size: 830px 830px;
    mask-repeat: no-repeat;
    mask-position: 2.093px 0;
    z-index: -1;
}

.company h2 {
    font-size: clamp(1.75rem, 3.262vw, 2.9359375rem);
    line-height: 1.4;
}

.company p {
    font-size: clamp(0.9375rem, 1.72vw, 1.5480625rem);
    line-height: 1.8;
    margin-top: 35px;
    white-space: nowrap;
}

.company mgt-button {
    max-width: 289.5px;
    margin-top: 54px;
}

.company .button {
    min-height: 63px;
}

.photo--company {
    aspect-ratio: 773.808/429.609;
}

.photo--company img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.recruit {
    display: grid;
    grid-template-columns: 56.15% minmax(0, 1fr);
    gap: 4.18%;
    align-items: center;
    padding: 85px 2.2% 91px;
}

.recruit__copy {
    padding-top: 45px;
}

.recruit h2 {
    font-size: clamp(1.75rem, 3.48vw, 3.131875rem);
    line-height: 1.43;
    margin-top: 57px;
}

.recruit .body-copy {
    font-size: clamp(0.9375rem, 1.404vw, 1.26375rem);
    line-height: 1.9;
    margin-top: 64px;
}

.recruit mgt-button {
    max-width: 309.45px;
    margin-top: 32px;
}

.recruit .button {
    font-size: 0.75rem;
    min-height: 71px;
}

.photo--recruit {
    aspect-ratio: 767.473/667.253;
}

.photo--recruit img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

@media(min-width:1251px) {
    .strength-intro {
        margin-top: -80px;
        padding-bottom: 154px;
    }

    .strength:not(.strength--ai) {
        grid-template-columns: 84px 482px minmax(0, 1fr);
    }

    .strength--divisions {
        padding-bottom: 152px;
    }

    .strength--divisions h3 {
        font-size: 2.15625rem;
    }

    .strength--divisions .strength__copy>p {
        max-width: 472px;
    }

    .division-visual {
        margin-left: -69.5px;
        width: calc(100% + 69.5px);
    }

    .strength--locations {
        padding-top: 122px;
        padding-bottom: 191px;
    }

    .strength--locations .strength__copy>p {
        max-width: 426px;
    }

    .locations-visual {
        margin-left: -93.5px;
        width: calc(100% + 93.5px);
        margin-top: -36px;
    }

    .strength--ai {
        grid-template-columns: 84px 428.1px minmax(0, 1fr);
    }

    .strength--ai .strength__copy {
        width: 457.5px;
    }

}

@media (min-width:768px) and (max-width:1250px) {
    .strength-intro {
        margin-top: -30px;
        padding-bottom: 100px;
    }

    .strength-intro__heading {
        padding-top: 125px;
    }

    .strength-intro__copy {
        padding-top: 165px;
    }

    .strength {
        grid-template-columns: 60px minmax(0, 482fr) minmax(0, 735fr);
        gap: 32px;
    }

    .strength--ai {
        grid-template-columns: 60px minmax(0, 457fr) minmax(0, 605fr);
        padding-right: 5%;
    }

    .strength__index {
        font-size: 2.5rem;
    }

    .strength__index>.index-rule {
        margin-left: 16px;
    }

    .strength__index small {
        margin-left: 12px;
        font-size: 0.6875rem;
    }

    .strength--divisions {
        padding-top: 120px;
    }

    .strength__copy mgt-button {
        margin-top: 55px;
    }

    .strength--locations {
        padding-bottom: 90px;
    }

    .services {
        padding-top: 95px;
        padding-bottom: 95px;
    }

    .services__heading {
        margin-bottom: 75px;
    }

    .service-grid {
        gap: 2.2%;
    }

    .service-divider {
        height: 380px;
    }

    .company {
        padding-block: 130px;
    }

    .recruit h2 {
        margin-top: 35px;
    }

    .recruit .body-copy {
        margin-top: 35px;
    }

    .recruit__copy {
        padding-top: 0;
    }

}

@media(min-width:768px) and (max-width:900px) {
    .strength {
        grid-template-columns: 40px minmax(0, 1fr);
        padding-right: 5%;
        gap: 32px;
    }

    .strength__copy {
        grid-column: 2;
    }

    .division-visual .division-image {
        position: static;
        transform: none;
    }

    .division-visual,
    .locations-visual,
    .photo--ai {
        grid-column: 2;
        width: 100%;
        max-width: 640px;
        margin-top: 40px;
    }

    .strength__copy mgt-button {
        width: 290px;
    }

    .strength__index {
        grid-row: 1/3;
    }

    .strength--ai .photo--ai {
        max-width: 500px;
    }

    .strength-intro__copy {
        font-size: 0.875rem;
    }

    .news {
        grid-template-columns: 25% 1fr;
        gap: 3%;
    }

    .news-list a {
        grid-template-columns: 110px minmax(0, 1fr) 15px;
    }

    .news-category {
        text-align: center;
    }

    .news-list strong {
        grid-column: 1/3;
    }

    .news-list a>img {
        grid-column: 3;
        grid-row: 2;
    }

}

@media(max-width:767px) {
    .photo--about {
        width: 100%;
        aspect-ratio: 338/232;
        margin-top: 54px;
    }

    .strength-intro {
        grid-template-columns: minmax(0, 1fr) 86px;
        gap: 0 22px;
        padding: 38px var(--gutter) 68px;
        margin-top: 0;
    }

    .strength-intro__heading {
        padding-top: 0;
    }

    .strength-intro .eyebrow {
        line-height: 1.125rem;
        color: #082e56;
        white-space: nowrap;
    }

    .strength-intro h2 {
        font-size: 1.625rem;
        line-height: 2.625rem;
        margin-top: 30px;
        white-space: normal;
    }

    .photo--intro {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: 86/180;
        margin-top: 45px;
    }

    .strength-intro__copy {
        grid-column: 1/3;
        grid-row: 2;
        font-size: 1.0625rem;
        line-height: 1.9375rem;
        padding-top: 40px;
    }

    .section-rule {
        width: calc(100% - 52px);
        margin-inline: auto;
        height: 1px;
    }

    .strength,
    .strength--ai {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 0 20px;
        padding: 36px var(--gutter) 30px;
        align-items: start;
    }

    .strength__index,
    .strength--ai .strength__index {
        font-size: 1.625rem;
        line-height: 2.125rem;
        gap: 18px;
        padding-top: 2px;
        color: #082e56;
    }

    .strength__index>.index-rule {
        width: 1px;
        height: 48px;
        margin-left: 9px;
    }

    .strength__index small {
        font-size: 0.5625rem;
        line-height: 0.8125rem;
        letter-spacing: 0.0875rem;
        margin-left: 0;
        margin-top: 7px;
    }

    .strength__copy,
    .strength--ai .strength__copy {
        padding-top: 0;
    }

    .strength__copy h2,
    .strength--ai .strength__copy h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
        margin-bottom: 24px;
    }

    .strength__copy h3 {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.9375rem;
        letter-spacing: 0;
        margin-bottom: 30px;
    }

    .strength__copy>p,
    .strength--locations .strength__copy>p {
        font-size: 0.9375rem;
        line-height: 1.75rem;
    }

    .strength__copy mgt-button,
    .strength--locations .strength__copy mgt-button,
    .strength--ai .strength__copy mgt-button {
        margin-top: 30px;
        max-width: 220px;
    }

    .strength .button,
    .service-grid .button {
        min-height: 54px;
        padding: 15px 12px 15px 20px;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.25rem;
    }

    .division-visual {
        grid-column: 1/3;
        margin-top: 56px;
    }

    .division-visual .division-image {
        position: static;
        transform: none;
    }

    .division-diagram {
        width: 650px;
        height: 650px;
    }

    .division-ring {
        left: 99px;
        top: 81px;
    }

    .division-note {
        top: 527px;
        font-size: 1.1575rem;
        line-height: 2.315rem;
        color: #082e56;
    }

    .division-note--system {
        left: 0;
    }

    .division-note--consult {
        left: 220px;
    }

    .division-note--marketing {
        left: 437px;
        font-size: 1.1575rem;
    }

    .strength--divisions {
        padding-bottom: 74px;
    }

    .strength--locations {
        padding-top: 38px;
        padding-bottom: 60px;
    }

    .strength--locations .strength__copy h3 {
        margin-bottom: 30px;
    }

    .locations-visual {
        grid-column: 1/3;
        margin-top: 56px;
    }

    .strength--locations .locations-visual {
        max-width: 570px;
        justify-self: center;
    }

    .strength--ai {
        padding-top: 38px;
        padding-bottom: 85px;
    }

    .photo--ai {
        grid-column: 2;
        aspect-ratio: 292/320;
        margin-top: 52px;
    }

    .services {
        padding: 58px var(--gutter) 66px;
    }

    .services__heading {
        display: block;
        margin-bottom: 52px;
    }

    .services h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    .services__heading>p {
        font-size: 0.9375rem;
        line-height: 1.75rem;
        margin-top: 25px;
    }

    .service-grid {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .service-grid article {
        display: block;
    }

    .service-number {
        font-size: 1.25rem;
        line-height: 1.1;
    }

    .service-grid h3 {
        font-size: 1.375rem;
        line-height: 2.125rem;
        white-space: normal;
    }

    .service-grid p {
        font-size: 0.9375rem;
        line-height: 1.75rem;
        margin-top: 16px;
    }

    .service-grid mgt-button {
        max-width: 220px;
        margin-top: 24px;
    }

    .service-grid .button {
        min-height: 54px;
    }

    .service-divider {
        display: none;
    }

    .service-grid article~article {
        border-top: 1px solid #415065;
        padding-top: 35px;
    }

    .news {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 64px var(--gutter) 86px;
        gap: 0;
    }

    .news h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
        margin: 0 0 51px;
    }

    .news-list {
        order: 1;
    }

    .news mgt-button {
        order: 2;
        max-width: 220px;
        margin-top: 58px;
    }

    .news .button {
        min-height: 54px;
    }

    .news-list a,
    .news-list li+li a {
        grid-template-columns: 110px minmax(0, 1fr) 20px;
        gap: 16px 14px;
        font-size: 0.75rem;
        line-height: 1.25rem;
        padding: 0 0 32px;
    }

    .news-list li+li a {
        padding-top: 24px;
    }

    .news-category {
        text-align: center;
    }

    .news-list strong {
        grid-column: 1/3;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.6875rem;
    }

    .news-list a>img {
        grid-column: 3;
        grid-row: 2;
        width: 10px;
        height: 16px;
        align-self: center;
        margin: 0;
    }

    .news-rule {
        height: 1px;
    }

    .news-list li:last-child {
        border-bottom: 1px solid #dfe4e9;
    }

    .company {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 54px;
        padding: 32px var(--gutter) 86px;
        background: var(--color-surface-top);
    }

    .company__background {
        display: none;
    }

    .company h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    .company p {
        font-size: 0.9375rem;
        line-height: 1.75rem;
        margin-top: 32px;
        white-space: normal;
    }

    .company mgt-button {
        max-width: 220px;
        margin-top: 54px;
    }

    .company .button {
        min-height: 54px;
    }

    .photo--company {
        aspect-ratio: 338/214;
    }

    .recruit {
        display: flex;
        flex-direction: column;
        padding: 15px 0 67px;
        gap: 49px;
        align-items: stretch;
    }

    .photo--recruit {
        width: calc(100% - 26px);
        aspect-ratio: 364/300;
    }

    .recruit__copy {
        padding: 0 var(--gutter);
    }

    .recruit .eyebrow {
        line-height: 1.5rem;
    }

    .recruit h2 {
        font-size: 1.75rem;
        line-height: 2.6875rem;
        margin-top: 27px;
    }

    .recruit .body-copy {
        font-size: 0.9375rem;
        line-height: 1.75rem;
        margin-top: 35px;
    }

    .recruit mgt-button {
        max-width: 220px;
        margin-top: 32px;
    }

    .recruit .button {
        font-size: 0.75rem;
        min-height: 54px;
    }

}

@media(max-width:374px) {
    .strength-intro {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 0 12px;
    }

    .strength-intro h2 {
        font-size: 1.4375rem;
    }

    .strength__copy h3 {
        font-size: 1rem;
    }

    .strength {
        gap: 0 14px;
    }

}

.strength-stack {
    position: relative;
    isolation: isolate;
}

.strength-panel {
    position: sticky;
    top: var(--panel-top, var(--header-height));
    background: #fff;
}

.strength-panel:nth-child(1) {
    z-index: 1;
}

.strength-panel:nth-child(2) {
    z-index: 2;
}

.strength-panel:nth-child(3) {
    z-index: 3;
}

.strength-stack>.section-band--services {
    position: relative;
    z-index: 4;
}

.strength-stack .services {
    min-height: calc(100svh - var(--header-height));
    display: grid;
    align-content: center;
}

.strength-panel .strength {
    min-height: calc(100svh - var(--header-height) - 1px);
    align-content: center;
    padding-block: 48px;
}

@media(max-width:767px) {
    .strength-panel .strength {
        padding-block: 36px 48px;
    }

    .strength-panel .strength--ai {
        padding-block: 36px;
    }

}

@media print {
    .strength-stack {
        padding-bottom: 0;
    }

    .strength-panel {
        position: relative;
        top: auto;
    }

}

.about {
    position: relative;
}

.hero {
    display: grid;
    position: relative;
}

.section-band--hero {
    background: linear-gradient(to bottom,#fff 0 calc(100% - min(6.667vw,96px)),var(--color-surface-top) 0);
}

.hero.hero--renewed {
    grid-template-columns: 33.1944% minmax(0,1fr);
    grid-template-rows: auto auto 1fr;
    min-height: clamp(480px,42.0833vw,760px);
    padding: 0;
    margin: 0;
}

.hero--renewed .photo {
    grid-column: 2;
    grid-row: 1/4;
}

.hero--renewed h1.hero__english {
    font-family: var(--font-hero);
    grid-column: 1/-1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: max-content;
    max-width: calc(100% - 10.6944%);
    margin: min(6.1111vw,88px) 0 0 5.3472%;
    padding: 0;
    background: none;
    color: #000;
    text-align: left;
    font-size: clamp(2.75rem,6.9444vw,6.25rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    font-weight: 700;
    overflow-wrap: normal;
}

.hero--renewed .hero__tagline {
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
    margin: min(5.9722vw,86px) 12% 80px 20.9205%;
    color: #0b0b0c;
    font-size: clamp(0.8125rem,1.3889vw,1.25rem);
    font-weight: 500;
    line-height: 2.09;
    letter-spacing: .12em;
}

.section-band--about {
    background: linear-gradient(to bottom,var(--color-surface-top) 0 calc(100% - 246px),#fff 0);
}

.about.about--renewed {
    display: grid;
    grid-template-columns: minmax(0,661fr) minmax(0,524fr);
    gap: 7.927%;
    padding: 140px 5.0694% 140px 5.5556%;
    align-items: start;
}

.about--renewed .about__copy {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
}

.about--renewed .photo--about {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 661/749;
    margin: 0;
}

.about--renewed .eyebrow {
    line-height: 1.5;
}

.about.about--renewed h2 {
    font-size: clamp(1.75rem,3.387vw,3.048125rem);
    line-height: 1.5;
    margin-top: 34px;
    letter-spacing: 0;
}

.about.about--renewed .body-copy {
    font-size: clamp(0.9375rem,1.3889vw,1.25rem);
    line-height: 2;
    margin-top: 35px;
}

@media(min-width:768px) and (max-width:1100px) {
    .about.about--renewed {
        padding-top: 80px;
        gap: 6%;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }

    .about.about--renewed h2 {
        font-size: 1.875rem;
    }

    .about.about--renewed .body-copy {
        font-size: 0.9375rem;
    }

    .hero--renewed .hero__tagline {
        margin-left: 16%;
        margin-right: 5%;
        letter-spacing: .08em;
    }

}

@media(max-width:767px) {
    .hero.hero--renewed {
        grid-template-columns: var(--gutter) minmax(0,1fr);
        grid-template-rows: auto auto auto;
        min-height: 0;
        padding-top: 32px;
    }

    .hero--renewed h1.hero__english {
        grid-column: 1/-1;
        grid-row: 1;
        font-size: 8.3vw;
        line-height: 1.1;
        margin: 0 var(--gutter);
        max-width: calc(100% - 2 * var(--gutter));
    }

    .hero--renewed .hero__tagline {
        grid-column: 2;
        grid-row: 2;
        margin: 30px var(--gutter) 32px 0;
        font-size: 0.875rem;
        line-height: 2.09;
        letter-spacing: .12em;
    }

    .hero--renewed .photo {
        grid-column: 2;
        grid-row: 3;
        aspect-ratio: 962/606;
    }

    .section-band--hero {
        background: linear-gradient(to bottom,#fff 0 70%,var(--color-surface-top) 0);
    }

    .section-band--about {
        background: var(--color-surface-top);
    }

    .about.about--renewed {
        display: flex;
        flex-direction: column;
        padding: 60px var(--gutter);
        gap: 32px;
    }

    .about--renewed .photo--about {
        aspect-ratio: 3/2;
        margin: 0;
    }

    .about--renewed .eyebrow {
        line-height: 1.5rem;
    }

    .about.about--renewed h2 {
        font-size: 1.75rem;
        line-height: 1.5;
        margin-top: 22px;
    }

    .about.about--renewed .body-copy {
        font-size: 0.9375rem;
        line-height: 2;
        margin-top: 28px;
    }

    .strength-intro {
        grid-template-columns: max-content minmax(0,1fr);
        gap: 0 16px;
    }

    .strength-intro .strength-intro__copy {
        grid-column: 1;
        font-size: 0.9375rem;
        line-height: 1.875rem;
    }

    .strength-intro .photo--intro {
        grid-column: 2;
        grid-row: 1/3;
        align-self: stretch;
        justify-self: end;
        width: calc(100% + var(--gutter));
        max-width: calc(45vw + var(--gutter));
        aspect-ratio: auto;
        margin: 0 calc(-1 * var(--gutter)) 0 0;
    }

    .company.company {
        padding-top: 86px;
        display: grid;
        grid-template-columns: minmax(0,1fr) 30vw;
        gap: 0 20px;
        align-items: stretch;
    }

    .company .photo--company {
        aspect-ratio: auto;
        margin-right: calc(-1 * var(--gutter));
    }

    .company p br {
        display: none;
    }

    .company mgt-button {
        margin-top: 40px;
    }

    .photo--ai {
        aspect-ratio: 3/2;
    }

    .recruit.recruit {
        padding: 60px 0 0;
    }

    .recruit .photo--recruit {
        order: 1;
        width: 100%;
        aspect-ratio: 3/2;
    }

}


/* Hero intro (index.html sets `intro`, main.js adds the step classes).
   Hidden until each step starts so nothing flashes before the sequence. */
.intro:not(.intro-started) :is(.hero__tagline, .hero__english) {
    visibility: hidden;
}

/* Transparent rather than hidden, so the content stays in the page for search engines and screen readers. */
.hold-below:not(.below-shown) main section:not(.hero) {
    opacity: 0;
}

/* Navigation drops in last. */
.intro mgt-header {
    transform: translateY(-100%);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.intro.intro-header mgt-header {
    transform: none;
}

