:root {
    --bg: #080808;
    --text: #f3f3ef;
    --muted: #9b9b95;
    --muted2: #62625e;
    --line: rgba(255, 255, 255, .09);
    --soft: rgba(255, 255, 255, .055);
    --green: #75eda2;
    --mx: 50%;
    --my: 50%
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    background: var(--bg);
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: radial-gradient(circle at var(--mx) var(--my), rgba(90, 110, 255, .065), transparent 30rem), var(--bg);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

body.menu-open {
    overflow: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

::selection {
    background: rgba(105, 125, 255, .35);
    color: #fff
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden
}

.grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
    opacity: .48
}

.orb {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    filter: blur(140px);
    background: #566aff;
    opacity: .065;
    top: 12%;
    right: -280px;
    animation: drift 25s ease-in-out infinite alternate
}

.orb.b {
    width: 520px;
    height: 520px;
    left: -250px;
    right: auto;
    top: 65%;
    background: #8f59ff;
    opacity: .035;
    animation-duration: 30s
}

@keyframes drift {
    to {
        transform: translate3d(-130px, 100px, 0) scale(1.1)
    }
}

.page {
    position: relative;
    z-index: 1;
    width: min(1500px, 100%);
    margin: auto;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 62px) 38px
}

header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 34px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    animation: down .7s ease both
}

.brand {
    justify-self: start;
    font-weight: 700;
    letter-spacing: .13em
}

.brand span {
    color: var(--muted2)
}

.nav,
.ext {
    display: flex;
    align-items: center;
    gap: 31px
}

.ext {
    justify-self: end;
    gap: 23px
}

.nav a,
.ext a {
    color: var(--muted);
    transition: .2s
}

.nav a:hover,
.ext a:hover,
.nav .active {
    color: var(--text)
}

.menub {
    display: none;
    justify-self: end;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 101
}

.menub span {
    position: absolute;
    width: 21px;
    height: 1px;
    left: 8px;
    background: var(--text);
    transition: .3s
}

.menub span:first-child {
    top: 13px
}

.menub span:last-child {
    top: 21px
}

.menub.active span:first-child {
    top: 17px;
    transform: rotate(45deg)
}

.menub.active span:last-child {
    top: 17px;
    transform: rotate(-45deg)
}

.mobile {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(8, 8, 8, .975);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: .32s
}

.mobile.open {
    opacity: 1;
    visibility: visible
}

.mobilein {
    height: 100%;
    padding: 110px 26px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.mlinks {
    display: flex;
    flex-direction: column
}

.mlink {
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--line)
}

.mnum {
    color: var(--muted2);
    font-size: 11px
}

.mname {
    font-size: clamp(36px, 11vw, 54px);
    line-height: 1;
    letter-spacing: -.05em
}

.mfoot {
    display: flex;
    gap: 25px;
    color: var(--muted);
    font-size: 13px
}

footer {
    border-top: 1px solid var(--line);
    padding-top: 21px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted2);
    font-size: 10px;
    letter-spacing: .06em
}

