/* the-cms-vision page (The CMS Vision) */
/* ------------------------------------------------------------------
   ABOUT CMS PAGE
-------------------------------------------------------------------*/
:root {
    --pad-x: clamp(20px, 6.77vw, 130px);
}

.section-title {
    font-size: var(--fs-display);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: block;
    width: fit-content;
}

.section-title .line {
    display: block;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.25;
}

.rv {
    will-change: transform, opacity;
}

.dark {
    color: var(--white);
}

/* HERO */
.cms-hero {
    height: 100vh;
    min-height: 640px;
    padding: 140px var(--pad-x) 60px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cms-hero.is-pinned {
    padding: 0;
}

/* pinned hero: fixed-position layout so the media can grow to the full screen while the words drift out */
.cms-hero.is-pinned .cms-hero__row {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.cms-hero.is-pinned .cms-hero__side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cms-hero.is-pinned .cms-hero__side--l {
    left: var(--pad-x);
}

.cms-hero.is-pinned .cms-hero__side--r {
    right: var(--pad-x);
}

.cms-hero.is-pinned .cms-hero__center {
    position: absolute;
    inset: 0;
    display: block;
}

.cms-hero.is-pinned .cms-hero__title {
    position: absolute;
    left: calc(50% - 640px);
    top: calc(50% - 250px - 15px - 98px);
    width: auto;
    z-index: 1;
}

.cms-hero.is-pinned .cms-hero__overview {
    position: absolute;
    right: calc(50% - 640px);
    top: calc(50% + 250px + 15px);
    width: auto;
    z-index: 1;
}

.cms-hero.is-pinned .cms-hero__side {
    z-index: 1;
}

.cms-hero.is-pinned .cms-hero__media {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(889px, 100vw - var(--pad-x) * 2);
    height: auto;
    aspect-ratio: 889 / 500;
    z-index: 2;
}

/* DESKTOP / LAPTOP (also browser zoom 125-150%, where the screen is short): the whole group
   (CMS, video, OVERVIEW) is sized from the screen HEIGHT as well as the width, and centred in the space below the header,
   so CMS never runs into the logo and OVERVIEW never drops off the bottom */
@media (min-width: 901px) {
    .cms-hero.is-pinned {
        --hfs: min(var(--fs-hero), 11vh);                       /* CMS / OVERVIEW size */
        --top: 160px;                                           /* room for the header (pill ends ~136px) */
        --mh: min(500px, (100vw - var(--pad-x) * 2) * 0.5624, 100vh - var(--top) - var(--hfs) * 1.82 - 60px);   /* video height */
        --cy: calc(50vh + var(--top) / 2);                      /* vertical centre of the free space */
    }
    .cms-hero.is-pinned .cms-hero__title, .cms-hero.is-pinned .cms-hero__overview { font-size: var(--hfs); }
    .cms-hero.is-pinned .cms-hero__title { left: max(var(--pad-x), 50% - 640px); top: calc(var(--cy) - var(--mh) / 2 - 15px - var(--hfs) * 0.91); }
    .cms-hero.is-pinned .cms-hero__overview { right: max(var(--pad-x), 50% - 640px); top: calc(var(--cy) + var(--mh) / 2 + 15px); }
    .cms-hero.is-pinned .cms-hero__media { top: var(--cy); width: calc(var(--mh) * 1.778); }
    .cms-hero.is-pinned .cms-hero__side { top: var(--cy); }
}

.cms-hero__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cms-hero__side {
    font-size: var(--fs-lead);
    white-space: nowrap;
    flex: none;
    overflow: hidden;
}

/* the note is clipped by its own box as it slides out */
.cms-hero__note {
    margin: 0;
    will-change: transform;
}

.cms-hero__side b {
    font-weight: 800;
}

.cms-hero__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.cms-hero__title, .cms-hero__overview {
    width: min(1280px, 100%);
    font-size: var(--fs-hero);
    line-height: 0.91;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cms-hero__overview {
    text-align: right;
    color: var(--purple);
    text-transform: uppercase;
}

.cms-hero__title .ch, .cms-hero__overview .ch {
    display: inline-block;
}

.cms-hero__media {
    width: min(889px, 100%);
    aspect-ratio: 889 / 500;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.cms-hero__media img, .cms-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cms-hero__media video {
    position: absolute;
    inset: 0;
}

/* STATEMENT */
.cms-statement {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--black), var(--plum-800) 90.6%);
    padding: clamp(120px, 10vw, 200px) var(--pad-x) clamp(140px, 12vw, 240px);
}

.cms-statement__copy {
    max-width: 1660px;
    margin-inline: auto; display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 35px);
}

.cms-statement__line {
    font-size: var(--fs-big);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
}

/* every line sits flush left in the column; JS slides it between its data-from and data-to positions as it scrolls */
.cms-statement__line {
    align-self: flex-start;
    will-change: transform;
}

.cms-statement__line--accent {
    color: var(--purple);
}

.cms-statement .ch {
    display: inline-block;
    white-space: pre;
    will-change: opacity, color;
}

/* FOUNDER */
.founder {
    padding: clamp(90px, 8.3vw, 160px) var(--pad-x);
    overflow: hidden;
}

/* rotated photos never widen the page */
.founder__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 100px);
    align-items: center;
    max-width: 1500px;
    margin-inline: auto; }

