:root {
    --tech-bg: #020914;
    --tech-bg-soft: #06111e;
    --tech-panel: rgba(8, 22, 35, .78);
    --tech-panel-strong: #081725;
    --tech-line: rgba(255,255,255,.09);
    --tech-line-soft: rgba(255,255,255,.055);
    --tech-gold: #c8a55a;
    --tech-gold-soft: #e4cf9d;
    --tech-text: #f2f0e9;
    --tech-muted: #91a3ad;
    --tech-muted-2: #617681;
    --tech-ivory: #eee8d8;
    --tech-blue: #7fa9bd;
}

html {
    scroll-behavior: smooth;
}

body.technology-body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 82% 2%,
            rgba(31, 90, 119, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 28%,
            rgba(202, 168, 92, .05),
            transparent 24%
        ),
        var(--tech-bg);

    color: var(--tech-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.technology-body * {
    box-sizing: border-box;
}

body.technology-body a {
    color: inherit;
}

.technology-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;

    min-height: 76px;

    padding:
        0
        clamp(24px, 5vw, 74px);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;

    border-bottom:
        1px solid rgba(255,255,255,.055);

    background:
        linear-gradient(
            180deg,
            rgba(2,9,20,.94),
            rgba(2,9,20,.72)
        );

    backdrop-filter: blur(22px);
}

.technology-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.technology-brand-mark {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(200,165,90,.46);

    border-radius: 50%;

    color: var(--tech-gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 20px;
}

.technology-brand > span:last-child {
    display: flex;
    flex-direction: column;
}

.technology-brand strong {
    font-size: 10px;
    letter-spacing: .18em;
}

.technology-brand small {
    margin-top: 3px;

    color: var(--tech-muted-2);

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .14em;
}

.technology-nav-desktop {
    justify-self: center;

    display: flex;
    align-items: center;

    gap:
        clamp(
            17px,
            2.4vw,
            31px
        );
}

.technology-nav-desktop a {
    position: relative;

    padding:
        29px
        0
        27px;

    color: #9aaab2;

    font-size: 9px;
    font-weight: 600;

    text-decoration: none;
}

.technology-nav-desktop a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 20px;

    width: 0;
    height: 1px;

    background: var(--tech-gold);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}

.technology-nav-desktop a:hover,
.technology-nav-desktop a.active {
    color: var(--tech-ivory);
}

.technology-nav-desktop a:hover::after,
.technology-nav-desktop a.active::after {
    width: 100%;
}

.technology-nav-pill {
    min-height: 35px;

    padding:
        0
        14px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border:
        1px solid
        rgba(200,165,90,.35);

    border-radius: 999px;

    color: var(--tech-gold-soft);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;

    text-decoration: none;
}

.technology-nav-mobile {
    display: none;
}

.technology-public {
    min-height: 100vh;
}

.technology-hero {
    position: relative;

    min-height:
        min(
            860px,
            100vh
        );

    padding:
        150px
        max(7vw,60px)
        78px;

    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(460px,.75fr);

    align-items: center;

    gap:
        clamp(
            50px,
            8vw,
            125px
        );

    overflow: hidden;
}

.technology-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,9,20,.88) 0%,
            rgba(2,9,20,.62) 48%,
            rgba(2,9,20,.3) 100%
        );

    pointer-events: none;
}

.technology-hero::after {
    content: "";

    position: absolute;

    width: 780px;
    height: 780px;

    right: -180px;
    top: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31,102,136,.14),
            rgba(8,45,68,.04) 46%,
            transparent 67%
        );

    pointer-events: none;
}

.technology-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15),
            #000 50%,
            rgba(0,0,0,.25)
        );
}

.technology-hero-copy {
    position: relative;
    z-index: 3;

    max-width: 730px;
}

.technology-eyebrow {
    color: var(--tech-gold);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .19em;
    text-transform: uppercase;
}

.technology-hero h1 {
    margin:
        18px
        0
        24px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            62px,
            7.7vw,
            118px
        );

    font-weight: 400;
    line-height: .82;

    letter-spacing: -.045em;
}