.label {
    color: var(--muted2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em
}

.hero {
    min-height: 84svh;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero .label {
    font-size: 11px;
    margin-bottom: 30px;
    animation: up .8s .08s ease both
}

.hero h1 {
    max-width: 1120px;
    font-size: clamp(58px, 8.9vw, 134px);
    line-height: .91;
    letter-spacing: -.07em;
    font-weight: 650;
    animation: up .9s .15s ease both
}

.soft {
    color: rgba(243, 243, 239, .36)
}

.lead {
    max-width: 650px;
    margin-top: 46px;
    color: var(--muted);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.75;
    animation: up .9s .25s ease both
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s, transform .8s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

@keyframes down {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.link {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .23);
    color: rgba(243, 243, 239, .83);
    font-size: 13px;
    transition: .25s
}

.link:hover {
    gap: 13px;
    color: #fff;
    border-color: #fff
}

/* home */
.home {
    min-height: 100svh;
    display: flex;
    flex-direction: column
}

.homemain {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.homehero {
    width: min(1050px, 100%);
    text-align: center;
    padding: 80px 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 13px;
    animation: up .8s .08s ease both
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7fffaa;
    box-shadow: 0 0 14px rgba(127, 255, 170, .45);
    animation: pulse 3s ease-in-out infinite
}

@keyframes pulse {
    50% {
        transform: scale(1.08);
        opacity: 1
    }
}

.hname {
    margin-bottom: 25px;
    color: rgba(243, 243, 239, .75);
    font-size: clamp(18px, 1.8vw, 25px);
    animation: up .8s .14s ease both
}

.homehero h1 {
    font-size: clamp(54px, 8.2vw, 112px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 650;
    animation: up .9s .2s ease both
}

.hdesc {
    margin-top: 43px;
    color: var(--muted);
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.75;
    animation: up .9s .3s ease both
}

.hdesc strong {
    color: var(--text);
    font-weight: 500
}

.hlinks {
    margin-top: 37px;
    display: flex;
    justify-content: center;
    gap: 30px;
    animation: up .9s .38s ease both
}

.hlinks .link {
    font-size: 14px
}

/* work */
.projects {
    border-top: 1px solid var(--line)
}

.project {
    padding: clamp(90px, 11vw, 165px) 0;
    border-bottom: 1px solid var(--line)
}

.phead {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 35px;
    margin-bottom: clamp(55px, 7vw, 95px)
}

.pnum {
    color: var(--muted2);
    font-size: 11px;
    letter-spacing: .15em;
    padding-top: 9px
}

.pk {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 19px
}

.phead h2 {
    font-size: clamp(48px, 6.5vw, 96px);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 590
}

.flag {
    margin-left: 127px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(50px, 7vw, 110px);
    margin-bottom: clamp(65px, 8vw, 110px)
}

.copy {
    color: var(--muted);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.78
}

.copy strong,
.stdcopy strong {
    color: var(--text);
    font-weight: 500
}

.facts {
    border-top: 1px solid var(--line)
}

.fact {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--soft);
    font-size: 12px;
    line-height: 1.55
}

.fact b {
    color: var(--muted2);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em
}

.arch {
    position: relative;
    margin-left: 127px;
    min-height: clamp(520px, 55vw, 760px);
    border: 1px solid var(--soft);
    overflow: hidden;
    background: radial-gradient(circle at 50% 48%, rgba(93, 112, 255, .11), transparent 32%), linear-gradient(145deg, #101011, #090909)
}

.arch:before,
.visual:before,
.hwvisual:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .023) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .023) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .5
}

.arch .label {
    position: absolute;
    left: 24px;
    top: 21px;
    z-index: 2
}

.arch svg {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%
}

.node {
    fill: rgba(13, 13, 15, .94);
    stroke: rgba(255, 255, 255, .14)
}

.mainnode {
    stroke: rgba(120, 140, 255, .42);
    fill: rgba(20, 21, 31, .94)
}

.nt {
    fill: #f2f2ef;
    font-size: 16px;
    font-weight: 600
}

.ns {
    fill: #85857f;
    font-size: 10px
}

.conn {
    stroke: rgba(255, 255, 255, .18);
    fill: none
}

.accent {
    stroke: rgba(110, 130, 255, .6)
}

.pulse {
    fill: #8796ff;
    filter: drop-shadow(0 0 6px rgba(110, 130, 255, .8))
}

.note {
    margin: clamp(65px, 8vw, 105px) 0 0 127px;
    max-width: 880px;
    padding-left: 28px;
    border-left: 1px solid rgba(115, 239, 164, .38)
}

.note .label {
    margin-bottom: 18px
}

.note p {
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.25;
    letter-spacing: -.035em;
    color: rgba(243, 243, 239, .85)
}

.systems {
    margin: clamp(75px, 9vw, 130px) 0 0 127px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line)
}

.sys {
    min-height: 410px;
    padding: 30px 30px 34px 0;
    border-bottom: 1px solid var(--line);
    position: relative
}

.sys:not(:last-child) {
    border-right: 1px solid var(--line);
    padding-right: 34px;
    margin-right: 34px
}

.sysnum {
    color: var(--muted2);
    font-size: 10px;
    letter-spacing: .13em;
    margin-bottom: 60px
}

.sys h3 {
    font-size: clamp(28px, 2.8vw, 42px);
    letter-spacing: -.045em;
    font-weight: 570;
    margin-bottom: 12px
}

.tag {
    color: rgba(243, 243, 239, .38);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 29px
}

.sys p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72
}

.stack {
    position: absolute;
    bottom: 31px;
    left: 0;
    right: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--soft);
    color: var(--muted2);
    font-size: 10px;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: .06em
}

.std {
    margin-left: 127px;
    display: grid;
    grid-template-columns: 1.45fr .65fr;
    gap: clamp(50px, 7vw, 100px)
}