.founder__images {
    position: relative;
    display: flex;
    justify-content: center;
}

.founder__photo {
    position: absolute;
    border-radius: 15px;
    overflow: hidden;
    /* background: var(--grey-150); */
    /* box-shadow: 0 30px 60px rgba(var(--black-rgb),.18); */
    backdrop-filter: blur(4px);
}

.founder__photo img, .founder__photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* the launch video: a straight, plain rectangle (no tilt, no floating logos) */
.founder__photo--big {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 589 / 792;
    border-radius: 15px;
    background: var(--grey-150);
    box-shadow: 0 24px 60px rgba(var(--black-rgb), .12);
}

.founder__photo--small {
    left: 38px;
    top: 168px;
    width: 303px;
    height: 432px;
    transform: rotate(-11deg);
    z-index: 2;
}

p.lead.mb-4 {
    margin-bottom: 25px;
}

.founder__text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.founder__text .sub {
    font-size: var(--fs-lead);
    font-weight: 800;
    margin-top: 10px;
}

.founder__text ul {
    list-style: disc;
    padding-left: 36px;
    margin-top: 10px;
}

.founder__text .c-purple {
    color: var(--purple);
    font-weight: 700;
}

.logos {
    width: 220px;
    border-radius: 15px;
    overflow: hidden;
    position: absolute;
    box-shadow: 0px 0px 20px #00000052;
    z-index: 2;
    will-change: transform;
}

/* moved by the-cms-vision.js (scroll + mouse) */
.logos img {
}

.logos.lg_01 {
    top: 63%;
    right: 0%;
}

.logos.lg_02 {
    top: 20%;
    left: 0%;
}

@media (max-width: 1400px) {
    .logos {
        width: 180px;
    }

    .logos.lg_02 {
        top: 12%;
    }

    .logos.lg_01 {
        top: 60%;
    }
}

@media (max-width: 900px) {
    .logos {
        width: 120px;
        border-radius: 12px;
    }

    .logos.lg_02 {
        top: 6%;
    }

    .logos.lg_01 {
        top: 58%;
    }
}

/* Our Powerhouse Alliance: two labelled points */
.founder__text .alliance {
    display: flex;
    flex-direction: column;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.alliance li {
    position: relative;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--teal);
    font-family: var(--font-book);
    font-size: var(--fs-lead);
    line-height: 1.35;
}

.alliance__label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
}

/* CAMPUS */
.campus {
    padding: 0;
    overflow: hidden;
}

/* no white gutters: the card ends up full-bleed with nothing below it */
.campus__card {
    position: relative;
    width: min(1400px, 100% - var(--pad-x) * 2);
    height: min(53.6vw, 100vh);
    /* fixed height: the width grows to 100vw on scroll without moving the page */
    margin-inline: auto; border-radius: 15px;
    overflow: hidden;
    isolation: isolate;
    will-change: width;
}