.technology-hero h1 em {
    color: var(--tech-gold);
    font-weight: 400;
}

.technology-hero-lead {
    max-width: 610px;
    margin: 0;

    color: #a6b4bb;

    font-size:
        clamp(
            13px,
            1.15vw,
            16px
        );

    line-height: 1.9;
}

.technology-hero-actions {
    margin-top: 32px;

    display: flex;
    align-items: center;
    gap: 25px;
}

.technology-primary-link {
    min-height: 43px;

    padding:
        0
        18px;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    background: var(--tech-gold);

    color: #07111b !important;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: .07em;
}

.technology-primary-link span {
    font-size: 14px;
}

.technology-text-link {
    color: #9db0ba !important;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;
}

.technology-stats {
    max-width: 540px;

    margin-top: 58px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid
        var(--tech-line);
}

.technology-stats > div {
    padding:
        22px
        18px
        0
        0;
}

.technology-stats strong,
.technology-stats span {
    display: block;
}

.technology-stats strong {
    color: var(--tech-ivory);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 30px;
    font-weight: 400;
}

.technology-stats span {
    margin-top: 5px;

    color: var(--tech-muted-2);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.technology-system-map {
    position: relative;
    z-index: 2;

    width:
        min(
            520px,
            40vw
        );

    aspect-ratio: 1;

    justify-self: center;
}

.technology-map-orbit {
    position: absolute;
    inset: 50% auto auto 50%;

    border:
        1px solid
        rgba(149,191,209,.14);

    border-radius: 50%;

    transform:
        translate(-50%,-50%);
}

.technology-map-orbit.orbit-a {
    width: 38%;
    height: 38%;
}

.technology-map-orbit.orbit-b {
    width: 68%;
    height: 68%;
}

.technology-map-orbit.orbit-c {
    width: 96%;
    height: 96%;

    border-color:
        rgba(200,165,90,.12);
}

.technology-map-core {
    position: absolute;
    inset: 50% auto auto 50%;

    width: 118px;
    height: 118px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(200,165,90,.35);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 30%,
            rgba(200,165,90,.17),
            rgba(7,22,34,.93) 58%
        );

    box-shadow:
        0 0 80px
        rgba(72,139,166,.1);

    transform:
        translate(-50%,-50%);
}

.technology-map-core span {
    color: var(--tech-gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 35px;
}

.technology-map-core small {
    position: absolute;
    top: calc(100% + 11px);

    color: var(--tech-muted-2);

    font-size: 6px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: .18em;

    text-align: center;
}

.technology-map-node {
    position: absolute;

    min-width: 86px;

    display: flex;
    flex-direction: column;

    align-items: center;
    gap: 6px;

    text-align: center;
}

.technology-map-node strong {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(133,178,197,.25);

    border-radius: 50%;

    background:
        rgba(4,18,29,.92);

    color: #9cc3d3;

    font-size: 8px;
    font-weight: 700;
}

.technology-map-node span {
    max-width: 104px;

    color: #7c919c;

    font-size: 7px;
    font-weight: 600;
}

.technology-map-node.node-1 {
    left: 10%;
    top: 17%;
}

.technology-map-node.node-2 {
    right: 8%;
    top: 14%;
}

.technology-map-node.node-3 {
    right: -2%;
    top: 47%;
}

.technology-map-node.node-4 {
    right: 10%;
    bottom: 10%;
}

.technology-map-node.node-5 {
    left: 11%;
    bottom: 7%;
}

.technology-map-node.node-6 {
    left: -1%;
    top: 48%;
}

.technology-principle {
    padding:
        95px
        max(7vw,60px);

    display: grid;

    grid-template-columns:
        minmax(280px,.7fr)
        minmax(0,1.3fr);

    align-items: center;

    gap:
        clamp(
            60px,
            10vw,
            150px
        );

    background:
        var(--tech-ivory);

    color: #101820;
}

.technology-principle-head > span {
    color: #9d8248;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.technology-principle h2 {
    margin:
        14px
        0
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            42px,
            4.8vw,
            72px
        );

    font-weight: 500;
    line-height: .94;

    letter-spacing: -.04em;
}