.visual {
    position: relative;
    min-height: clamp(350px, 44vw, 610px);
    overflow: hidden;
    border: 1px solid var(--soft);
    background: radial-gradient(circle at 50% 50%, rgba(100, 120, 255, .12), transparent 32%), #0c0c0d
}

.stdcopy p {
    color: var(--muted);
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.72
}

.meta {
    margin-top: 45px;
    border-top: 1px solid var(--line)
}

.metarow {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--soft);
    font-size: 11px;
    line-height: 1.55
}

.metarow b {
    color: var(--muted2);
    font-weight: 400;
    text-transform: uppercase
}

.agents {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center
}

.acenter,
.agent {
    position: absolute;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.acenter {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(125, 140, 255, .38);
    background: rgba(17, 18, 27, .9);
    font-size: 12px;
    z-index: 2
}

.agent {
    width: 76px;
    height: 76px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(12, 12, 13, .9);
    color: var(--muted);
    font-size: 11px
}

.a1 {
    transform: translate(0, -190px)
}

.a2 {
    transform: translate(165px, -95px)
}

.a3 {
    transform: translate(165px, 95px)
}

.a4 {
    transform: translate(0, 190px)
}

.a5 {
    transform: translate(-165px, 95px)
}

.a6 {
    transform: translate(-165px, -95px)
}

.orbit {
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .06)
}

.orbit.s {
    width: 270px;
    height: 270px;
    border-style: dashed;
    animation: spin 35s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.db {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px
}

.layer {
    width: clamp(210px, 35vw, 460px);
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(15, 15, 17, .9);
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.layer.hot {
    border-color: rgba(255, 130, 80, .35);
    color: var(--text)
}

.pipe {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 28px);
    padding: 30px
}

.pn {
    width: clamp(90px, 14vw, 155px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(13, 13, 15, .93);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px
}

.pn span {
    color: var(--muted2);
    font-size: 9px;
    text-transform: uppercase
}

.arr {
    color: var(--muted2);
    font-size: 19px
}

.closing {
    min-height: 72svh;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.closing h2 {
    font-size: clamp(51px, 7.4vw, 110px);
    line-height: .93;
    letter-spacing: -.065em;
    font-weight: 600
}

.closing .link {
    margin-top: 41px
}

/* experience */
.elist {
    border-top: 1px solid var(--line)
}

.exp {
    display: grid;
    grid-template-columns: minmax(115px, .27fr) 1fr;
    gap: clamp(38px, 6vw, 90px);
    padding: clamp(85px, 10vw, 145px) 0;
    border-bottom: 1px solid var(--line)
}

.date {
    color: var(--muted2);
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-top: 10px
}

.org {
    margin-bottom: 13px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase
}

.exp h2 {
    font-size: clamp(42px, 5.6vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 590
}

.role {
    margin-top: 18px;
    color: rgba(243, 243, 239, .62);
    font-size: clamp(14px, 1.2vw, 17px)
}

.ebody {
    margin-top: clamp(45px, 5vw, 70px);
    display: grid;
    grid-template-columns: 1.2fr .7fr;
    gap: clamp(45px, 6vw, 90px)
}

.ecopy {
    color: var(--muted);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.78
}

.ecopy strong {
    color: var(--text);
    font-weight: 500
}

.metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line)
}

.metric {
    min-height: 135px;
    padding: 19px 18px 18px 0;
    border-bottom: 1px solid var(--soft)
}

.metric:nth-child(odd) {
    border-right: 1px solid var(--soft);
    margin-right: 18px
}

.mval {
    display: block;
    margin-bottom: 9px;
    font-size: clamp(29px, 3vw, 48px);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 580
}

.mlab {
    display: block;
    max-width: 170px;
    color: var(--muted2);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase
}

.quote {
    margin-top: 48px;
    max-width: 780px;
    padding-left: 25px;
    border-left: 1px solid rgba(115, 239, 164, .35);
    color: rgba(243, 243, 239, .78);
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.3;
    letter-spacing: -.03em
}

.section {
    padding: clamp(110px, 13vw, 190px) 0;
    border-bottom: 1px solid var(--line)
}

.twocol {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: clamp(38px, 6vw, 90px)
}

.section h2 {
    font-size: clamp(46px, 6.4vw, 96px);
    line-height: .95;
    letter-spacing: -.06em;
    font-weight: 590
}

.sectionbody {
    margin-top: clamp(60px, 7vw, 95px);
    margin-left: calc(115px + clamp(38px, 6vw, 90px));
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(50px, 7vw, 100px)
}

.slist {
    border-top: 1px solid var(--line)
}

.srow {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--soft);
    font-size: 12px;
    line-height: 1.55
}

.srow b {
    color: var(--muted2);
    font-weight: 400;
    text-transform: uppercase
}

.hwvisual {
    margin-top: clamp(65px, 8vw, 110px);
    margin-left: calc(115px + clamp(38px, 6vw, 90px));
    min-height: clamp(300px, 35vw, 500px);
    border: 1px solid var(--soft);
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(100, 120, 255, .08), transparent 31%), #0c0c0d
}