/* fixed-attachment background: the image is viewport-sized and JS keeps it locked to the viewport while the card scrolls over it */
.campus__card img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    will-change: transform;
    backface-visibility: hidden;
}

/* the blur lives on a static overlay (backdrop-filter) instead of the moving image, so the fixed-background effect stays smooth */
.campus__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /*-webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px);*/
}

.campus__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(var(--black-rgb),.6), rgba(var(--black-rgb),0));
}

.campus__text {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    width: min(1131px, 92%);
    z-index: 2;
    text-align: center;
    font-size: var(--fs-display);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--white);
}

/* BUILT BY */
.builtby {
    background: linear-gradient(to bottom, var(--black), var(--plum-800));
    padding: clamp(80px, 6.77vw, 130px) var(--pad-x) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 75px;
}

.builtby__copy {
    max-width: 845px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    color: var(--white);
}

.builtby__copy .section-title {
    text-align: center;
}

.builtby__img {
    width: min(1047px, 100%);
    aspect-ratio: 1047 / 588;
    overflow: hidden;
}

.builtby__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* BUILT BY */
.jinu_section {
    background: linear-gradient(to bottom, var(--black), var(--plum-800));
    padding: clamp(80px, 6.77vw, 130px) var(--pad-x) 0;
    display: flex;
    flex-direction: row;
    gap: 75px;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.jinu_section__copy {
    max-width: 845px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    color: var(--white);
}

/*
.jinu_section__copy .section-title {
    text-align: center;
}
.jinu_section__img {
    width: min(1047px, 100%);
    aspect-ratio: 1047 / 588;
    overflow: hidden;
}*/

.jinu_section__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
.jinu_section__person {
    flex: 0 1 auto;
    width: min(680px, 45%);           /* shrinks with the screen instead of pushing the text off it */
    max-width: 680px;
    height: auto;
    align-self: flex-end;              /* stands on the bottom edge of the section */
	filter: grayscale(1) brightness(1.1);
}
.jinu_section__copy { flex: 1 1 0; min-width: 0; }
.jinu_section .mb-4 { margin-bottom: 1em; }

/* tablets + phones: text on top, portrait below it, centred and standing on the section's bottom edge */
@media (max-width: 1080px) {
    .jinu_section { flex-direction: column; gap: 40px; text-align: left; }
    .jinu_section__copy { order: 1; flex: none; width: 100%; max-width: 720px; gap: 28px; }
    .jinu_section__person { order: 2; width: min(480px, 100%); align-self: center; }
}
@media (max-width: 640px) {
    .jinu_section { padding-top: 64px; gap: 32px; }
    .jinu_section__copy .lead { font-size: 16px; line-height: 1.5; }
    .jinu_section__person { width: min(360px, 92%); }
}

/* STANDARD */
.standard {
    position: relative;
    background: var(--white);
    padding: clamp(80px, 6.77vw, 130px) var(--pad-x);
    isolation: isolate;
}

/* the lilac gradient grows down from 0 to 100% of the section once the first card has stacked (height set by JS) */
.standard__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
    z-index: -1;
    background: linear-gradient(to bottom, var(--lilac) 21%, var(--white) 79%);
    pointer-events: none;
}

.standard__grid {
    max-width: 1660px;
    margin-inline: auto; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 806px);
    gap: 40px 48px;
    align-items: start;
    padding-block: 50px; }

.standard__title {
    position: sticky;
    top: 120px;
}