.technology-principle h2 em {
    color: #9e7c37;
    font-weight: 400;
}

.technology-principle-flow {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;
    gap: 23px;
}

.technology-principle-flow article {
    min-height: 170px;

    padding: 8px 0;

    border-top:
        1px solid
        rgba(17,31,39,.18);
}

.technology-principle-flow article strong {
    display: block;

    margin-top: 14px;

    color: #ad8c49;

    font-size: 9px;
}

.technology-principle-flow article span {
    display: block;

    margin-top: 25px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;
}

.technology-principle-flow article p {
    margin:
        10px
        0
        0;

    color: #5a6264;

    font-size: 9px;
    line-height: 1.7;
}

.technology-principle-flow > i {
    color: #b59a60;

    font-style: normal;
    font-size: 15px;
}

.technology-featured,
.technology-others {
    padding:
        105px
        max(7vw,60px);
}

.technology-featured {
    background:
        linear-gradient(
            180deg,
            #04101c,
            #020914
        );
}

.technology-others {
    padding-top: 20px;
}

.technology-section-head {
    max-width: 1280px;

    margin:
        0
        auto
        56px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,430px);

    align-items: end;
    gap: 50px;
}

.technology-section-head h2 {
    margin:
        10px
        0
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            45px,
            5vw,
            76px
        );

    font-weight: 400;
    line-height: .92;

    letter-spacing: -.04em;
}

.technology-section-head h2 em {
    color: var(--tech-gold);
    font-weight: 400;
}

.technology-section-head > p {
    margin: 0;

    color: var(--tech-muted);

    font-size: 11px;
    line-height: 1.8;
}

.technology-featured-grid {
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 13px;
}

.technology-product-card {
    position: relative;

    min-width: 0;

    border:
        1px solid
        var(--tech-line);

    background:
        linear-gradient(
            145deg,
            rgba(12,30,44,.89),
            rgba(5,17,28,.9)
        );

    overflow: hidden;
}

.technology-product-card::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(80,150,177,.12),
            transparent 35%
        );

    transition:
        opacity .3s ease;

    pointer-events: none;
}

.technology-product-card:hover::before {
    opacity: 1;
}

.technology-product-featured {
    min-height: 550px;

    padding:
        clamp(
            28px,
            3.1vw,
            46px
        );
}

.technology-product-supporting {
    min-height: 440px;

    padding: 28px;
}

.technology-product-top {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;
    gap: 13px;
}

.technology-product-number {
    color: #526b78;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;
}

.technology-product-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(200,165,90,.22);

    border-radius: 50%;

    color: var(--tech-gold);

    font-size: 9px;
    font-weight: 700;
}

.technology-product-open {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--tech-line);

    border-radius: 50%;

    color: #8199a6 !important;

    font-size: 11px;

    text-decoration: none;
}

.technology-product-meta {
    position: relative;
    z-index: 1;

    margin-top:
        clamp(
            42px,
            5vw,
            72px
        );

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.technology-product-meta span {
    color: var(--tech-gold);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.technology-product-meta small {
    color: #5f7885;
    font-size: 7px;
}

.technology-product-card h3 {
    position: relative;
    z-index: 1;

    margin:
        13px
        0
        14px;

    color: var(--tech-text);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            3vw,
            45px
        );

    font-weight: 400;
    letter-spacing: -.03em;
}

.technology-product-supporting h3 {
    font-size:
        clamp(
            24px,
            2vw,
            31px
        );
}

.technology-product-description {
    position: relative;
    z-index: 1;

    max-width: 610px;

    margin: 0;

    color: #a5b4bc;

    font-size: 10px;
    line-height: 1.8;
}

.technology-product-evidence {
    position: relative;
    z-index: 1;

    margin-top: 32px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 13px;
}

.technology-product-evidence > div {
    padding: 15px 0 0;

    border-top:
        1px solid
        var(--tech-line);
}

.technology-product-evidence span {
    color: #657d89;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.technology-product-evidence p {
    margin:
        8px
        0
        0;

    color: #899da8;

    font-size: 8.5px;
    line-height: 1.7;
}

.technology-product-link {
    position: relative;
    z-index: 1;

    margin-top: 29px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color:
        var(--tech-gold-soft) !important;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: .04em;
}

.technology-other-grid {
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 10px;
}

.technology-product-supporting
.technology-product-evidence {
    grid-template-columns: 1fr;
}

.technology-boundary {
    padding:
        105px
        max(7vw,60px);

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(300px,.75fr);

    gap:
        clamp(
            70px,
            12vw,
            170px
        );

    align-items: start;

    background: #eae4d4;

    color: #121a20;
}

.technology-boundary h2 {
    margin:
        12px
        0
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            86px
        );

    font-weight: 500;
    line-height: .9;

    letter-spacing: -.045em;
}