.chain {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    gap: clamp(10px, 2vw, 26px)
}

.hwnode {
    width: clamp(100px, 16vw, 190px);
    min-height: clamp(100px, 14vw, 150px);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(13, 13, 15, .93);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px
}

.hwnode span {
    color: var(--muted2);
    font-size: 9px;
    text-transform: uppercase
}

.originbody {
    margin-top: 48px;
    color: var(--muted);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.8
}

.originbody strong {
    color: var(--text);
    font-weight: 500
}

.originmeta {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line)
}

.oi {
    padding: 19px 30px 20px 0;
    border-bottom: 1px solid var(--soft)
}

.oi:not(:last-child) {
    border-right: 1px solid var(--soft);
    margin-right: 30px
}

.oi strong {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(19px, 2vw, 28px);
    font-weight: 550
}

.oi span {
    color: var(--muted2);
    font-size: 10px;
    text-transform: uppercase
}

/* about */
.aboutlead {
    margin-top: 45px;
    color: var(--muted);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
    animation: up .9s .25s ease both
}

.story,
.principles,
.beyond,
.aboutfacts,
.current {
    padding: clamp(110px, 13vw, 190px) 0;
    border-bottom: 1px solid var(--line)
}

.story {
    border-top: 1px solid var(--line)
}

.storygrid,
.currentgrid {
    display: grid;
    grid-template-columns: .45fr 1fr;
    gap: clamp(50px, 8vw, 130px)
}

.story h2,
.principles h2,
.beyond h2,
.current h2 {
    font-size: clamp(46px, 6.2vw, 94px);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 590
}

.storycopy {
    margin-top: 50px;
    color: var(--muted);
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.85
}

.storycopy strong,
.principle p strong,
.btext strong {
    color: var(--text);
    font-weight: 500
}

.storyquote {
    margin-top: 58px;
    padding-left: 27px;
    border-left: 1px solid rgba(115, 239, 164, .38);
    font-size: clamp(23px, 2.7vw, 40px);
    line-height: 1.25
}

.principles h2 {
    margin-bottom: clamp(70px, 9vw, 125px)
}

.plist {
    border-top: 1px solid var(--line)
}

.principle {
    display: grid;
    grid-template-columns: 90px .75fr 1fr;
    gap: clamp(30px, 5vw, 75px);
    padding: clamp(48px, 6vw, 80px) 0;
    border-bottom: 1px solid var(--line)
}

.principle h3 {
    font-size: clamp(30px, 3.8vw, 54px);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 570
}

.principle p {
    color: var(--muted);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.78
}

.bgrid {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: clamp(55px, 8vw, 120px)
}

.btext {
    margin-top: 47px;
    color: var(--muted);
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.8
}

.places {
    border-top: 1px solid var(--line)
}

.place {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--soft)
}

.place b {
    color: var(--muted2);
    font-size: 10px;
    font-weight: 400
}

.place span {
    display: block;
    color: rgba(243, 243, 239, .82);
    font-size: 15px
}

.place small {
    color: var(--muted2);
    font-size: 11px
}

.aboutfacts {
    display: grid;
    grid-template-columns: 1.15fr .55fr;
    gap: clamp(60px, 9vw, 140px)
}

.edus,
.langs {
    border-top: 1px solid var(--line);
    margin-top: 43px
}

.edu {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid var(--soft)
}

.edu b {
    color: var(--muted2);
    font-size: 10px;
    font-weight: 400
}

.edu span {
    display: block;
    font-size: clamp(18px, 1.7vw, 24px)
}

.edu small {
    color: var(--muted);
    font-size: 13px
}

.lang {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--soft)
}

.lang span {
    font-size: clamp(18px, 1.7vw, 24px)
}

.lang b {
    color: var(--muted2);
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase
}

.currentgrid2 {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line)
}

.ci {
    padding: 25px 30px 25px 0;
    border-bottom: 1px solid var(--soft)
}