.std-list {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

/* card stacking: each card sticks a little lower than the one before, so the next card slides up over it */
.std-list .std-card {
    position: sticky;
    top: calc(120px + var(--i, 0) * 24px);
    transform-origin: 50% 0;
}

.std-list .std-card:nth-child(1) {
    --i: 0;
}

.std-list .std-card:nth-child(2) {
    --i: 1;
}

.std-list .std-card:nth-child(3) {
    --i: 2;
}

.std-list .std-card:nth-child(4) {
    --i: 3;
}

.std-list::after {
    content: "";
    display: block;
    height: 30vh;
}

/* room for the last card to settle before the section ends */
.std-card {
    border: 1px solid var(--white);
    border-radius: 14px;
    padding: 40px 40px 50px;
    background: linear-gradient(to bottom, rgba(var(--grey-175-rgb),.96), rgba(var(--white-rgb),.96));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    gap: 50px;
    box-shadow: 0 -10px 40px rgba(var(--black-rgb),.06);
}

.std-card__img {
    width: 228px;
    /* height: 155px; */
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    flex: none;
}

.std-card__img img {
    /* position: absolute; */
    /* width: 208%; */
    /* height: 199%; */
    max-width: 100%;
}

.std-card__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.std-card__text .logos_list {
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.std-card__text .logos_list img{
    height: auto;
}
.std-card__text .logos_list img:nth-child(1){
    width: 170px;
}
.std-card__text .logos_list img:nth-child(2){
    width: 100px;
}

.std-card h3 {
    font-size: var(--fs-xl);
    line-height: 35px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.std-card p {
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
}

/* FEATURED */
.featured {
    position: relative;
    isolation: isolate;
    padding: clamp(60px, 3.75vw, 72px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* the amber gradient is a separate layer that appears when the section reaches the centre of the screen (JS) */
.featured__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, var(--grey-350), var(--white) 100%);
    opacity: 0;
    transform-origin: 50% 0;
    pointer-events: none;
}

.featured .section-title {
    text-align: center;
    margin-bottom: 40px;
}

.featured__rule {
    width: min(1660px, 100% - var(--pad-x) * 2);
    height: 1px;
    background: rgba(var(--black-rgb),.3);
}

.featured__strip {
    position: relative;
    width: 100%;
    height: 336px;
    display: flex;
    justify-content: center;
}

.featured__article {
    position: relative;
    z-index: 2;
    width: 540px;
    height: 336px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 30px 60px rgba(var(--black-rgb), .12);
}

/* one coverage thumbnail per publication, stacked; the one for the logo behind the card fades in */
.featured__article img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}

.featured__article img.is-on {
    opacity: 1;
}

/* publication logos: a single ink-coloured row that scrolls behind the card */
.featured__logos {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 138px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.featured__track {
    display: flex;
    align-items: center;
    gap: clamp(70px, 7vw, 130px);
    width: max-content;
    margin: 0;
    padding: 0 0 0 clamp(70px, 7vw, 130px);
    list-style: none;
    will-change: transform;
}

.featured__logo {
    flex: none;
    display: flex;
    align-items: center;
}

.featured__logo img {
    display: block;
    height: clamp(34px, 3.4vw, 56px);
    width: auto;
    filter: grayscale(1) brightness(0);
    opacity: .78;
}

.featured__logo a {
    display: flex;
    align-items: center;
    transition: opacity .25s ease, transform .25s ease;
}

.featured__logo a:hover {
    transform: translateY(-2px);
}

.featured__logo a:hover img {
    filter: none;
    opacity: 1;
}

/* the real logo colours show on hover */
.featured__article {
    display: block;
}

.featured__article[href] {
    cursor: pointer;
}

.featured__article[href]:hover img.is-on {
    transform: scale(1.03);
}

.featured__article img {
    transition: opacity .6s ease, transform .5s ease;
}

.featured__logo span {
    font-size: clamp(1.5rem, 2.3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    opacity: .78;
    white-space: nowrap;
}

.footer {
    padding-top: 100px;
}

/* RESPONSIVE */
@media (max-width: 1400px) {
    .founder__grid {
        grid-template-columns: 1fr;
    }

    .founder__images {
        width: 100%;
        max-width: 560px;
        margin-inline: auto; }

    .founder__photo--small {
        left: 20px;
        top: 130px;
        width: 230px;
        height: 330px;
    }

    .standard__grid {
        grid-template-columns: 1fr;
    }

    .standard__title {
        position: static;
    }

    .std-list .std-card {
        top: calc(90px + var(--i, 0) * 16px);
    }
}

@media (max-width: 1180px) {
    .cms-hero__row {
        flex-direction: column;
        align-items: stretch;
    }

    .cms-hero__side {
        text-align: center;
    }
}

@media (max-width: 900px) {
    .cms-hero {
        padding-top: 110px;
        min-height: 0;
    }

    .cms-statement__line {
        white-space: normal;
        font-size: clamp(26px, 7.2vw, 44px);
        line-height: 1.05;
    }

    /* was --fs-lead (18px): too small for this headline section */
    .cms-statement__copy > .cms-statement__line[class] {
        align-self: flex-start;
        margin: 0;
    }

    /* "CMS" sits just above the video and "OVERVIEW" just below it (video height = its width x 500/889) */
    .cms-hero.is-pinned .cms-hero__title {
        left: var(--pad-x);
        top: calc(50% - (100vw - var(--pad-x) * 2) * 0.2812 - 12px - 0.95em);
    }

    .cms-hero.is-pinned .cms-hero__overview {
        right: var(--pad-x);
        top: calc(50% + (100vw - var(--pad-x) * 2) * 0.2812 + 12px);
        bottom: auto;
    }

    .founder__images {
        max-width: 100%;
    }

    .founder__photo--big {
        max-width: none;
        aspect-ratio: 4 / 5;
    }

    .founder__photo--small {
        left: 0;
        top: 90px;
        width: 150px;
        height: 215px;
    }

    .campus__card {
        height: calc((100vw - 40px) * 1.25);
        width: calc(100% - 40px);
    }

    .campus__text {
        bottom: 6%;
    }

    .std-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
        gap: 24px;
    }

    .std-card h3 {
        font-size: var(--fs-lead);
        line-height: 1.2;
    }

    .std-card p {
        font-size: var(--fs-sm);
    }

    .featured__strip {
        height: 240px;
    }

    .featured__article {
        width: 80%;
        height: 240px;
    }

    .featured__logos {
        height: 100px;
    }

    .featured__logo img {
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* team callouts */
.builtby__stage {
    position: relative;
    width: min(1047px, 100%);
}

.builtby__stage .builtby__img {
    width: 100%;
}

.builtby__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

.builtby__lines path {
    fill: none;
    stroke: rgba(var(--white-rgb), .85);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.builtby__lines circle {
    fill: var(--white);
}

.builtby__lines circle.ring {
    fill: none;
    stroke: rgba(var(--white-rgb), .45);
    stroke-width: 2;
}

.builtby__people {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.callout {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
    color: var(--white);
    transform: translateY(-50%);
}

.callout--left {
    align-items: flex-end;
    text-align: right;
}

.callout__name {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.callout__role {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.3;
    color: rgba(var(--white-rgb), .65);
    width: max-content;
    max-width: 250px;
    white-space: normal;
}

/* up to 250px wide; longer designations wrap onto two lines */
.callout .lf {
    display: inline-block;
    white-space: pre;
}

/* the founding team, layered from single portraits; grey until their callout line starts */
.builtby__stage:has(.builtby__group) {
    width: min(720px, 100%);
}

.builtby__group {
    position: relative;
    aspect-ratio: 1064 / 989;
    overflow: hidden;
}

.builtby__group .builtby__person {
    position: absolute;
    height: auto;
    max-width: none;
    object-fit: fill;
    filter: grayscale(1);
    will-change: filter;
}

/* overrides the old single-photo rule (.builtby__img img) */
.builtby__group .builtby__person.is-color {
    filter: grayscale(0);
    transition: filter .6s ease;
}

@media (max-width: 1279px) {
    /* not enough room beside the photo: names become a list under it */ .builtby__lines {
        display: none;
    }

    .builtby__people {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 22px 24px;
        padding: 28px 0 56px;
    }

    .callout, .callout--left {
        position: static;
        transform: none;
        align-items: flex-start;
        text-align: left;
        white-space: normal;
    }

    .callout__role {
        width: auto;
    }
}