.technology-boundary h2 em {
    display: block;

    color: #9e7c37;

    font-weight: 400;
}

.technology-boundary-copy {
    padding-top: 18px;

    border-top:
        1px solid
        rgba(15,26,32,.17);
}

.technology-boundary-copy p {
    margin:
        0
        0
        18px;

    color: #555f62;

    font-size: 11px;
    line-height: 1.85;
}

.technology-boundary-copy a {
    margin-top: 16px;

    min-height: 42px;

    padding:
        0
        16px;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    border:
        1px solid
        rgba(20,30,36,.2);

    color: #172228;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: .08em;
}

.technology-ending {
    position: relative;

    min-height: 620px;

    padding:
        110px
        max(7vw,60px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(33,94,120,.17),
            transparent 28%
        ),
        #020914;
}

.technology-ending-orbit {
    position: absolute;

    width: 560px;
    height: 560px;

    right: 6%;
    top: 50%;

    border:
        1px solid
        rgba(200,165,90,.1);

    border-radius: 50%;

    transform:
        translateY(-50%);
}

.technology-ending-orbit::before,
.technology-ending-orbit::after {
    content: "";

    position: absolute;
    inset: 16%;

    border:
        1px solid
        rgba(116,167,189,.1);

    border-radius: 50%;
}

.technology-ending-orbit::after {
    inset: 33%;
}

.technology-ending h2 {
    position: relative;
    z-index: 1;

    margin:
        14px
        0
        38px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            58px,
            7.4vw,
            112px
        );

    font-weight: 400;
    line-height: .82;

    letter-spacing: -.05em;
}

.technology-ending h2 em {
    color: var(--tech-gold);

    font-weight: 400;
}