.ci:not(:last-child) {
    margin-right: 30px;
    border-right: 1px solid var(--soft)
}

.ci span {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(18px, 1.8vw, 25px)
}

.ci small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65
}

.manifesto {
    min-height: 90svh;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.manifesto h2 {
    font-size: clamp(51px, 7.5vw, 112px);
    line-height: .92;
    letter-spacing: -.068em;
    font-weight: 610
}

.manifesto p {
    max-width: 560px;
    margin-top: 42px;
    color: var(--muted);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7
}

.contacts {
    margin-top: 40px;
    display: flex;
    gap: 28px
}

@media(max-width:1000px) {

    .flag,
    .arch,
    .note,
    .systems,
    .std {
        margin-left: 0
    }

    .flag,
    .ebody,
    .sectionbody,
    .storygrid,
    .bgrid,
    .aboutfacts,
    .currentgrid {
        grid-template-columns: 1fr
    }

    .systems {
        grid-template-columns: 1fr
    }

    .sys {
        min-height: auto;
        padding: 36px 0 40px
    }

    .sys:not(:last-child) {
        border-right: 0;
        margin-right: 0;
        padding-right: 0
    }

    .sysnum {
        margin-bottom: 25px
    }

    .stack {
        position: static;
        margin-top: 30px
    }

    .originmeta,
    .currentgrid2 {
        grid-template-columns: 1fr
    }

    .oi,
    .ci {
        margin-right: 0 !important;
        border-right: 0 !important
    }

    .principle {
        grid-template-columns: 60px .7fr 1fr
    }
}

@media(max-width:820px) {
    header {
        grid-template-columns: 1fr auto
    }

    .nav,
    .ext {
        display: none
    }

    .menub {
        display: block
    }

    .homemain {
        align-items: flex-start
    }

    .homehero {
        text-align: left;
        padding-top: 22vh
    }

    .hlinks {
        justify-content: flex-start
    }

    .hero {
        min-height: 82svh
    }

    .phead,
    .exp,
    .twocol {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .pnum,
    .date {
        padding-top: 0
    }

    .std {
        grid-template-columns: 1fr
    }

    .arch {
        min-height: 590px
    }

    .sectionbody,
    .hwvisual {
        margin-left: 0
    }

    .principle {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .edu {
        grid-template-columns: 1fr;
        gap: 8px
    }

    footer {
        flex-direction: column
    }
}

@media(max-width:560px) {
    .page {
        padding-left: 20px;
        padding-right: 20px
    }

    .homehero h1 {
        font-size: clamp(50px, 15vw, 76px)
    }

    .hero h1 {
        font-size: clamp(53px, 16vw, 80px)
    }

    .project {
        padding: 88px 0
    }

    .phead h2,
    .exp h2,
    .section h2,
    .story h2,
    .principles h2,
    .beyond h2,
    .current h2 {
        font-size: clamp(43px, 12vw, 62px)
    }

    .arch {
        min-height: 520px
    }

    .arch svg {
        inset: 2.5%;
        width: 95%;
        height: 95%
    }

    .visual {
        min-height: 330px
    }

    .agent {
        width: 58px;
        height: 58px
    }

    .acenter {
        width: 90px;
        height: 90px
    }

    .a1 {
        transform: translate(0, -135px)
    }

    .a2 {
        transform: translate(118px, -68px)
    }

    .a3 {
        transform: translate(118px, 68px)
    }

    .a4 {
        transform: translate(0, 135px)
    }

    .a5 {
        transform: translate(-118px, 68px)
    }

    .a6 {
        transform: translate(-118px, -68px)
    }

    .orbit {
        width: 285px;
        height: 285px
    }

    .orbit.s {
        width: 200px;
        height: 200px
    }

    .pipe {
        flex-direction: column
    }

    .arr {
        transform: rotate(90deg)
    }

    .metrics {
        grid-template-columns: 1fr
    }

    .metric:nth-child(odd) {
        border-right: 0;
        margin-right: 0
    }

    .chain {
        flex-direction: column
    }

    .hwvisual {
        min-height: 620px
    }

    .storycopy {
        font-size: 16px
    }

    .place {
        grid-template-columns: 58px 1fr
    }

    .aboutfacts {
        gap: 80px
    }

    .manifesto h2 {
        font-size: clamp(49px, 14.5vw, 75px)
    }

    .contacts {
        flex-direction: column;
        align-items: flex-start
    }
}

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

    *,
    *:before,
    *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}