/*===================OUR MISSION=====================*/
.mission {
    padding: 3rem 0 5rem;
}
.mission-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 40px;
}
.mission-copy .eyebrow {
    margin-bottom: 24px;
}
.mission-copy h1 {
    font-size: clamp(2.2rem, 4vw, 3.15rem);
    background: linear-gradient(to right, #1097b9, #12BFEA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mission-copy .lead {
    margin-top: 22px;
}

/*===================RADIAL DIAGRAM=====================*/
.radial-diagram {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 800 / 550;
    margin: 0 auto;
}
.radial-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hub {
    position: absolute;
    top: 49.0909%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #152f8f, #0a1440);
    box-shadow: 0 10px 25px rgba(20, 35, 90, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hub img {
    width: 60px;
    height: 60px;
}
/* the wrapper is sized on the icon only, so the icon lands
   exactly on the SVG line endpoint */
.node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 60px;
    height: 60px;
}
.node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
}
.node-icon.blue {
    border: 1px solid #82acf9;
}
.node-icon.green {
    border: 1px solid #95f5c7;
}
.node-icon img {
    width: 24px;
    height: 24px;
}
/* label is pinned to the icon, not to the wrapper's centering */
.node-label {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 12px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.node.reverse .node-label {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    text-align: right;
}

/*===================VALUE CARDS=====================*/
.values {
    padding: 20px 0 60px;
}
.value-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.value-cards li {
    padding: 26px 24px;
    border-left: 2px solid #1f9e6d;
    border-radius: 14px;
    box-shadow: -4px 0 8px -2px rgba(31, 158, 109, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.value-cards li:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(35, 38, 92, 0.08);
}
.value-cards img {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 18px;
}
.value-cards h3 {
    margin-bottom: 8px;
}

/*===================SECURITY IS NOT A BLACK BOX=====================*/
.blackbox {
    padding: 40px 0 70px;
}
.blackbox-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    gap: 40px;
}
.blackbox-copy h2 {
    margin: 0 0 18px;
}
.blackbox-copy p {
    max-width: 520px;
    margin: 0 0 18px;
}

/*===================BLACK BOX ILLUSTRATION=====================*/
.illustration {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 960 / 480;
    margin: 0 auto;
    background: #fbfbfc;
    /* same border as the home page cards (.section-head-bullets li) */
    border: 1.5px solid #828793;
    border-radius: 14px;
}
.illustration-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* the vertical redraw is phone-only */
.illustration-graphic--vertical {
    display: none;
}
.illustration-text {
    position: absolute;
    top: 6%;
    max-width: 220px;
}
.illustration-text.text-left {
    left: 4%;
}
.illustration-text.text-right {
    left: 66%;
}
.illustration-text h3 {
    margin: 0 0 10px;
    font-size: 15px;
}
.illustration-text p {
    margin: 0;
    font-size: 12.5px;
}
/* scan-log panel — the "clear decisions" side of the illustration.
   The card itself is a shared component in general.css; only its placement
   inside this diagram belongs here. */
.scan-report {
    position: absolute;
    top: 34%;
    left: 62%;
    width: 36%;
}

/*===================AWARD BANNER=====================*/
.award {
    padding: 20px 0 60px;
}
.award-card {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 30px;
    padding: 50px 40px;
    border-radius: 14px;
    background: #0c0e28;
}
.award-kicker {
    display: block;
    margin-bottom: 14px;
    color: #a27524;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.award-card h2 {
    margin: 0 0 14px;
    color: var(--text2);
    font-size: 36px;
}
.award-card p {
    max-width: 560px;
    color: #b7bad6;
    line-height: 1.7;
}
.award-card img {
    /* centred in its column at every width, not pinned to the right edge */
    justify-self: center;
    width: 100%;
    max-width: 28rem;
}

/*===================LEADERSHIP TEAM=====================*/
.team {
    padding: 40px 0;
}
.team-head,
.collab-head {
    margin-inline: auto;
    text-align: center;
}
.team-head .eyebrow {
    margin: 0 auto 18px;
}
.team-head .lead,
.collab-head .lead {
    margin-inline: auto;
}
.team-role {
    display: block;
    margin-bottom: 10px;
    color: #2f6fed;
    font-size: 11.5px;
    font-weight: 600;
}

/*===================BUILT THROUGH COLLABORATION=====================*/
.collab {
    padding: 20px 0 10rem;
}
.collab-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px 2rem;
    /* same border as the home page cards (.section-head-bullets li) */
    border: 1.5px solid #828793;
    border-radius: 14px;
}
.collab-flow li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    text-align: center;
}
.collab-flow li:not(:last-child)::after {
    content: "\2192";                 /* → points to the next step */
    position: absolute;
    top: 26px;
    right: 0;
    transform: translateX(50%);
    color: #c7c9d6;
    font-size: 34px;
    line-height: 1;
}
.collab-flow img {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
}
.collab-flow h3 {
    margin-bottom: 8px;
}

/* =========================================================
   DYNAMIC LAYOUT
   ========================================================= */