.technology-ending-links {
    position: relative;
    z-index: 1;

    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.technology-ending-links a {
    padding-bottom: 6px;

    border-bottom:
        1px solid
        rgba(200,165,90,.25);

    color: #a5b6bf;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: .08em;
}

.technology-footer {
    min-height: 150px;

    padding:
        35px
        max(7vw,60px);

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;
    gap: 30px;

    border-top:
        1px solid
        var(--tech-line-soft);

    background: #010711;
}

.technology-footer > div {
    display: flex;
    flex-direction: column;
}

.technology-footer strong {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 19px;
    font-weight: 400;
}

.technology-footer div span {
    margin-top: 4px;

    color: var(--tech-muted-2);

    font-size: 6px;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.technology-footer nav {
    display: flex;
    gap: 22px;
}

.technology-footer nav a {
    color: #778c98;

    font-size: 8px;

    text-decoration: none;
}

.technology-footer small {
    justify-self: end;

    color: #536a77;

    font-size: 7px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1080px) {

    .technology-nav {
        padding:
            0
            28px;
    }

    .technology-nav-desktop {
        gap: 16px;
    }

    .technology-hero {
        grid-template-columns:
            minmax(0,1fr)
            minmax(370px,.7fr);

        padding-left: 55px;
        padding-right: 55px;
    }

    .technology-system-map {
        width: 390px;
    }

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

    .technology-product-supporting {
        min-height: 390px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:820px) {

    html {
        scroll-padding-top: 64px;
    }

    .technology-nav {
        min-height: 62px;

        padding:
            0
            16px;

        grid-template-columns:
            1fr auto;

        gap: 14px;
    }

    .technology-brand-mark {
        width: 30px;
        height: 30px;

        font-size: 17px;
    }

    .technology-brand strong {
        font-size: 9px;
    }

    .technology-brand small {
        font-size: 5px;
    }

    .technology-nav-desktop,
    .technology-nav-pill {
        display: none;
    }

    .technology-nav-mobile {
        position: relative;

        display: block;
    }

    .technology-nav-mobile summary {
        width: 35px;
        height: 35px;

        display: grid;
        place-content: center;

        gap: 5px;

        border:
            1px solid
            var(--tech-line);

        border-radius: 50%;

        list-style: none;

        cursor: pointer;
    }

    .technology-nav-mobile summary::-webkit-details-marker {
        display: none;
    }

    .technology-nav-mobile summary span {
        width: 14px;
        height: 1px;

        display: block;

        background: #cad1d3;
    }

    .technology-nav-mobile nav {
        position: absolute;

        top: 46px;
        right: 0;

        width:
            min(
                260px,
                calc(100vw - 32px)
            );

        padding: 10px;

        display: flex;
        flex-direction: column;

        border:
            1px solid
            var(--tech-line);

        background:
            rgba(4,15,25,.98);

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.3);
    }

    .technology-nav-mobile nav a {
        padding:
            13px
            12px;

        border-bottom:
            1px solid
            var(--tech-line-soft);

        color: #9dafb8;

        font-size: 9px;

        text-decoration: none;
    }

    .technology-nav-mobile nav a[aria-current="page"] {
        color: var(--tech-gold);
    }

    .technology-hero {
        min-height: auto;

        padding:
            112px
            20px
            62px;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 52px;
    }

    .technology-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(2,9,20,.88),
                rgba(2,9,20,.48)
            );
    }

    .technology-hero h1 {
        margin:
            14px
            0
            18px;

        font-size:
            clamp(
                48px,
                15vw,
                70px
            );

        line-height: .88;
    }

    .technology-hero-lead {
        max-width: 520px;

        font-size: 12px;
        line-height: 1.8;
    }

    .technology-hero-actions {
        margin-top: 25px;

        align-items: flex-start;
        flex-direction: column;

        gap: 16px;
    }

    .technology-primary-link {
        min-height: 42px;
    }

    .technology-stats {
        margin-top: 38px;

        max-width: none;

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .technology-stats > div {
        padding:
            17px
            8px
            0
            0;
    }

    .technology-stats strong {
        font-size: 25px;
    }

    .technology-stats span {
        font-size: 6px;
        line-height: 1.4;
    }

    .technology-system-map {
        width:
            min(
                100%,
                390px
            );

        margin:
            0
            auto;
    }

    .technology-map-core {
        width: 96px;
        height: 96px;
    }

    .technology-map-node {
        min-width: 62px;
    }

    .technology-map-node strong {
        width: 36px;
        height: 36px;
    }

    .technology-map-node span {
        max-width: 74px;

        font-size: 6px;
    }

    .technology-principle {
        padding:
            65px
            20px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .technology-principle h2 {
        font-size:
            clamp(
                39px,
                12vw,
                54px
            );
    }

    .technology-principle-flow {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .technology-principle-flow > i {
        padding: 8px 0;

        transform:
            rotate(90deg);

        justify-self: start;
    }

    .technology-principle-flow article {
        min-height: 0;

        padding-bottom: 19px;
    }

    .technology-principle-flow article span {
        margin-top: 14px;
    }

    .technology-featured,
    .technology-others {
        padding:
            74px
            16px;
    }

    .technology-others {
        padding-top: 5px;
    }

    .technology-section-head {
        margin-bottom: 35px;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .technology-section-head h2 {
        font-size:
            clamp(
                40px,
                13vw,
                58px
            );
    }

    .technology-section-head > p {
        max-width: 480px;

        font-size: 10px;
    }

    .technology-featured-grid,
    .technology-other-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .technology-product-featured,
    .technology-product-supporting {
        min-height: auto;

        padding:
            25px
            22px;
    }

    .technology-product-meta {
        margin-top: 34px;
    }

    .technology-product-card h3,
    .technology-product-supporting h3 {
        font-size:
            clamp(
                28px,
                9vw,
                39px
            );
    }

    .technology-product-description {
        font-size: 10px;
    }

    .technology-product-evidence {
        grid-template-columns: 1fr;

        margin-top: 26px;
    }

    .technology-product-evidence p {
        font-size: 8.5px;
    }

    .technology-boundary {
        padding:
            70px
            20px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .technology-boundary h2 {
        font-size:
            clamp(
                45px,
                14vw,
                66px
            );
    }

    .technology-boundary-copy {
        padding-top: 20px;
    }

    .technology-ending {
        min-height: 540px;

        padding:
            80px
            20px;
    }

    .technology-ending-orbit {
        width: 360px;
        height: 360px;

        right: -180px;
    }

    .technology-ending h2 {
        font-size:
            clamp(
                49px,
                15vw,
                72px
            );
    }

    .technology-ending-links {
        flex-direction: column;
        align-items: flex-start;
    }

    .technology-footer {
        min-height: auto;

        padding:
            34px
            20px;

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .technology-footer nav {
        flex-wrap: wrap;

        gap:
            14px
            20px;
    }

    .technology-footer small {
        justify-self: start;
    }
}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width:380px) {

    .technology-hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .technology-hero h1 {
        font-size: 47px;
    }

    .technology-stats {
        gap: 7px;
    }

    .technology-stats strong {
        font-size: 22px;
    }

    .technology-map-node span {
        display: none;
    }

    .technology-map-node strong {
        width: 33px;
        height: 33px;
    }

    .technology-product-featured,
    .technology-product-supporting {
        padding:
            22px
            18px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* ==========================================================
   TECHNOLOGY V1B
   TYPOGRAPHY / DENSITY / NAV ALIGNMENT
   ========================================================== */


/* Desktop: bring header scale in line with other public pages. */
@media (min-width: 821px) {

    .technology-nav {
        min-height: 84px;

        padding:
            0
            clamp(32px, 5vw, 78px);
    }

    .technology-brand-mark {
        width: 40px;
        height: 40px;

        font-size: 22px;
    }

    .technology-brand strong {
        font-size: 12px;
    }

    .technology-brand small {
        margin-top: 4px;

        font-size: 7px;
    }

    .technology-nav-desktop {
        gap:
            clamp(
                20px,
                2.5vw,
                34px
            );
    }

    .technology-nav-desktop a {
        padding:
            33px
            0
            30px;

        font-size:
            clamp(
                11px,
                .82vw,
                12.5px
            );

        font-weight: 500;
    }

    .technology-nav-desktop a::after {
        bottom: 23px;
    }

    .technology-nav-pill {
        min-height: 40px;

        padding:
            0
            17px;

        font-size: 10px;
    }


    /* Hero */
    .technology-hero {
        padding-top: 168px;
    }

    .technology-eyebrow {
        font-size: 10px;
    }

    .technology-hero-lead {
        max-width: 650px;

        font-size:
            clamp(
                15px,
                1.12vw,
                17px
            );

        line-height: 1.85;
    }

    .technology-primary-link {
        min-height: 46px;

        padding:
            0
            20px;

        font-size: 10.5px;
    }

    .technology-text-link {
        font-size: 11px;
    }

    .technology-stats span {
        font-size: 9px;
    }


    /* Ivory methodology band */
    .technology-principle-head > span {
        font-size: 10px;
    }

    .technology-principle-flow article strong {
        font-size: 11px;
    }

    .technology-principle-flow article span {
        font-size: 26px;
    }

    .technology-principle-flow article p {
        font-size: 12.5px;
        line-height: 1.7;
    }


    /* Section intros */
    .technology-section-head > p {
        max-width: 470px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* Featured cards */
    .technology-product-featured {
        min-height: 0;

        padding:
            clamp(
                34px,
                3.1vw,
                44px
            );
    }

    .technology-product-meta {
        margin-top:
            clamp(
                34px,
                3.5vw,
                48px
            );
    }

    .technology-product-meta span {
        font-size: 9.5px;
    }

    .technology-product-meta small {
        font-size: 9px;
    }

    .technology-product-card h3 {
        margin-top: 16px;
    }

    .technology-product-description {
        max-width: 660px;

        font-size: 14px;
        line-height: 1.75;
    }

    .technology-product-evidence {
        margin-top: 29px;

        gap: 24px;
    }

    .technology-product-evidence > div {
        padding-top: 17px;
    }

    .technology-product-evidence span {
        font-size: 9.5px;
    }

    .technology-product-evidence p {
        margin-top: 10px;

        font-size: 12.5px;
        line-height: 1.72;
    }

    .technology-product-link {
        margin-top: 30px;

        font-size: 10.5px;
    }


    /* Supporting products:
       4 narrow columns made the copy too small.
       Use a readable 2 x 2 editorial grid instead. */
    .technology-other-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 13px;
    }

    .technology-product-supporting {
        min-height: 0;

        padding:
            34px
            34px
            36px;
    }

    .technology-product-supporting h3 {
        font-size:
            clamp(
                30px,
                2.5vw,
                40px
            );
    }

    .technology-product-supporting
    .technology-product-evidence {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    /* Ivory personal-portfolio band */
    .technology-boundary-copy p {
        font-size: 14px;
        line-height: 1.8;
    }

    .technology-boundary-copy a {
        min-height: 45px;

        padding:
            0
            18px;

        font-size: 10px;
    }


    /* Ending + footer */
    .technology-ending-links a {
        font-size: 10px;
    }

    .technology-footer nav a {
        font-size: 10px;
    }

    .technology-footer small {
        font-size: 8.5px;
    }
}


/* Mobile is recomposed for reading, not shrunk desktop. */
@media (max-width: 820px) {

    .technology-eyebrow {
        font-size: 9px;
    }

    .technology-nav-mobile nav a {
        padding:
            14px
            13px;

        font-size: 12px;
    }

    .technology-hero-lead {
        font-size: 14px;
        line-height: 1.75;
    }

    .technology-primary-link {
        font-size: 10px;
    }

    .technology-text-link {
        font-size: 10.5px;
    }

    .technology-stats span {
        font-size: 7.5px;
    }


    .technology-principle-head > span {
        font-size: 9px;
    }

    .technology-principle-flow article strong {
        font-size: 10px;
    }

    .technology-principle-flow article span {
        font-size: 25px;
    }

    .technology-principle-flow article p {
        max-width: 330px;

        font-size: 13px;
        line-height: 1.7;
    }


    .technology-section-head > p {
        font-size: 13px;
        line-height: 1.72;
    }


    .technology-product-featured,
    .technology-product-supporting {
        padding:
            27px
            23px
            30px;
    }

    .technology-product-number {
        font-size: 14px;
    }

    .technology-product-meta {
        margin-top: 31px;
    }

    .technology-product-meta span {
        font-size: 9px;
    }

    .technology-product-meta small {
        font-size: 8.5px;
    }

    .technology-product-description {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .technology-product-evidence {
        margin-top: 27px;
    }

    .technology-product-evidence span {
        font-size: 9px;
    }

    .technology-product-evidence p {
        margin-top: 9px;

        font-size: 12.5px;
        line-height: 1.72;
    }

    .technology-product-link {
        margin-top: 28px;

        font-size: 10px;
    }


    .technology-boundary-copy p {
        font-size: 14px;
        line-height: 1.78;
    }

    .technology-boundary-copy a {
        font-size: 10px;
    }


    .technology-ending-links a {
        font-size: 10px;
    }

    .technology-footer nav a {
        font-size: 10px;
    }

    .technology-footer small {
        font-size: 8px;
    }
}