/*===================TABLET=====================*/
@media (max-width: 950px) {
    .mission-grid,
    .blackbox-grid,
    .award-card {
        grid-template-columns: 1fr;
    }
    /*.value-cards,
        .award-card img {
        justify-self: center;
        max-width: 22rem;
    }*/
    .collab-flow {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
    .collab-flow li:not(:last-child)::after {
        display: none;
    }
}

/*===================PHONE=====================*/
@media (max-width: 620px) {

    /* ---------- MISSION: copy on top, diagram underneath ---------- */
    .mission {
        padding: 0;
    }
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mission-copy {
        text-align: center;
    }
    .mission-copy .eyebrow,
    .mission-copy .lead {
        margin-inline: auto;
    }
    .mission-copy h1 {
        font-size: 2.1rem;
    }
    /* shrink the diagram so the outer labels stay inside the screen */
    .radial-diagram {
        width: 78%;
        margin-inline: auto;
    }
    .hub {
        width: 62px;
        height: 62px;
    }
    .hub img {
        width: 34px;
        height: 34px;
    }
    .node,
    .node-icon {
        width: 38px;
        height: 38px;
    }
    .node-icon img {
        width: 16px;
        height: 16px;
    }
    .node-label {
        width: 54px;
        margin-left: 6px;
        font-size: 9px;
        line-height: 1.35;
    }
    .node.reverse .node-label {
        margin-right: 6px;
    }

    /* ---------- VALUE CARDS: stacked, full width ---------- */
    .values {
        padding: 0 0 30px;
    }
    .value-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .value-cards li {
        padding: 22px 20px;
    }

    /* ---------- BLACK BOX: copy on top, illustration underneath ---------- */
    .blackbox {
        padding: 20px 0 40px;
    }
    .blackbox-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .blackbox-copy h2 {
        text-align: center;
    }
    .blackbox-copy p {
        max-width: none;
    }


    /* ---------- AWARD: text centered on top, trophy underneath ---------- */
    .award {
        padding: 10px 0 40px;
    }
    .award-card {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 34px 22px;
        text-align: center;
    }
    .award-card h2 {
        font-size: 26px;
    }
    .award-card p {
        max-width: none;
    }
    .award-card img {
        justify-self: center;
        width: min(340px, 100%);
        max-width: 100%;
        margin-inline: auto;
    }

    /* ---------- TEAM: centered head, stacked full-width cards ---------- */
    .team {
        padding: 10px 0 20px;
    }
                .team-role {
        font-size: 12.5px;
    }
    
    /* ---------- COLLABORATION: vertical flow, arrows point down ---------- */
    .collab {
        padding: 10px 0 5rem;
    }
    .collab-flow {
        grid-template-columns: 1fr;
        gap: 46px;
        padding: 32px 20px;
    }
    .collab-flow li {
        padding: 0;
    }
    .collab-flow li:not(:last-child)::after {
        display: block;
        top: auto;
        right: auto;
        bottom: -38px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

/*===================LEADERSHIP SLIDER=====================*/
.team-slider {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1000px;
    margin: 46px auto 0;
}
.team-arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.team-arrow svg {
    width: 100%;
    height: 100%;
    color: var(--text1);
}
.team-arrow:hover svg {
    color: #4253d0;
}
/* hides the broken-image icon until the photos are dropped in */
.team-photo[src=""] {
    visibility: hidden;
}
.team-track {
    position: relative;
    display: flex;
    flex: 1;
    gap: 18px;
    padding: 12px 0;
    overflow: hidden;
}
.team-slide {
    flex: 0 0 clamp(230px, 42%, 330px);
    padding: 26px 22px;
    border: 1.5px solid #828793;
    border-radius: 14px;
    text-align: center;
    opacity: 0.45;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.team-slide.is-active {
    opacity: 1;
    transform: scale(1.06);
}
.team-photo {
    width: 10rem;
    height: 10rem;
    margin: 0 auto 16px;
    border-radius: 50%;
    object-fit: cover;
}
.team-slide h3 {
    margin: 0 0 4px;
    font-size: 15px;
}
.team-slide p {
    font-size: 12.5px;
    line-height: 1.6;
}

@media (max-width: 620px) {
    .team-slider {
        flex-direction: column;
    }
    .team-arrow {
        transform: rotate(90deg);
    }
    .team-track {
        flex-direction: column;
        width: 100%;
        max-height: 430px;
    }
    .team-slide {
        flex: 0 0 auto;
        width: 100%;
    }
    .team-slide.is-active {
        transform: none;
    }
}


/*===================BLACK BOX — FITTING THE REPORT CARD=====================*/
/* The scan-log card is absolutely placed inside the illustration, at a fixed
   percentage of a frame whose height scales with its width — while the caption
   above it is a fixed pixel size. So as the frame narrows the two close on each
   other. Measured: the gap runs out at roughly a 630px frame, where the card
   also starts spilling past the bottom edge. In the two-column split that
   happens at about a 1140px viewport, so the diagram drops beneath the copy
   comfortably before then and the whole section centres instead. */
@media (max-width: 1250px) {
    .blackbox-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .blackbox-copy h2,
    .blackbox-copy p {
        max-width: 640px;
        margin-inline: auto;
    }
}

/*===================BLACK BOX — FLATTEN BEFORE THEY COLLIDE=====================*/
/* Same vertical redraw the phone layout already used, but raised from 620px.
   Between 620 and 700 the frame is narrow enough that the card climbs into the
   "Clear decisions" caption (measured -7px at 638) and drops out of the bottom
   of the frame, so the stack has to take over above that window. */
@media (max-width: 720px) {
    /* ---------- ILLUSTRATION: stacks vertically,
                  "Opaque signals" top, "Clear decisions" bottom ---------- */
    .illustration {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: none;
        aspect-ratio: auto;
        padding: 24px 18px;
    }
    /* swap the horizontal diagram for the vertical redraw */
    .illustration-graphic--horizontal {
        display: none;
    }
    .illustration-graphic--vertical {
        display: block;
        order: 2;
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 480 / 650;
        margin-inline: auto;
    }
    .illustration-text {
        position: static;
        top: auto;
        left: auto;
        max-width: none;
        text-align: center;
    }
    .illustration-text.text-left {
        order: 1;
    }
    .illustration-text.text-right {
        order: 3;
    }
    .scan-report {
        order: 4;
        position: static;
        top: auto;
        left: auto;
        width: 100%;
    }
}