:root {
    --dark: #091a21;
    --deep: #061116;
    --clay: #f1e0d6;
    --brown: #3d2d20;
    --paper: #f5f0e8;
    --blue: #2e59c2;
    --white: #fff;
    --shell: min(1320px, calc(100vw - 80px));
    --ease: cubic-bezier(.16, 1, .3, 1)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--dark);
    color: #fff;
    font-family: Poppins, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

body.menu-open {
    overflow: hidden
}

img,
video,
svg {
    display: block;
    max-width: 100%
}

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

button {
    font: inherit;
    color: inherit
}

.shell {
    width: var(--shell);
    margin: auto
}

.dark {
    background: var(--dark)
}

.clay {
    background: var(--clay);
    color: var(--brown)
}

.paper {
    background: var(--paper);
    color: var(--dark)
}

.skip {
    position: fixed;
    z-index: 10000;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    transform: translateY(-150%);
    background: #fff;
    color: #000;
    border-radius: 99px
}

.skip:focus {
    transform: none
}

.index {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase
}

.index:before {
    width: 28px;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: .5
}

.eyebrow {
    margin: 0 0 20px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase
}

.mask {
    display: block;
    overflow: hidden
}

.mask>b {
    display: block;
    font-weight: inherit
}

:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 5px
}

.loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    background: var(--dark);
    color: var(--clay)
}

.loader>b {
    display: grid;
    width: 86px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #f1e0d65c;
    border-radius: 50%;
    font: 46px Georgia
}

.loader>i {
    width: min(280px, 65vw);
    height: 1px;
    margin-top: 32px;
    overflow: hidden;
    background: #f1e0d62b
}

.loader>i span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--clay)
}

.loader small {
    margin-top: 12px;
    font-size: 8px;
    letter-spacing: .25em;
    text-transform: uppercase
}

.progress {
    position: fixed;
    z-index: 50;
    top: 50%;
    right: 20px;
    display: grid;
    height: 240px;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 8px;
    transform: translateY(-50%);
    mix-blend-mode: difference;
    pointer-events: none
}

.progress em {
    font-size: 7px;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
    writing-mode: vertical-rl
}

.progress>i {
    position: relative;
    width: 1px;
    height: 100%;
    background: #ffffff42
}

.progress>i span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: #fff
}

.progress>i b {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    border-radius: 50%
}

.header {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 100px;
    grid-template-columns: 230px 1fr 230px;
    align-items: center;
    padding: 0 40px;
    transition: .4s var(--ease)
}

.header.condensed {
    height: 74px;
    border-bottom: 1px solid #091a211f;
    background: #f5f0e8e8;
    color: var(--brown);
    backdrop-filter: blur(18px)
}

.brand {
    position: relative;
    width: 156px
}

.brand img {
    width: 100%;
    transition: .3s
}

.brand-dark {
    position: absolute;
    inset: 0;
    opacity: 0
}

.header.condensed .brand-light {
    opacity: 0
}

.header.condensed .brand-dark {
    opacity: 1
}

.header>nav {
    display: flex;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 42px)
}

.header>nav a {
    position: relative;
    padding: 9px 0;
    font-size: 10px;
    letter-spacing: .06em
}

.header>nav a:after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background: currentColor;
    content: "";
    transition: .4s var(--ease)
}

.header>nav a:hover:after {
    transform: scaleX(1);
    transform-origin: left
}

.pill {
    display: flex;
    width: max-content;
    justify-self: end;
    align-items: center;
    gap: 15px;
    padding: 12px 17px;
    border: 1px solid;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .07em
}

.menu {
    display: none;
    width: 46px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid;
    border-radius: 50%;
    background: none
}

.menu i {
    display: block;
    width: 16px;
    height: 1px;
    margin: 5px auto;
    background: currentColor;
    transition: .3s
}

.menu[aria-expanded=true] i:first-child {
    transform: translateY(3px) rotate(45deg)
}

.menu[aria-expanded=true] i:last-child {
    transform: translateY(-3px) rotate(-45deg)
}

.mobile-nav {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: none;
    visibility: hidden;
    padding: 110px 24px 40px;
    background: var(--dark);
    opacity: 0
}

.mobile-nav nav {
    display: grid;
    align-content: end;
    height: 100%
}

.mobile-nav a {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #ffffff2e;
    font-size: clamp(25px, 8vw, 40px);
    line-height: 1
}

.mobile-nav a span {
    font-size: 8px;
    letter-spacing: .15em
}

.hero {
    height: 185svh;
    background: var(--deep)
}

.hero-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden
}

.hero video,
.veil,
.grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.hero video {
    object-fit: cover;
    object-position: center 58%;
    transform: scale(1.01)
}

.veil {
    background: linear-gradient(90deg, #030c10c7 0%, #030c1038 58%, #030c107a), linear-gradient(0deg, #030c10d4, transparent 48%, #030c1052)
}

.grain {
    opacity: .055;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.aperture {
    position: absolute;
    top: 50%;
    left: 62%;
    width: min(41vw, 610px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%)
}

.aperture i {
    position: absolute;
    border: 1px solid #ffffff5c;
    border-radius: 50%
}

.aperture i:first-child {
    inset: 0
}

.aperture i:nth-child(2) {
    inset: 22%;
    border-style: dashed
}

.aperture b {
    position: absolute;
    top: 50%;
    left: -12%;
    width: 124%;
    height: 1px;
    background: #ffffff3c
}

.hero-meta {
    position: absolute;
    z-index: 2;
    top: 125px;
    right: 42px;
    left: 42px;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase
}

.hero-copy {
    position: absolute;
    z-index: 2;
    right: 8vw;
    bottom: 8.5vh;
    left: 7vw
}

.hero h1 {
    max-width: 1020px;
    margin: 0;
    font-size: clamp(52px, 6.9vw, 112px);
    font-weight: 300;
    letter-spacing: -.065em;
    line-height: .93
}

.hero h1 .accent {
    margin-left: .72em;
    color: var(--clay)
}

.hero-bottom {
    display: flex;
    max-width: 940px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-top: 36px
}

.hero-bottom>p {
    max-width: 510px;
    margin: 0;
    color: #ffffffc7;
    font-size: 13px;
    line-height: 1.8
}

.round {
    position: relative;
    display: grid;
    width: 112px;
    aspect-ratio: 1;
    flex: 0 0 112px;
    place-items: center;
    border: 1px solid #ffffff8a;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase
}

.round:before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--clay);
    content: ""
}

.round>b {
    position: absolute;
    bottom: 17px
}

.scroll-cue {
    position: absolute;
    right: 38px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .2em;
    text-transform: uppercase;
    writing-mode: vertical-rl
}

.scroll-cue i {
    display: block;
    width: 1px;
    height: 50px;
    background: #ffffff54
}

.complexity {
    min-height: 270svh
}

.complexity-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    padding: 105px 7vw 60px
}

.complexity .index {
    position: absolute;
    top: 105px;
    left: 7vw
}

.field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: .12;
    pointer-events: none
}

.field b {
    position: absolute;
    font-size: clamp(62px, 11vw, 185px);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: .8;
    white-space: nowrap
}

.field b:nth-child(1) {
    top: 10%;
    left: -5%
}

.field b:nth-child(2) {
    top: 39%;
    right: -10%
}

.field b:nth-child(3) {
    bottom: 15%;
    left: -8%
}

.field b:nth-child(4) {
    right: 5%;
    bottom: -3%
}

.object {
    position: absolute;
    top: 50%;
    right: 5vw;
    width: min(55vw, 780px);
    aspect-ratio: 1;
    transform: translateY(-50%)
}

.object i {
    position: absolute;
    inset: 4%;
    border: 1px solid #3d2d2042;
    border-radius: 50%
}

.object i:nth-child(2) {
    inset: 20%;
    border-style: dashed
}

.object img {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%;
    object-fit: contain;
    border-radius: 50%;
    mix-blend-mode: multiply
}

.complexity-copy {
    position: relative;
    z-index: 2;
    width: min(650px, 49vw);
    top: 50%;
    transform: translateY(-42%)
}

.complexity-copy h2 {
    margin: 0;
    font-size: clamp(38px, 4.6vw, 72px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: 1.02
}

.complexity-copy>p:not(.eyebrow) {
    max-width: 540px;
    margin: 28px 0 0;
    font-size: 13px;
    line-height: 1.85
}

.complexity-copy strong {
    display: block;
    max-width: 540px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #3d2d2033;
    font-size: 13px;
    font-weight: 500
}

.complexity-copy strong:before {
    display: none
}

.coordinates {
    position: absolute;
    right: 7vw;
    bottom: 38px;
    left: 7vw;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .16em
}

.institutions {
    position: relative;
    min-height: 1100px;
    overflow: hidden;
    padding: 125px 0 150px
}

.institution-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    object-fit: cover;
    opacity: .18;
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%)
}

.institutions:after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(circle at 74% 56%, #2e59c226, transparent 32%);
    content: ""
}

.institutions .shell {
    position: relative;
    z-index: 1
}

.intro {
    width: min(720px, 60vw);
    margin-top: 100px
}

.intro h2 {
    margin: 0;
    font-size: clamp(44px, 5.5vw, 86px);
    font-weight: 300;
    letter-spacing: -.06em;
    line-height: 1.01
}

.intro>p:last-child {
    max-width: 540px;
    margin: 30px 0 0;
    color: #ffffff9c;
    font-size: 13px
}

.orbit {
    position: relative;
    width: min(700px, 62vw);
    aspect-ratio: 1;
    margin: -110px 4vw 0 auto
}

.orbit>i {
    position: absolute;
    border: 1px solid #ffffff31;
    border-radius: 50%
}

.orbit>i:first-of-type {
    inset: 8%
}

.orbit>i:nth-of-type(2) {
    inset: 24%;
    border-style: dashed
}

.orbit-core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 32%;
    aspect-ratio: 1;
    place-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--clay);
    color: var(--brown);
    text-align: center
}

.orbit-core small {
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase
}

.orbit-core strong {
    max-width: 150px;
    margin: 7px auto 0;
    font-size: clamp(15px, 1.8vw, 25px);
    font-weight: 400;
    line-height: 1.1
}

.orbit ul {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.orbit li {
    --a: calc(var(--n)*60deg);
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: clamp(105px, 10vw, 150px);
    min-height: 50px;
    place-items: center;
    padding: 7px;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(min(30vw, 325px)*-1)) rotate(calc(var(--a)*-1));
    border: 1px solid #ffffff35;
    border-radius: 99px;
    background: #091a21a3;
    backdrop-filter: blur(8px);
    font-size: 9px;
    text-align: center
}

.practices {
    height: 340svh;
    background: var(--dark)
}

.practices-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden
}

.practices-head,
.practice-foot {
    position: absolute;
    z-index: 5;
    right: 40px;
    left: 40px;
    display: grid;
    align-items: center
}

.practices-head {
    top: 32px;
    grid-template-columns: 240px 1fr 240px
}

.practices-head>span {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase
}

.practices-head>b {
    justify-self: center;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .08em
}

.practices-head>i {
    height: 1px;
    background: #ffffff42
}

.practices-head>i em {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: #fff
}

.practice-track {
    display: flex;
    width: 300vw;
    height: 100%
}

.practice {
    position: relative;
    width: 100vw;
    height: 100svh;
    flex: 0 0 100vw;
    overflow: hidden
}

.practice>img,
.practice-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.practice>img {
    object-fit: cover;
    transform: scale(1.1)
}

.practice-shade {
    background: linear-gradient(90deg, #050f13ed 0%, #050f1391 44%, #050f1326 82%), linear-gradient(0deg, #050f13b2, transparent 50%)
}

.terra .practice-shade {
    background: linear-gradient(90deg, #091912ef, #09191291 46%, #0919121a 84%)
}

.nexus .practice-shade {
    background: linear-gradient(90deg, #0d0f1bef, #0d0f1b8f 46%, #0d0f1b1f 84%)
}

.practice-no {
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
    color: #ffffff1f;
    font-size: clamp(190px, 30vw, 470px);
    font-weight: 500;
    letter-spacing: -.1em;
    line-height: .75
}

.practice-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 8vw;
    width: min(570px, 45vw);
    transform: translateY(-46%)
}

.practice-copy small {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase
}

.practice-copy h2 {
    margin: -4px 0 0;
    font-size: clamp(92px, 11vw, 178px);
    font-weight: 300;
    letter-spacing: -.08em;
    line-height: .95
}

.practice-copy h3 {
    margin: 17px 0 0;
    color: var(--clay);
    font-size: clamp(26px, 3vw, 45px);
    font-weight: 300;
    letter-spacing: -.04em
}

.practice-copy>p {
    max-width: 520px;
    margin: 14px 0 0;
    color: #ffffffc5;
    font-size: 13px;
    line-height: 1.8
}

.practice-copy ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    margin: 25px 0 0;
    padding: 0;
    border-top: 1px solid #ffffff3d;
    list-style: none
}

.practice-copy li {
    padding: 9px 0;
    border-bottom: 1px solid #ffffff29;
    color: #ffffffaa;
    font-size: 9px
}

.practice-copy>a {
    display: inline-block;
    margin-top: 24px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase
}

.practice-ring {
    position: absolute;
    top: 50%;
    right: 9vw;
    width: min(34vw, 500px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1px solid #ffffff5c;
    border-radius: 50%;
    box-shadow: inset 0 0 0 70px #ffffff08, inset 0 0 0 71px #ffffff2a
}

.practice-ring:before {
    position: absolute;
    inset: 26%;
    border: 1px dashed #ffffff73;
    border-radius: 50%;
    content: ""
}

.practice-foot {
    bottom: 25px;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 13px;
    color: #ffffff8c;
    font-size: 7px;
    letter-spacing: .18em;
    text-transform: uppercase
}

.practice-foot i {
    height: 1px;
    background: #ffffff35
}

.value {
    position: relative;
    min-height: 1600px;
    overflow: hidden;
    padding: 135px 0 170px
}

.bridge-orbit {
    position: absolute;
    z-index: 0;
    top: 60px;
    right: -8vw;
    width: 70vw;
    aspect-ratio: 1;
    opacity: .4
}

.bridge-orbit i {
    position: absolute;
    border: 1px solid #091a2147;
    border-radius: 50%
}

.bridge-orbit i:first-child {
    inset: 0
}

.bridge-orbit i:nth-child(2) {
    inset: 17%;
    border-style: dashed
}

.bridge-orbit b {
    position: absolute;
    width: 11px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue)
}

.bridge-orbit b:nth-of-type(1) {
    top: 8%;
    left: 28%
}

.bridge-orbit b:nth-of-type(2) {
    top: 48%;
    left: -5px
}

.bridge-orbit b:nth-of-type(3) {
    right: 18%;
    bottom: 8%
}

.value .shell {
    position: relative;
    z-index: 1
}

.value-head {
    width: min(780px, 67vw);
    margin-top: 100px
}

.value-head h2 {
    margin: 0;
    font-size: clamp(50px, 7vw, 104px);
    font-weight: 300;
    letter-spacing: -.07em;
    line-height: .95
}

.value-head>p:last-child {
    max-width: 540px;
    margin: 32px 0 0;
    font-size: 13px;
    line-height: 1.85
}

.missions {
    position: relative;
    z-index: 1;
    display: flex;
    width: max-content;
    gap: 13px;
    margin-top: 115px;
    padding: 0 7vw
}

.missions article {
    position: relative;
    display: flex;
    width: min(410px, 80vw);
    height: 350px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    border: 1px solid #091a2138;
    border-radius: 50% 50% 8px 8px;
    background: #ffffff3d
}

.missions article:before {
    position: absolute;
    top: 45px;
    left: 50%;
    width: 84px;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border: 1px solid #091a2138;
    border-radius: 50%;
    content: "";
    transition: .45s var(--ease)
}

.missions article:hover:before {
    transform: translateX(-50%) scale(1.7);
    background: var(--clay)
}

.missions span {
    position: absolute;
    top: 22px;
    left: 30px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .15em
}

.missions h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1.2
}

.missions p {
    margin: 10px 0 0;
    color: #091a21a3;
    font-size: 11px
}

.image-river {
    display: flex;
    width: calc(100% + 16vw);
    height: 290px;
    gap: 13px;
    margin: 145px -8vw 0;
    transform: rotate(-3deg)
}

.image-river figure {
    min-width: 26vw;
    height: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: ellipse(48% 44% at 50% 50%)
}

.image-river figure:nth-child(even) {
    transform: translateY(32px)
}

.image-river img {
    width: 100%;
    height: 120%;
    object-fit: cover
}

.method {
    position: relative;
    overflow: hidden;
    padding: 135px 0 150px
}

.method-head {
    display: grid;
    grid-template-columns: .5fr 1fr;
    gap: 40px;
    margin-top: 90px
}

.method-head h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(48px, 6vw, 90px);
    font-weight: 300;
    letter-spacing: -.06em;
    line-height: 1
}

.method-map {
    position: relative;
    height: 610px;
    margin-top: 85px
}

.method-map svg {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 420px;
    overflow: visible
}

.method-map path {
    fill: none;
    stroke: #ffffff22;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke
}

.method-map path.live {
    stroke: var(--clay)
}

.method-map ol {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.method-map li {
    position: absolute;
    width: min(220px, 17vw);
    padding-top: 18px;
    border-top: 1px solid #ffffff38
}

.method-map li:before {
    position: absolute;
    top: -7px;
    left: 0;
    width: 13px;
    aspect-ratio: 1;
    border: 2px solid var(--dark);
    border-radius: 50%;
    background: var(--clay);
    box-shadow: 0 0 0 1px var(--clay);
    content: ""
}

.method-map li:nth-child(1) {
    top: 390px;
    left: 0
}

.method-map li:nth-child(2) {
    top: 138px;
    left: 20%
}

.method-map li:nth-child(3) {
    top: 390px;
    left: 43%
}

.method-map li:nth-child(4) {
    top: 138px;
    left: 66%
}

.method-map li:nth-child(5) {
    top: 138px;
    right: 0
}

.method-map span {
    display: block;
    margin-bottom: 15px;
    color: var(--clay);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .16em
}

.method-map b {
    display: block;
    font-size: 15px;
    font-weight: 400
}

.method-map p {
    margin: 8px 0 0;
    color: #ffffff85;
    font-size: 10px
}

.difference {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid #ffffff31
}

.difference article {
    min-height: 220px;
    padding: 28px;
    border-right: 1px solid #ffffff31
}

.difference article:last-child {
    border: 0
}

.difference b {
    color: var(--clay);
    font-size: 13px;
    font-weight: 400
}

.difference p {
    margin: 70px 0 0;
    color: #ffffff82;
    font-size: 10px
}

.perspectives {
    height: 350svh;
    background: var(--dark)
}

.perspectives-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden
}

.perspective-head {
    position: absolute;
    z-index: 10;
    top: 32px;
    right: 40px;
    left: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center
}

.perspective-head>span {
    justify-self: center;
    font-size: 9px;
    letter-spacing: .08em
}

.perspective-head>b {
    justify-self: end;
    font-size: 9px;
    font-weight: 300
}

.perspective-head em {
    font-style: normal;
    font-weight: 500
}

.perspective {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: circle(0 at 75% 50%)
}

.p1 {
    clip-path: circle(110% at 75% 50%)
}

.perspective>img,
.perspective>div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.perspective>img {
    object-fit: cover;
    transform: scale(1.07)
}

.perspective>div {
    background: linear-gradient(90deg, #061116f2, #061116b2 48%, #0611164a), linear-gradient(0deg, #061116a8, transparent 55%)
}

.perspective section {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 8vw;
    width: min(780px, 60vw);
    transform: translateY(-42%)
}

.perspective small {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase
}

.perspective small:before {
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--clay);
    content: ""
}

.perspective h2 {
    margin: 28px 0 0;
    font-size: clamp(50px, 6.3vw, 96px);
    font-weight: 300;
    letter-spacing: -.065em;
    line-height: .98
}

.perspective p {
    max-width: 540px;
    margin: 30px 0 0;
    color: #ffffffa8;
    font-size: 12px
}

.contact {
    position: relative;
    min-height: 1050px;
    overflow: hidden;
    background: var(--brown)
}

.contact-media {
    position: absolute;
    z-index: 0;
    inset: 0
}

.contact-media:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #170f0bf2, #170f0bbd 48%, #170f0b4f), linear-gradient(0deg, #170f0bd9, transparent 50%);
    content: ""
}

.contact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.5) sepia(.2)
}

.contact-media i {
    position: absolute;
    z-index: 2;
    top: 48%;
    right: 3vw;
    width: min(49vw, 720px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1px solid #ffffff75;
    border-radius: 50%;
    box-shadow: 0 0 0 12vw #0f09076b
}

.contact .grain {
    z-index: 1
}

.contact-inner {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 880px;
    flex-direction: column;
    justify-content: center;
    padding: 130px 0 120px
}

.contact .index {
    position: absolute;
    top: 115px
}

.contact-copy {
    width: min(830px, 64vw)
}

.contact-copy h2 {
    margin: 0;
    font-size: clamp(54px, 7.4vw, 114px);
    font-weight: 300;
    letter-spacing: -.07em;
    line-height: .93
}

.contact-copy>p:not(.eyebrow) {
    max-width: 600px;
    margin: 30px 0 0;
    color: #ffffffae;
    font-size: 13px
}

.contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
    padding: 17px 24px;
    border: 1px solid #ffffff82;
    border-radius: 99px;
    font-size: 11px
}

.contact address {
    position: absolute;
    right: 4vw;
    bottom: 140px;
    width: min(300px, 24vw);
    padding-left: 26px;
    border-left: 1px solid #ffffff42;
    font-style: normal
}

.contact address div+div {
    margin-top: 20px
}

.contact address span {
    display: block;
    margin-bottom: 6px;
    color: #ffffff73;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase
}

.contact address p,
.contact address a {
    margin: 0;
    font-size: 10px
}

.contact footer {
    position: absolute;
    z-index: 3;
    right: 40px;
    bottom: 0;
    left: 40px;
    display: grid;
    min-height: 90px;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 30px;
    border-top: 1px solid #ffffff3b
}

.contact footer img {
    width: 130px
}

.contact footer p,
.contact footer span {
    margin: 0;
    color: #ffffff78;
    font-size: 8px;
    letter-spacing: .07em;
    text-transform: uppercase
}

@media(max-width:900px) {
    :root {
        --shell: calc(100% - 40px)
    }

    .header {
        height: 76px;
        grid-template-columns: 1fr auto;
        padding: 0 20px
    }

    .header.condensed {
        height: 66px
    }

    .brand {
        width: 136px
    }

    .header>nav,
    .header>.pill {
        display: none
    }

    .menu {
        display: block
    }

    .mobile-nav {
        display: block
    }

    .progress {
        display: none
    }

    .hero {
        height: 120svh
    }

    .hero video {
        object-position: 58% center
    }

    .hero-aperture {
        top: 42%;
        left: 61%;
        width: 70vw
    }

    .hero-meta {
        top: 92px;
        right: 20px;
        left: 20px
    }

    .hero-meta span:last-child {
        display: none
    }

    .hero-copy {
        right: 20px;
        bottom: 42px;
        left: 20px
    }

    .hero h1 {
        font-size: clamp(48px, 13vw, 78px);
        line-height: .96
    }

    .hero h1 .accent {
        margin-left: 0
    }

    .hero-bottom {
        gap: 20px;
        margin-top: 22px
    }

    .hero-bottom>p {
        font-size: 11px
    }

    .round {
        width: 88px;
        flex-basis: 88px;
        font-size: 6px
    }

    .scroll-cue {
        display: none
    }

    .complexity {
        min-height: auto
    }

    .complexity-stage {
        position: relative;
        height: auto;
        min-height: 950px;
        padding: 100px 20px 70px
    }

    .complexity .index {
        top: 60px;
        left: 20px
    }

    .object {
        top: 180px;
        right: -17vw;
        width: 90vw;
        transform: none
    }

    .complexity-copy {
        top: auto;
        width: 100%;
        padding-top: 420px;
        transform: none
    }

    .complexity-copy h2 {
        font-size: clamp(40px, 9vw, 66px)
    }

    .coordinates {
        right: 20px;
        bottom: 22px;
        left: 20px
    }

    .institutions {
        min-height: auto;
        padding: 100px 0 120px
    }

    .institution-bg {
        width: 75%
    }

    .intro {
        width: 100%;
        margin-top: 65px
    }

    .intro h2 {
        font-size: clamp(40px, 9vw, 70px)
    }

    .orbit {
        width: min(680px, 90vw);
        margin: 80px auto 0
    }

    .orbit li {
        width: 118px;
        transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(min(42vw, 285px)*-1)) rotate(calc(var(--a)*-1))
    }

    .practices {
        height: auto
    }

    .practices-sticky {
        position: relative;
        height: auto;
        overflow: visible
    }

    .practices-head {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 65px 20px 35px
    }

    .practices-head>b {
        justify-self: start;
        font-size: 15px
    }

    .practices-head>i,
    .practice-foot {
        display: none
    }

    .practice-track {
        display: block;
        width: 100%;
        height: auto
    }

    .practice {
        width: 100%;
        height: max(760px, 100svh);
        min-height: 760px;
        flex: none
    }

    .practice-copy {
        top: auto;
        right: 20px;
        bottom: 50px;
        left: 20px;
        width: auto;
        transform: none
    }

    .practice-copy h2 {
        font-size: clamp(86px, 23vw, 150px)
    }

    .practice-copy h3 {
        margin-top: 10px
    }

    .practice-ring {
        top: 34%;
        right: -10vw;
        width: 68vw
    }

    .practice-no {
        top: 22%;
        font-size: 50vw
    }

    .value {
        min-height: auto;
        padding: 105px 0
    }

    .bridge-orbit {
        right: -30vw;
        width: 110vw
    }

    .value-head {
        width: 100%;
        margin-top: 70px
    }

    .value-head h2 {
        font-size: clamp(46px, 10vw, 76px)
    }

    .missions {
        width: 100%;
        margin-top: 75px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }

    .missions article {
        min-width: min(360px, 82vw);
        height: 325px;
        scroll-snap-align: start
    }

    .image-river {
        height: 210px;
        margin-top: 100px
    }

    .image-river figure {
        min-width: 46vw
    }

    .method {
        padding: 105px 0
    }

    .method-head {
        grid-template-columns: 1fr;
        margin-top: 60px
    }

    .method-head h2 {
        font-size: clamp(44px, 9vw, 72px)
    }

    .method-map {
        height: auto;
        margin-top: 70px
    }

    .method-map svg {
        display: none
    }

    .method-map ol {
        position: relative
    }

    .method-map li,
    .method-map li:nth-child(n) {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        min-height: 145px;
        padding: 20px 10px 30px 45px;
        border-top: 0;
        border-left: 1px solid #ffffff2e
    }

    .method-map li:before {
        top: 25px;
        left: -7px
    }

    .difference {
        grid-template-columns: 1fr 1fr;
        margin-top: 50px
    }

    .difference article {
        border-bottom: 1px solid #ffffff31
    }

    .difference article:nth-child(2) {
        border-right: 0
    }

    .perspectives {
        height: auto
    }

    .perspectives-sticky {
        position: relative;
        height: auto;
        overflow: visible
    }

    .perspective-head {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 70px 20px 35px
    }

    .perspective-head>span {
        justify-self: start;
        font-size: 14px
    }

    .perspective-head>b {
        display: none
    }

    .perspective,
    .p1 {
        position: relative;
        height: max(720px, 92svh);
        clip-path: none
    }

    .perspective section {
        top: auto;
        right: 20px;
        bottom: 65px;
        left: 20px;
        width: auto;
        transform: none
    }

    .perspective h2 {
        font-size: clamp(42px, 9vw, 72px)
    }

    .contact {
        min-height: 1060px
    }

    .contact-media:after {
        background: linear-gradient(0deg, #170f0bf7, #170f0ba8 62%, #170f0b4d)
    }

    .contact-media i {
        top: 35%;
        right: -22vw;
        width: 92vw
    }

    .contact-inner {
        min-height: 950px;
        justify-content: flex-start;
        padding-top: 190px
    }

    .contact .index {
        top: 100px
    }

    .contact-copy {
        width: 100%
    }

    .contact-copy h2 {
        font-size: clamp(48px, 11vw, 82px)
    }

    .contact address {
        right: auto;
        bottom: 130px;
        left: 20px;
        display: grid;
        width: calc(100% - 40px);
        grid-template-columns: 1fr 1fr
    }

    .contact footer {
        right: 20px;
        left: 20px;
        grid-template-columns: 130px 1fr
    }

    .contact footer p {
        display: none
    }

    .contact footer span {
        text-align: right
    }
}

@media(max-width:600px) {
    .round {
        display: none
    }

    .complexity-copy>p:not(.eyebrow),
    .complexity-copy strong {
        font-size: 11px
    }

    .orbit {
        width: 94vw;
        margin-left: -4vw
    }

    .orbit-core {
        width: 38%
    }

    .orbit li {
        width: 100px;
        min-height: 42px;
        font-size: 7px;
        transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(43vw*-1)) rotate(calc(var(--a)*-1))
    }

    .practice-copy ul {
        grid-template-columns: 1fr
    }

    .practice-copy li:nth-child(n+3) {
        display: none
    }

    .practice-copy>p {
        font-size: 11px
    }

    .image-river figure {
        min-width: 62vw
    }

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

    .difference article {
        min-height: 170px;
        border-right: 0
    }

    .difference p {
        margin-top: 40px
    }

    .contact-cta {
        max-width: 100%;
        padding: 15px 17px;
        font-size: 8px
    }

    .contact address {
        grid-template-columns: 1fr
    }

    .contact footer {
        grid-template-columns: 105px 1fr
    }

    .contact footer img {
        width: 100px
    }

    .contact footer span {
        font-size: 6px
    }
}

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

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

    .loader {
        display: none
    }

    .hero {
        height: 100svh
    }

    .complexity,
    .practices,
    .perspectives {
        height: auto;
        min-height: auto
    }

    .complexity-stage,
    .practices-sticky,
    .perspectives-sticky {
        position: relative;
        height: auto
    }

    .practice-track {
        display: block;
        width: 100%
    }

    .practice {
        width: 100%
    }

    .perspective,
    .p1 {
        position: relative;
        height: 100svh;
        clip-path: none
    }
}

/* ── Continuous journey / final creative direction ───────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.cursor {
    display: none
}

.continuum {
    position: fixed;
    z-index: 42;
    inset: 0;
    width: 100vw;
    height: 100svh;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    mix-blend-mode: difference
}

.continuum path {
    fill: none;
    vector-effect: non-scaling-stroke
}

.continuum-base {
    stroke: #ffffff18;
    stroke-width: .12
}

.continuum-live {
    stroke: #fff;
    stroke-width: .18;
    stroke-linecap: round
}

.continuum-node {
    fill: #fff;
    filter: drop-shadow(0 0 5px #fff)
}

.complexity-images {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none
}

.complexity-image {
    position: absolute;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 24px 70px #3d2d2028
}

.complexity-image img {
    width: 100%;
    height: 120%;
    object-fit: cover
}

.complexity-image-a {
    top: 14%;
    left: 48%;
    width: 13vw;
    min-width: 150px;
    aspect-ratio: .78;
    clip-path: polygon(0 10%, 100% 0, 88% 100%, 10% 87%)
}

.complexity-image-b {
    right: 7%;
    bottom: 10%;
    width: 18vw;
    min-width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: circle(49%)
}

.complexity-image-c {
    bottom: 8%;
    left: 7%;
    width: 15vw;
    min-width: 170px;
    aspect-ratio: 1.25;
    clip-path: polygon(10% 0, 100% 16%, 86% 100%, 0 82%)
}

.scene-portal {
    position: absolute;
    z-index: 8;
    bottom: -42vw;
    left: 50%;
    width: 84vw;
    aspect-ratio: 1;
    transform: translateX(-50%) scale(.08);
    border-radius: 50%;
    pointer-events: none
}

.scene-portal-dark {
    background: var(--dark);
    box-shadow: 0 0 0 1px #091a2130
}

.scene-portal-practices {
    bottom: -50vw;
    background: #101510;
    box-shadow: 0 0 80px #0008
}

.institution-rail {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 2vh;
    left: 0;
    display: flex;
    width: max-content;
    align-items: center;
    gap: 3vw;
    color: #ffffff18;
    font-size: clamp(52px, 8vw, 130px);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .8;
    white-space: nowrap;
    pointer-events: none
}

.institution-rail i {
    color: var(--clay);
    font-size: .18em;
    font-style: normal;
    opacity: .6
}

/* Signature practices: one object, three changing worlds */
.practice-journey {
    position: relative;
    height: 480svh;
    background: #071317;
    color: #fff
}

.practice-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate
}

.practice-chrome {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 40px;
    left: 40px;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;
    gap: 28px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase
}

.practice-chrome>b {
    justify-self: center;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: none
}

.practice-meter {
    height: 1px;
    background: #ffffff38
}

.practice-meter i {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: #fff
}

.practice-universe {
    position: absolute;
    inset: 0
}

.practice-layer {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden
}

.practice-layer:not(.axis-layer) {
    clip-path: circle(0 at 72% 50%)
}

.terra-layer {
    z-index: 2
}

.nexus-layer {
    z-index: 3
}

.practice-media,
.practice-atmosphere {
    position: absolute;
    inset: 0;
    margin: 0
}

.practice-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14)
}

.axis-layer .practice-media img {
    object-position: center
}

.terra-layer .practice-media img {
    object-position: center 55%
}

.nexus-layer .practice-media img {
    object-position: center
}

.practice-atmosphere {
    background: linear-gradient(90deg, #061116f5 0%, #061116b3 44%, #06111632 78%), linear-gradient(0deg, #061116d1 0%, transparent 55%)
}

.terra-layer .practice-atmosphere {
    background: linear-gradient(90deg, #102217ed 0%, #10221799 45%, #10221720 78%), linear-gradient(0deg, #102217d9, transparent 58%)
}

.nexus-layer .practice-atmosphere {
    background: radial-gradient(circle at 73% 38%, #29479b42, transparent 28%), linear-gradient(90deg, #0c1326f0 0%, #0c13268f 53%, #0c132628), linear-gradient(0deg, #0c1326d9, transparent 55%)
}

.practice-ghost {
    position: absolute;
    top: 50%;
    right: -.04em;
    transform: translateY(-51%);
    color: #ffffff13;
    font-size: clamp(190px, 27vw, 470px);
    font-weight: 500;
    letter-spacing: -.11em;
    line-height: .7;
    white-space: nowrap
}

.terra-layer .practice-ghost {
    right: auto;
    left: -.05em
}

.nexus-layer .practice-ghost {
    top: 30%;
    right: -.03em
}

.practice-content {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 7vw;
    width: min(590px, 44vw);
    transform: translateY(-46%)
}

.terra-layer .practice-content {
    right: 7vw;
    left: auto;
    text-align: right
}

.nexus-layer .practice-content {
    top: auto;
    bottom: 10vh;
    left: 50%;
    width: min(840px, 70vw);
    transform: translateX(-50%);
    text-align: center
}

.practice-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase
}

.terra-layer .practice-kicker {
    justify-content: flex-end
}

.nexus-layer .practice-kicker {
    justify-content: center
}

.practice-kicker span {
    display: grid;
    width: 30px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #ffffff6b;
    border-radius: 50%
}

.practice-kicker small {
    font-size: inherit
}

.practice-content h3 {
    margin: 18px 0 0;
    font-size: clamp(74px, 9.4vw, 150px);
    font-weight: 300;
    letter-spacing: -.085em;
    line-height: .78
}

.nexus-layer .practice-content h3 {
    font-size: clamp(62px, 7.4vw, 118px)
}

.practice-content h3 em {
    color: var(--clay);
    font-style: normal;
    font-weight: 300
}

.terra-layer .practice-content h3 em {
    color: #d5e3a5
}

.nexus-layer .practice-content h3 em {
    color: #b9c9ff
}

.practice-content>p {
    max-width: 560px;
    margin: 28px 0 0;
    color: #ffffffbd;
    font-size: 12px;
    line-height: 1.8
}

.terra-layer .practice-content>p {
    margin-left: auto
}

.nexus-layer .practice-content>p {
    margin-inline: auto
}

.practice-content ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    margin: 27px 0 0;
    padding: 0;
    border-top: 1px solid #ffffff42;
    list-style: none
}

.practice-content li {
    padding: 9px 0;
    border-bottom: 1px solid #ffffff2c;
    color: #ffffffa8;
    font-size: 9px;
    text-align: left
}

.terra-layer .practice-content li {
    text-align: right
}

.nexus-layer .practice-content li {
    text-align: center
}

.practice-fragment {
    position: absolute;
    z-index: 4;
    margin: 0;
    overflow: hidden
}

.practice-fragment img {
    width: 100%;
    height: 120%;
    object-fit: cover
}

.axis-layer .practice-fragment {
    right: 9vw;
    bottom: 10vh;
    width: 21vw;
    aspect-ratio: 1.28;
    clip-path: polygon(12% 0, 100% 9%, 88% 100%, 0 84%)
}

.terra-layer .practice-fragment {
    top: 14vh;
    left: 8vw;
    width: 19vw;
    aspect-ratio: .76;
    border-radius: 50%
}

.nexus-layer .practice-fragment {
    top: 15vh;
    left: 8vw;
    width: 22vw;
    aspect-ratio: 1;
    clip-path: circle(49%)
}

.practice-object {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 71%;
    width: min(27vw, 400px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.66) rotate(-50deg);
    border-radius: 50%;
    background: #d5c1b4;
    box-shadow: 0 40px 120px #0008
}

.practice-object img {
    position: absolute;
    inset: 5%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    border-radius: 50%;
    mix-blend-mode: multiply
}

.practice-object-orbit {
    position: absolute;
    border: 1px solid #ffffff75;
    border-radius: 50%
}

.orbit-one {
    inset: -10%
}

.orbit-two {
    inset: 13%;
    border-style: dashed
}

.practice-crosshair {
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 71%;
    width: min(44vw, 650px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid #ffffff1c;
    border-radius: 50%;
    pointer-events: none
}

.practice-crosshair i {
    position: absolute;
    background: #ffffff30
}

.practice-crosshair i:first-child {
    top: 50%;
    right: -6%;
    left: -6%;
    height: 1px
}

.practice-crosshair i:last-child {
    top: -6%;
    bottom: -6%;
    left: 50%;
    width: 1px
}

.practice-dots {
    position: absolute;
    z-index: 22;
    bottom: 38px;
    left: 40px;
    display: flex;
    gap: 22px
}

.practice-dots button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid #ffffff2e;
    background: none;
    color: #ffffff67;
    cursor: pointer;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .35s, border-color .35s
}

.practice-dots button span {
    font-size: 6px
}

.practice-dots button.active,
.practice-dots button:hover,
.practice-dots button:focus-visible {
    border-color: #fff;
    color: #fff
}

.practice-caption {
    position: absolute;
    z-index: 20;
    right: 40px;
    bottom: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff7a;
    font-size: 7px;
    letter-spacing: .16em;
    text-transform: uppercase
}

.practice-caption i {
    width: 30px;
    height: 1px;
    background: #ffffff31
}

/* Value is read as a moving mission field, not a card row */
.value {
    min-height: 2100px;
    padding-bottom: 125px
}

.mission-stage {
    position: relative;
    z-index: 2;
    min-height: 1180px;
    margin-top: 80px
}

.mission-visual {
    position: sticky;
    z-index: 0;
    top: 20vh;
    width: min(39vw, 600px);
    height: 60vh;
    margin: 0 6vw 0 auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 40px 110px #091a2130
}

.mission-visual:after {
    position: absolute;
    inset: 0;
    border: 1px solid #fff7;
    border-radius: 50%;
    content: ""
}

.mission-visual img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: saturate(.7)
}

.mission-visual span {
    position: absolute;
    inset: 18%;
    border: 1px dashed #fff9;
    border-radius: 50%
}

.mission-lines {
    position: relative;
    z-index: 2;
    width: min(68vw, 960px);
    margin: -47vh 0 0 6vw
}

.mission-lines article {
    position: relative;
    display: grid;
    min-height: 155px;
    grid-template-columns: 48px minmax(260px, 1fr) minmax(180px, .55fr);
    align-items: center;
    gap: 22px;
    border-top: 1px solid #091a2138;
    mix-blend-mode: multiply
}

.mission-lines article:last-child {
    border-bottom: 1px solid #091a2138
}

.mission-lines span {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .17em
}

.mission-lines h3 {
    margin: 0;
    font-size: clamp(31px, 4.2vw, 64px);
    font-weight: 300;
    letter-spacing: -.055em;
    line-height: .95
}

.mission-lines p {
    margin: 0;
    color: #091a2194;
    font-size: 10px;
    line-height: 1.7
}

.image-river {
    position: relative;
    z-index: 3
}

@media(hover:hover) and (pointer:fine) {
    body {
        cursor: none
    }

    .cursor {
        position: fixed;
        z-index: 10001;
        top: 0;
        left: 0;
        display: grid;
        width: 18px;
        aspect-ratio: 1;
        place-items: center;
        transform: translate(-50%, -50%);
        border: 1px solid #fff;
        border-radius: 50%;
        background: #ffffff0f;
        color: #fff;
        mix-blend-mode: difference;
        pointer-events: none;
        will-change: transform, width
    }

    .cursor:after {
        width: 3px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #fff;
        content: ""
    }

    .cursor span {
        position: absolute;
        opacity: 0;
        font-size: 6px;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .cursor.is-active {
        width: 68px;
        background: #fff;
        color: #000;
        mix-blend-mode: normal
    }

    .cursor.is-active:after {
        opacity: 0
    }

    .cursor.is-active span {
        opacity: 1
    }

    a,
    button {
        cursor: none
    }
}

@media(max-width:900px) {
    .continuum {
        display: none
    }

    .complexity-images {
        opacity: .7
    }

    .complexity-image-a {
        top: 150px;
        left: 4%;
        width: 32vw;
        min-width: 120px
    }

    .complexity-image-b {
        right: 3%;
        bottom: 5%;
        width: 38vw;
        min-width: 150px
    }

    .complexity-image-c {
        display: none
    }

    .scene-portal {
        display: none
    }

    .institution-rail {
        bottom: 12px;
        font-size: 16vw
    }

    .practice-journey {
        height: auto
    }

    .practice-pin {
        position: relative;
        height: auto;
        overflow: visible
    }

    .practice-chrome {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        display: block;
        padding: 85px 20px 34px
    }

    .practice-chrome>b {
        display: block;
        margin-top: 9px;
        font-size: 14px
    }

    .practice-meter {
        display: none
    }

    .practice-universe {
        position: relative
    }

    .practice-layer,
    .practice-layer:not(.axis-layer) {
        position: relative;
        inset: auto;
        height: max(790px, 100svh);
        clip-path: none
    }

    .practice-media img {
        transform: scale(1.03)
    }

    .practice-atmosphere {
        background: linear-gradient(0deg, #061116f7 2%, #0611169c 58%, #06111624)
    }

    .terra-layer .practice-atmosphere {
        background: linear-gradient(0deg, #102217fa, #10221783 60%, #10221721)
    }

    .nexus-layer .practice-atmosphere {
        background: linear-gradient(0deg, #0c1326fa, #0c132685 60%, #0c132621)
    }

    .practice-ghost {
        top: 17%;
        right: -.05em;
        transform: none;
        font-size: 38vw
    }

    .terra-layer .practice-ghost {
        top: 17%;
        right: -.05em;
        left: auto
    }

    .nexus-layer .practice-ghost {
        top: 17%
    }

    .practice-content,
    .terra-layer .practice-content,
    .nexus-layer .practice-content {
        top: auto;
        right: 20px;
        bottom: 42px;
        left: 20px;
        width: auto;
        transform: none;
        text-align: left
    }

    .terra-layer .practice-kicker,
    .nexus-layer .practice-kicker {
        justify-content: flex-start
    }

    .practice-content h3,
    .nexus-layer .practice-content h3 {
        font-size: clamp(58px, 16vw, 92px)
    }

    .practice-content>p,
    .terra-layer .practice-content>p,
    .nexus-layer .practice-content>p {
        max-width: 580px;
        margin: 19px 0 0
    }

    .practice-content ul {
        margin-top: 19px
    }

    .terra-layer .practice-content li,
    .nexus-layer .practice-content li {
        text-align: left
    }

    .practice-fragment {
        display: none
    }

    .practice-object {
        display: none
    }

    .practice-crosshair {
        display: none
    }

    .practice-dots {
        display: none
    }

    .practice-caption {
        display: none
    }

    .value {
        min-height: auto
    }

    .mission-stage {
        min-height: auto;
        margin-top: 65px;
        padding-bottom: 20px
    }

    .mission-visual {
        position: relative;
        top: auto;
        width: 82vw;
        height: 52svh;
        margin: 0 auto 0 9vw
    }

    .mission-lines {
        width: calc(100% - 40px);
        margin: 45px 20px 0
    }

    .mission-lines article {
        min-height: 170px;
        grid-template-columns: 30px 1fr;
        gap: 12px
    }

    .mission-lines h3 {
        font-size: clamp(33px, 9vw, 56px)
    }

    .mission-lines p {
        grid-column: 2
    }
}

@media(max-width:600px) {
    .practice-content ul {
        grid-template-columns: 1fr
    }

    .practice-content li:nth-child(n+3) {
        display: none
    }

    .practice-layer,
    .practice-layer:not(.axis-layer) {
        height: max(730px, 100svh)
    }
}

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

    .continuum,
    .cursor,
    .scene-portal {
        display: none !important
    }

    .practice-journey {
        height: auto
    }

    .practice-pin {
        position: relative;
        height: auto;
        overflow: visible
    }

    .practice-universe {
        position: relative
    }

    .practice-layer,
    .practice-layer:not(.axis-layer) {
        position: relative;
        height: 100svh;
        clip-path: none
    }

    .practice-object,
    .practice-crosshair,
    .practice-dots,
    .practice-caption {
        display: none
    }

    .mission-visual {
        position: relative;
        top: auto
    }

    .mission-lines {
        margin-top: 40px
    }
}

/* ── Review revision: the B becomes the connective device ─────────────── */
.signature-mark {
    position: fixed;
    z-index: 78;
    top: 50%;
    right: 19px;
    display: grid;
    width: 42px;
    aspect-ratio: 1;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid #ffffff52;
    border-radius: 50%;
    background: #091a21c7;
    box-shadow: 0 8px 30px #0002;
    backdrop-filter: blur(10px);
    pointer-events: none;
    mix-blend-mode: normal
}

.signature-mark img {
    width: 21px;
    height: 23px;
    filter: brightness(0) invert(1)
}

.signature-mark span {
    position: absolute;
    inset: -7px;
    border: 1px dashed #ffffff36;
    border-radius: 50%
}

.header,
.header.condensed {
    z-index: 200;
    height: 82px;
    grid-template-columns: 230px 1fr 230px;
    padding: 0 32px;
    border-bottom: 1px solid #ffffff20;
    background: #071419e8;
    color: #fff;
    backdrop-filter: blur(18px);
    transform: none !important;
    opacity: 1 !important
}

.brand {
    display: flex !important;
    width: 176px !important;
    height: 62px;
    align-items: center
}

.brand-symbol {
    display: none !important
}

.brand>span {
    position: relative;
    display: block;
    width: 176px;
    height: 62px;
    overflow: hidden
}

.brand>span img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 176px !important;
    height: 62px !important;
    object-fit: contain !important
}

.brand-dark {
    opacity: 0 !important
}

.brand-light {
    opacity: 1 !important
}

.header nav {
    gap: 30px
}

.header nav a {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .09em;
    opacity: .82
}

.header nav a:hover {
    opacity: 1
}

.header .pill {
    border-color: #ffffff6b;
    background: #ffffff0c;
    color: #fff
}

.hero-aperture img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 24%;
    height: 27%;
    transform: translate(-50%, -50%);
    filter: brightness(0) invert(1);
    opacity: .82
}

.complexity {
    min-height: 220svh
}

.complexity-stage {
    padding-top: 120px
}

.complexity-copy {
    z-index: 4;
    width: min(620px, 44vw);
    transform: translateY(-40%)
}

.complexity-copy h2 {
    font-size: clamp(42px, 4.8vw, 74px);
    font-weight: 400;
    line-height: 1.01
}

.complexity-copy>p:not(.eyebrow) {
    color: #3d2d20d9;
    font-size: 14px;
    font-weight: 400
}

.complexity-copy strong {
    color: #3d2d20;
    font-size: 13px
}

.field {
    z-index: 0;
    opacity: .065
}

.complexity-media {
    position: absolute;
    z-index: 2;
    top: 16vh;
    right: 5vw;
    width: 46vw;
    height: 70vh;
    margin: 0;
    overflow: hidden;
    clip-path: polygon(8% 0, 100% 0, 100% 88%, 0 100%);
    box-shadow: 0 35px 90px #3d2d2038
}

.complexity-media:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 45%, #091a214f);
    content: ""
}

.complexity-media>img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    filter: saturate(.62) contrast(1.02)
}

.complexity-b {
    position: absolute;
    z-index: 2;
    right: 7%;
    bottom: 9%;
    display: grid;
    width: 150px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #ffffffa3;
    border-radius: 50%;
    background: #f1e0d6d9;
    backdrop-filter: blur(8px)
}

.complexity-b img {
    width: 58px;
    height: 64px
}

.complexity-media figcaption {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 25px;
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase
}

.complexity-images,
.object {
    display: none !important
}

.institutions {
    height: 225svh;
    min-height: 0;
    padding: 0;
    overflow: visible
}

.institutions:after,
.institution-bg,
.orbit,
.institution-rail,
.scene-portal-practices {
    display: none
}

.institutions-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: #07171d
}

.institution-visual {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 56%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 12%)
}

.institution-visual:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #07171df2 0%, #07171d72 35%, #07171d0d 72%), linear-gradient(0deg, #07171de8 0%, transparent 42%);
    content: ""
}

.institution-visual>img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    filter: saturate(.58) contrast(1.04)
}

.institution-visual figcaption {
    position: absolute;
    z-index: 3;
    right: 38px;
    bottom: 36px;
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase
}

.institution-b {
    position: absolute;
    z-index: 2;
    top: 18%;
    right: 9%;
    display: grid;
    width: min(17vw, 230px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #ffffff9c;
    border-radius: 50%;
    background: #07171d87;
    backdrop-filter: blur(10px)
}

.institution-b img {
    width: 43%;
    filter: brightness(0) invert(1)
}

.institution-copy {
    position: absolute;
    z-index: 4;
    top: 16vh;
    left: 5vw;
    width: min(640px, 46vw)
}

.institution-copy .eyebrow {
    margin-top: 11vh;
    color: #f1e0d6
}

.institution-copy h2 {
    margin: 0;
    font-size: clamp(46px, 5.3vw, 82px);
    font-weight: 300;
    letter-spacing: -.06em;
    line-height: .98
}

.institution-copy>p:last-child {
    max-width: 540px;
    margin: 25px 0 0;
    color: #ffffffe0;
    font-size: 14px
}

.audience-list {
    position: absolute;
    z-index: 5;
    right: 4vw;
    bottom: 5vh;
    left: 5vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #07171dc7;
    border-block: 1px solid #ffffff3d;
    backdrop-filter: blur(12px)
}

.audience-list article {
    min-height: 180px;
    padding: 24px;
    border-right: 1px solid #ffffff2e;
    transition: .4s var(--ease)
}

.audience-list article:last-child {
    border-right: 0
}

.audience-list article:hover,
.audience-list article.is-active {
    background: #f1e0d6;
    color: #3d2d20;
    transform: translateY(-10px)
}

.audience-list span {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .16em
}

.audience-list h3 {
    margin: 45px 0 0;
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.15
}

.audience-list p {
    margin: 10px 0 0;
    color: #ffffff9e;
    font-size: 9px
}

.audience-list article:hover p,
.audience-list article.is-active p {
    color: #3d2d20b0
}

.practice-atmosphere {
    background: linear-gradient(90deg, #061116fa 0%, #061116d6 42%, #06111659 73%), linear-gradient(0deg, #061116e8, transparent 58%)
}

.terra-layer .practice-atmosphere {
    background: linear-gradient(90deg, #102217fa 0%, #102217cf 45%, #10221752 76%), linear-gradient(0deg, #102217e9, transparent 58%)
}

.nexus-layer .practice-atmosphere {
    background: radial-gradient(circle at 73% 38%, #29479b4d, transparent 28%), linear-gradient(90deg, #0c1326fa 0%, #0c1326c9 53%, #0c132657), linear-gradient(0deg, #0c1326e8, transparent 55%)
}

.practice-content {
    width: min(610px, 46vw)
}

.practice-content>p {
    color: #ffffffe8;
    font-size: 13px;
    font-weight: 400
}

.practice-content li {
    color: #ffffffd0;
    font-size: 10px
}

.practice-object {
    display: grid !important;
    place-items: center;
    background: #f1e0d6;
    box-shadow: 0 40px 120px #0008
}

.practice-object img {
    position: relative;
    inset: auto;
    width: 38%;
    height: auto;
    border-radius: 0;
    mix-blend-mode: normal
}

.practice-object:after {
    position: absolute;
    inset: 25%;
    border: 1px solid #3d2d2045;
    border-radius: 50%;
    content: ""
}

.value {
    height: 190svh;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: #f5f0e8
}

.value-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden
}

.value-intro {
    position: absolute;
    z-index: 5;
    top: 14vh;
    left: 5vw;
    width: min(570px, 39vw)
}

.value-intro .eyebrow {
    margin-top: 10vh
}

.value-intro h2 {
    margin: 0;
    font-size: clamp(56px, 6.5vw, 100px);
    font-weight: 300;
    letter-spacing: -.07em;
    line-height: .9
}

.value-intro>p:last-child {
    max-width: 500px;
    margin: 26px 0 0;
    color: #091a21c4;
    font-size: 13px
}

.value-system {
    position: absolute;
    top: 50%;
    right: 3vw;
    width: min(57vw, 850px);
    aspect-ratio: 1.25;
    transform: translateY(-46%)
}

.value-b {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(19vw, 270px);
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid #091a2145;
    border-radius: 50%;
    background: #f1e0d6;
    box-shadow: 0 35px 90px #3d2d2024
}

.value-b:before,
.value-b:after {
    position: absolute;
    border: 1px solid #091a2127;
    border-radius: 50%;
    content: ""
}

.value-b:before {
    inset: -24%
}

.value-b:after {
    inset: 22%;
    border-style: dashed
}

.value-b img {
    position: relative;
    z-index: 2;
    width: 39%
}

.value-b span {
    position: absolute;
    top: -26%;
    left: 50%;
    width: 8px;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #2e59c2
}

.value-system article {
    position: absolute;
    width: 230px;
    padding: 16px 18px;
    border-top: 1px solid #091a2142;
    background: #f5f0e8db;
    backdrop-filter: blur(6px)
}

.value-system article:nth-of-type(1) {
    top: 2%;
    left: 7%
}

.value-system article:nth-of-type(2) {
    top: 5%;
    right: 1%
}

.value-system article:nth-of-type(3) {
    top: 52%;
    right: -2%
}

.value-system article:nth-of-type(4) {
    right: 13%;
    bottom: 0
}

.value-system article:nth-of-type(5) {
    bottom: 3%;
    left: 1%
}

.value-system article span {
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .15em
}

.value-system h3 {
    margin: 7px 0 0;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.15
}

.value-system p {
    margin: 7px 0 0;
    color: #091a218f;
    font-size: 9px
}

.bridge-orbit,
.mission-stage,
.image-river {
    display: none !important
}

.method {
    padding: 0;
    overflow: visible
}

.method .shell {
    display: grid;
    min-height: 1250px;
    grid-template-columns: minmax(360px, .82fr) 1fr;
    gap: 8vw;
    padding: 135px 0
}

.method-intro {
    position: sticky;
    top: 130px;
    align-self: start
}

.method-intro .eyebrow {
    margin-top: 10vh;
    color: #f1e0d6
}

.method-intro h2 {
    margin: 0;
    font-size: clamp(48px, 5.6vw, 84px);
    font-weight: 300;
    letter-spacing: -.065em;
    line-height: .98
}

.method-b {
    display: grid;
    width: 115px;
    aspect-ratio: 1;
    place-items: center;
    margin-top: 45px;
    border: 1px solid #ffffff4f;
    border-radius: 50%
}

.method-b img {
    width: 45%;
    filter: brightness(0) invert(1)
}

.delivery-steps {
    position: relative;
    padding-top: 20vh
}

.delivery-line {
    position: absolute;
    top: 20vh;
    bottom: 9vh;
    left: 26px;
    width: 1px;
    background: #ffffff24
}

.delivery-line i {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: #f1e0d6
}

.delivery-steps article {
    position: relative;
    display: grid;
    min-height: 180px;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 22px;
    border-top: 1px solid #ffffff32;
    color: #ffffffa3;
    transition: color .35s
}

.delivery-steps article:last-child {
    border-bottom: 1px solid #ffffff32
}

.delivery-steps article.is-active {
    color: #fff
}

.delivery-steps article>span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #ffffff50;
    border-radius: 50%;
    background: #091a21;
    font-size: 8px
}

.delivery-steps article.is-active>span {
    border-color: #f1e0d6;
    background: #f1e0d6;
    color: #3d2d20
}

.delivery-steps h3 {
    margin: 0;
    font-size: clamp(27px, 3vw, 44px);
    font-weight: 300;
    letter-spacing: -.05em
}

.delivery-steps p {
    margin: 8px 0 0;
    color: currentColor;
    font-size: 10px;
    opacity: .86
}

.delivery-steps b {
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase
}

.method-head,
.method-map,
.difference {
    display: none !important
}

.perspectives {
    height: 330svh;
    background: #07171d
}

.perspective,
.p1 {
    clip-path: none;
    opacity: 0;
    background: #07171d
}

.p1 {
    opacity: 1
}

.perspective>img {
    top: 12%;
    right: 3vw;
    left: auto;
    width: 53vw;
    height: 78%;
    object-fit: cover;
    transform: scale(1.08);
    -webkit-mask: url("./assets/images/logos/favicon-brown.svg") center/contain no-repeat;
    mask: url("./assets/images/logos/favicon-brown.svg") center/contain no-repeat;
    filter: saturate(.72) contrast(1.05)
}

.perspective>div {
    background: radial-gradient(circle at 75% 50%, #2e59c223, transparent 32%), linear-gradient(90deg, #07171d 0%, #07171df2 46%, transparent 72%)
}

.perspective section {
    left: 5vw;
    width: min(640px, 45vw)
}

.perspective small {
    color: #f1e0d6
}

.perspective h2 {
    font-size: clamp(46px, 5.5vw, 84px);
    line-height: .96;
    text-wrap: balance
}

.perspective p {
    color: #ffffffe0;
    font-size: 13px;
    line-height: 1.75
}

.perspective-head {
    z-index: 12
}

.contact-media:after {
    background: linear-gradient(90deg, #170f0bfa, #170f0be8 51%, #170f0b8c), linear-gradient(0deg, #170f0bf2, transparent 58%)
}

.contact-media i {
    display: grid;
    place-items: center;
    border: 0;
    box-shadow: none;
    background: url("./assets/images/logos/favicon-brown.svg") center/42% no-repeat;
    filter: brightness(0) invert(1);
    opacity: .3
}

.contact-media i:before {
    position: absolute;
    inset: 0;
    border: 1px solid #ffffff75;
    border-radius: 50%;
    content: ""
}

.contact-copy>p:not(.eyebrow) {
    color: #ffffffe3;
    font-size: 14px
}

.contact address p,
.contact address a {
    font-size: 11px;
    color: #fff
}

.contact address span {
    color: #ffffffac
}

.contact footer p,
.contact footer span {
    color: #ffffffe0;
    font-size: 9px;
    font-weight: 400
}

@media(max-width:1100px) and (min-width:901px) {
    .header {
        grid-template-columns: 200px 1fr 200px
    }

    .header nav {
        gap: 18px
    }

    .header nav a {
        font-size: 7px
    }

    .institution-copy h2 {
        font-size: 5.5vw
    }

    .audience-list article {
        padding: 18px
    }

    .value-system article {
        width: 190px
    }
}

@media(max-width:900px) {
    .signature-mark {
        display: none
    }

    .header,
    .header.condensed {
        height: 72px;
        grid-template-columns: 1fr auto;
        padding: 0 18px
    }

    .brand {
        width: 145px !important
    }

    .brand>span,
    .brand>span img {
        width: 145px !important
    }

    .hero {
        height: 118svh
    }

    .hero-copy {
        bottom: 50px
    }

    .hero h1 {
        font-size: clamp(46px, 12vw, 74px)
    }

    .complexity {
        min-height: auto
    }

    .complexity-stage {
        min-height: 1050px;
        padding-top: 95px
    }

    .complexity-media {
        top: 145px;
        right: 20px;
        left: 20px;
        width: auto;
        height: 43vh
    }

    .complexity-b {
        width: 92px
    }

    .complexity-b img {
        width: 37px;
        height: auto
    }

    .complexity-copy {
        width: auto;
        padding-top: 490px
    }

    .complexity-copy h2 {
        font-size: clamp(39px, 9.3vw, 66px)
    }

    .institutions {
        height: auto
    }

    .institutions-stage {
        position: relative;
        height: auto;
        min-height: 1180px;
        padding: 90px 20px 50px
    }

    .institution-visual {
        top: 340px;
        right: 0;
        width: 88%;
        height: 430px
    }

    .institution-copy {
        position: relative;
        top: auto;
        left: auto;
        width: auto
    }

    .institution-copy .eyebrow {
        margin-top: 60px
    }

    .institution-copy h2 {
        font-size: clamp(39px, 9vw, 66px)
    }

    .institution-b {
        width: 120px
    }

    .audience-list {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: 1fr 1fr;
        margin-top: 500px
    }

    .audience-list article {
        min-height: 170px
    }

    .audience-list article:nth-child(2) {
        border-right: 0
    }

    .practice-content>p {
        font-size: 12px
    }

    .practice-object {
        display: none !important
    }

    .value {
        height: auto
    }

    .value-pin {
        position: relative;
        height: auto;
        min-height: 1080px;
        padding: 90px 20px
    }

    .value-intro {
        position: relative;
        top: auto;
        left: auto;
        width: auto
    }

    .value-intro .eyebrow {
        margin-top: 60px
    }

    .value-intro h2 {
        font-size: clamp(51px, 12vw, 78px)
    }

    .value-system {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        aspect-ratio: auto;
        transform: none;
        margin-top: 80px;
        padding-top: 190px
    }

    .value-b {
        top: 0;
        left: 50%;
        width: 165px;
        transform: translateX(-50%)
    }

    .value-system article {
        position: relative;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100%;
        min-height: 105px;
        padding: 18px 0;
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 8px;
        background: transparent
    }

    .value-system article h3 {
        font-size: 23px
    }

    .value-system article p {
        grid-column: 2
    }

    .method .shell {
        display: block;
        min-height: auto;
        padding: 105px 0
    }

    .method-intro {
        position: relative;
        top: auto
    }

    .method-intro .eyebrow {
        margin-top: 60px
    }

    .method-intro h2 {
        font-size: clamp(44px, 9.5vw, 68px)
    }

    .method-b {
        width: 90px
    }

    .delivery-steps {
        padding-top: 80px
    }

    .delivery-line {
        top: 80px;
        bottom: 0
    }

    .delivery-steps article {
        min-height: 160px;
        grid-template-columns: 54px 1fr
    }

    .delivery-steps article>b {
        display: none
    }

    .perspectives {
        height: auto
    }

    .perspective,
    .p1 {
        position: relative;
        height: max(760px, 100svh);
        opacity: 1
    }

    .perspective>img {
        top: 100px;
        right: 5%;
        width: 90%;
        height: 40%;
        transform: none
    }

    .perspective>div {
        background: linear-gradient(0deg, #07171dfa 0%, #07171d8a 58%, transparent)
    }

    .perspective section {
        right: 20px;
        bottom: 48px;
        left: 20px;
        width: auto
    }

    .perspective h2 {
        font-size: clamp(41px, 9.2vw, 67px)
    }

    .perspective p {
        font-size: 12px
    }

    .contact-copy>p:not(.eyebrow) {
        font-size: 12px
    }
}

@media(max-width:600px) {
    .audience-list {
        grid-template-columns: 1fr
    }

    .audience-list article {
        min-height: 145px;
        border-right: 0
    }

    .audience-list h3 {
        margin-top: 25px
    }

    .institutions-stage {
        min-height: 1420px
    }

    .institution-visual {
        top: 430px;
        height: 380px
    }

    .audience-list {
        margin-top: 470px
    }

    .value-pin {
        padding-inline: 20px
    }
}

@media(prefers-reduced-motion:reduce) {
    .signature-mark {
        display: none
    }

    .institutions,
    .value,
    .perspectives {
        height: auto
    }

    .institutions-stage,
    .value-pin,
    .perspectives-sticky {
        position: relative;
        height: auto
    }

    .institution-visual,
    .institution-copy,
    .audience-list,
    .value-intro,
    .value-system {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none
    }

    .perspective,
    .p1 {
        position: relative;
        height: 100svh;
        opacity: 1
    }
}
/* Floating glass navigation */
.header,
.header.condensed {
    top: 16px;
    left: 3vw;
    width: 94vw;
    height: 72px;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: clamp(28px, 4vw, 64px);
    padding: 0 28px;
    border: 1px solid #ffffff24;
    border-radius: 40px;
    background: linear-gradient(100deg, #152127b8, #111a1ec7);
    box-shadow: 0 14px 45px #00000022, inset 0 1px #ffffff14;
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%)
}

.header.condensed {
    top: 10px;
    height: 66px;
    background: #0a151bcc
}

.header .brand,
.header.condensed .brand {
    width: 150px !important;
    height: 56px
}

.header .brand>span,
.header .brand>span img {
    width: 150px !important;
    height: 56px !important
}

.header>nav,
.header nav {
    gap: clamp(24px, 2.8vw, 44px)
}

.header>nav a,
.header nav a {
    padding: 25px 0;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    opacity: .9
}

.header .pill {
    min-height: 44px;
    padding: 0 22px;
    border-color: #ffffff58;
    border-radius: 4px;
    background: #ffffff08;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    transition: background .3s var(--ease), color .3s var(--ease)
}

.header .pill:hover {
    background: #fff;
    color: var(--dark)
}

@media(max-width:900px) {
    .header,
    .header.condensed {
        top: 10px;
        left: 12px;
        width: calc(100% - 24px);
        height: 62px;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 0 10px 0 18px;
        border-radius: 32px
    }

    .header .brand,
    .header.condensed .brand {
        width: 126px !important;
        height: 48px
    }

    .header .brand>span,
    .header .brand>span img {
        width: 126px !important;
        height: 48px !important
    }

    .header .menu {
        display: block;
        width: 44px;
        border-color: #ffffff45;
        color: #fff;
        background: #ffffff08
    }

    .mobile-nav {
        z-index: 190;
        display: block;
        padding: 98px 24px 28px;
        background: #071419f5;
        color: #fff;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px)
    }

    .mobile-nav nav {
        align-content: center
    }

    .mobile-nav a {
        padding: 20px 4px;
        font-size: clamp(28px, 9vw, 42px)
    }

    body.menu-open .header {
        border-color: #ffffff3b;
        background: #0a151bf2
    }

    body.menu-open .mobile-nav {
        visibility: visible;
        opacity: 1
    }
}

@media(max-width:420px) {
    .header,
    .header.condensed {
        left: 8px;
        width: calc(100% - 16px)
    }

    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header .brand>span img {
        width: 114px !important
    }
}
/* Transparent header and safe logo spacing */
.header,
.header.condensed {
    top: 16px;
    height: 72px;
    border-color: #ffffff2b;
    background: #07141912;
    box-shadow: 0 10px 35px #00000012, inset 0 1px #ffffff18;
    -webkit-backdrop-filter: blur(7px) saturate(110%);
    backdrop-filter: blur(7px) saturate(110%)
}

.header.condensed {
    background: #0714191f
}

.header .brand,
.header.condensed .brand {
    width: 150px !important;
    height: 48px;
    padding: 3px 0;
    overflow: visible
}

.header .brand>span,
.header.condensed .brand>span {
    width: 150px !important;
    height: 48px;
    overflow: visible
}

.header .brand>span img,
.header.condensed .brand>span img {
    top: 50% !important;
    width: 150px !important;
    height: 42px !important;
    object-fit: contain !important;
    object-position: left center;
    transform: translateY(-50%)
}

@media(max-width:900px) {
    .header,
    .header.condensed {
        top: 10px;
        height: 62px;
        background: #0714191a;
        -webkit-backdrop-filter: blur(8px) saturate(110%);
        backdrop-filter: blur(8px) saturate(110%)
    }

    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span {
        width: 126px !important;
        height: 44px
    }

    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 126px !important;
        height: 38px !important
    }

    body.menu-open .header,
    body.menu-open .header.condensed {
        background: #071419d9;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px)
    }
}

@media(max-width:420px) {
    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span,
    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 114px !important
    }
}
/* Complexity section visual corrections */
.header.condensed {
    border-color: #ffffff35;
    background: #071419ee;
    box-shadow: 0 12px 38px #0000002b;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%)
}

.complexity-media {
    right: 5vw;
    width: min(40vw, 570px);
    height: 68vh;
    min-height: 520px;
    max-height: 720px
}

.complexity-media>img {
    height: 100%;
    object-position: center center;
    filter: saturate(.76) contrast(1.03)
}

.complexity-b {
    right: 7%;
    bottom: 10%;
    width: 132px;
    transform-origin: center
}

.complexity-b img {
    width: 50px;
    height: 56px;
    object-fit: contain;
    transform: none !important
}

.complexity-media figcaption {
    color: var(--brown);
    text-shadow: 0 1px 8px #f1e0d6, 0 0 3px #f1e0d6;
    opacity: .92
}

@media(max-width:900px) {
    .complexity-media {
        right: 20px;
        left: 20px;
        width: auto;
        height: 43vh;
        min-height: 330px;
        max-height: 500px
    }

    .complexity-b {
        width: 88px
    }

    .complexity-b img {
        width: 35px;
        height: 40px
    }

    .header.condensed {
        background: #071419ee
    }
}
/* Smooth complexity-to-institutions transition */
.scene-portal-dark {
    will-change: transform;
    transform-origin: center center
}

.complexity-media,
.complexity-copy {
    will-change: transform, opacity
}
/* Institutions section readability and scroll rhythm */
@media(min-width:901px) {
    .institutions {
        height: 380svh
    }

    .institution-copy {
        top: 11vh
    }

    .institution-copy .eyebrow {
        margin-top: 7vh;
        font-size: 11px;
        letter-spacing: .14em
    }

    .institution-copy h2 {
        font-size: clamp(44px, 4.8vw, 74px);
        line-height: 1
    }

    .institution-copy>p:last-child {
        max-width: 560px;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.6
    }

    .audience-list {
        bottom: 2.5vh
    }

    .audience-list article {
        min-height: 176px;
        padding: 22px 24px;
        transition: background-color .55s var(--ease), color .55s var(--ease), transform .55s var(--ease)
    }

    .audience-list article:hover,
    .audience-list article.is-active {
        transform: translateY(-6px)
    }

    .audience-list span {
        font-size: 10px
    }

    .audience-list h3 {
        margin-top: 32px;
        font-size: clamp(19px, 1.45vw, 24px)
    }

    .audience-list p {
        margin-top: 9px;
        font-size: 11px;
        line-height: 1.5
    }
}

@media(max-width:900px) {
    .institutions-stage {
        min-height: 1280px
    }

    .institution-copy .eyebrow {
        margin-top: 48px;
        font-size: 10px
    }

    .institution-copy>p:last-child {
        font-size: 14px;
        line-height: 1.65
    }

    .audience-list {
        margin-top: 520px
    }

    .audience-list article {
        min-height: 180px;
        padding: 24px
    }

    .audience-list span {
        font-size: 10px
    }

    .audience-list h3 {
        margin-top: 30px;
        font-size: 22px
    }

    .audience-list p {
        font-size: 12px;
        line-height: 1.55
    }
}

@media(max-width:600px) {
    .institutions-stage {
        min-height: 1580px
    }

    .audience-list {
        margin-top: 500px
    }

    .audience-list article {
        min-height: 160px
    }
}
/* Audience card copy refinements */
.practice-ghost {
    display: none !important
}

@media(min-width:901px) {
    .audience-list h3 {
        font-size: clamp(18px, 1.35vw, 22px);
        white-space: nowrap
    }

    .audience-list p {
        font-size: 12.5px;
        line-height: 1.55
    }
}

@media(max-width:900px) {
    .audience-list h3 {
        white-space: normal
    }

    .audience-list p {
        font-size: 13px
    }
}
/* Terra fragment frame refinement */
.terra-layer .practice-fragment {
    top: 17vh;
    left: 7vw;
    width: min(20vw, 310px);
    min-width: 245px;
    aspect-ratio: .82;
    border: 1px solid #ffffff4a;
    border-radius: 16px;
    clip-path: none;
    box-shadow: 0 24px 65px #00000045
}

.terra-layer .practice-fragment img {
    height: 100%;
    object-position: center center;
    border-radius: inherit
}
/* Dynamic institutions copy */
.institution-copy h2,
.institution-copy>p:last-child {
    will-change: transform, opacity
}

@media(min-width:901px) {
    .institution-copy h2 {
        min-height: 2.05em;
        max-width: 620px
    }

    .institution-copy>p:last-child {
        min-height: 3.2em
    }
}
/* Practice section small-type scale */
@media(min-width:901px) {
    .practice-chrome {
        font-size: 10px
    }

    .practice-kicker {
        font-size: 10px
    }

    .practice-kicker span {
        width: 34px
    }

    .practice-content>p {
        max-width: 590px;
        font-size: 15px;
        line-height: 1.65
    }

    .practice-content li {
        padding: 11px 0;
        font-size: 12px;
        line-height: 1.4
    }

    .practice-dots button {
        font-size: 10px
    }

    .practice-dots button span {
        font-size: 8px
    }

    .practice-caption {
        font-size: 9px
    }
}

@media(max-width:900px) {
    .practice-chrome {
        font-size: 10px
    }

    .practice-kicker {
        font-size: 10px
    }

    .practice-content>p {
        font-size: 14px;
        line-height: 1.65
    }

    .practice-content li {
        font-size: 12px;
        line-height: 1.45
    }
}
/* Final small-copy visibility pass */
.institution-visual figcaption {
    display: none !important
}

@media(min-width:901px) {
    .audience-list span {
        font-size: 11px
    }

    .audience-list p {
        font-size: 14px;
        line-height: 1.55
    }

    .practice-chrome {
        font-size: 12px
    }

    .practice-chrome>b {
        font-size: 11px
    }
}

@media(max-width:900px) {
    .audience-list span {
        font-size: 11px
    }

    .audience-list p {
        font-size: 14px
    }

    .practice-chrome {
        font-size: 11px
    }
}
/* Borderless institution image reveal */
@media(min-width:901px) {
    .institution-visual {
        clip-path: none !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        will-change: width
    }

    .institution-visual:after {
        background: linear-gradient(90deg, #07171db8 0%, #07171d52 27%, transparent 68%), linear-gradient(0deg, #07171de8 0%, transparent 42%)
    }
}

@media(max-width:900px) {
    .institution-visual {
        -webkit-mask-image: none;
        mask-image: none
    }
}
/* Value section small-type scale */
.value-intro>p:last-child {
    font-size: 15px;
    line-height: 1.6
}

.value-system article span {
    font-size: 10px
}

.value-system p {
    font-size: 12.5px;
    line-height: 1.5
}

@media(max-width:900px) {
    .value-intro>p:last-child {
        font-size: 14px
    }

    .value-system article span {
        font-size: 11px
    }

    .value-system article p {
        font-size: 13px
    }
}
/* Delivery step readability and terminal connector */
.delivery-steps article>span {
    font-size: 11px
}

.delivery-steps p {
    font-size: 14px;
    line-height: 1.55
}

.delivery-steps b {
    font-size: 10px
}

.delivery-steps article:last-child>span:after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 63px;
    transform: translateX(-50%);
    background: #f1e0d6;
    content: "";
    pointer-events: none
}

@media(max-width:900px) {
    .delivery-steps article>span {
        font-size: 11px
    }

    .delivery-steps p {
        font-size: 13px
    }

    .delivery-steps article:last-child>span:after {
        height: 53px
    }
}
/* Animated terminal delivery connector */
.delivery-line {
    bottom: 0
}

.delivery-steps article:last-child>span:after {
    display: none
}
/* Rising perspective image chapters */
@media(min-width:901px) {
    .perspectives {
        height: 380svh
    }

    .perspective>img {
        top: 15%;
        right: 4vw;
        left: auto;
        width: min(49vw, 760px);
        height: 70%;
        border: 1px solid #ffffff38;
        border-radius: 18px;
        object-fit: cover;
        -webkit-mask: none;
        mask: none;
        box-shadow: 0 30px 90px #00000052;
        filter: saturate(.78) contrast(1.04);
        opacity: 0;
        will-change: transform, opacity
    }

    .perspective>div {
        background: linear-gradient(90deg, #07171d 0%, #07171df2 38%, #07171d8c 58%, #07171d22 82%)
    }

    .perspective section {
        z-index: 4;
        left: 5vw;
        width: min(620px, 43vw)
    }

    .p1>img {
        opacity: 0
    }
}
/* Perspective floating image stream */
@media(min-width:901px) {
    .perspectives {
        height: 430svh
    }

    .perspective>img {
        display: none
    }

    .perspective-gallery {
        position: absolute;
        z-index: 2;
        inset: 0;
        overflow: hidden;
        pointer-events: none
    }

    .perspective-gallery:after {
        position: absolute;
        z-index: 4;
        inset: 0;
        background: linear-gradient(90deg, #07171dfc 0%, #07171de8 32%, #07171d73 53%, transparent 76%);
        content: "";
        pointer-events: none
    }

    .perspective-gallery figure {
        position: absolute;
        z-index: 2;
        bottom: 0;
        width: clamp(210px, 20vw, 340px);
        aspect-ratio: .78;
        margin: 0;
        overflow: hidden;
        border: 1px solid #ffffff45;
        border-radius: 18px;
        background: #0d222a;
        box-shadow: 0 28px 75px #00000059;
        opacity: 0;
        will-change: transform, opacity
    }

    .perspective-gallery figure:nth-child(3n+1) {
        right: 6vw
    }

    .perspective-gallery figure:nth-child(3n+2) {
        right: 29vw;
        width: clamp(180px, 17vw, 290px);
        aspect-ratio: 1.05
    }

    .perspective-gallery figure:nth-child(3n) {
        right: 16vw;
        width: clamp(230px, 23vw, 380px);
        aspect-ratio: 1.22
    }

    .perspective-gallery figure:nth-child(4n) {
        border-radius: 50% 50% 18px 18px
    }

    .perspective-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.78) contrast(1.05)
    }

    .perspective section {
        z-index: 6
    }
}

@media(max-width:900px) {
    .perspective-gallery {
        display: none
    }
}
/* Perspective gallery layer correction */
@media(min-width:901px) {
    .perspective,
    .p1 {
        background: transparent
    }
}
/* Twenty-image paired stream and contact type */
@media(min-width:901px) {
    .perspectives {
        height: 480svh
    }

    .perspective-gallery figure:nth-child(odd) {
        right: 27vw;
        bottom: 5vh;
        width: clamp(190px, 18vw, 300px);
        aspect-ratio: .82;
        border-radius: 18px
    }

    .perspective-gallery figure:nth-child(even) {
        right: 5vw;
        bottom: -10vh;
        width: clamp(215px, 21vw, 350px);
        aspect-ratio: 1.08;
        border-radius: 18px
    }

    .perspective-gallery figure:nth-child(4n+2) {
        border-radius: 50% 50% 18px 18px
    }

    .perspective-gallery figure:nth-child(5n) {
        aspect-ratio: 1.28
    }

    .contact-copy>p:not(.eyebrow) {
        font-size: 16px;
        line-height: 1.65
    }

    .contact-cta {
        font-size: 13px
    }

    .contact address span {
        font-size: 10px
    }

    .contact address p,
    .contact address a {
        font-size: 13px;
        line-height: 1.55
    }

    .contact footer p,
    .contact footer span {
        font-size: 11px
    }
}

@media(max-width:900px) {
    .contact-copy>p:not(.eyebrow) {
        font-size: 14px;
        line-height: 1.65
    }

    .contact-cta {
        font-size: 11px
    }

    .contact address p,
    .contact address a {
        font-size: 12px
    }

    .contact footer span {
        font-size: 9px
    }
}
/* Branded loader mark and larger header logo */
.loader>b img {
    display: block;
    width: 42px;
    height: 46px;
    object-fit: contain
}

@media(min-width:901px) {
    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span {
        width: 172px !important
    }

    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 172px !important;
        height: 48px !important
    }
}

@media(max-width:900px) {
    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span {
        width: 138px !important
    }

    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 138px !important;
        height: 41px !important
    }
}

@media(max-width:420px) {
    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span,
    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 124px !important
    }
}
/* Preserve full-resolution complexity image */
.complexity-media {
    will-change: auto;
    transform-style: flat
}

.complexity-media>img {
    image-rendering: auto;
    backface-visibility: visible
}
/* Final mobile header layout */
@media(max-width:900px) {
    .header,
    .header.condensed {
        top: 10px;
        right: auto !important;
        left: 12px !important;
        width: calc(100dvw - 24px) !important;
        max-width: calc(100dvw - 24px);
        height: 60px;
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 10px;
        padding: 0 8px 0 16px;
        border: 1px solid #ffffff38;
        border-radius: 999px;
        background: #071419b8;
        box-shadow: 0 10px 30px #00000024, inset 0 1px #ffffff18;
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        backdrop-filter: blur(14px) saturate(120%)
    }

    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span {
        width: 142px !important;
        height: 44px;
        min-width: 0
    }

    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 142px !important;
        height: 38px !important;
        object-position: left center
    }

    .header .menu {
        display: block;
        width: 42px;
        height: 42px;
        margin: 0;
        justify-self: end;
        padding: 0;
        border-color: #ffffff52;
        background: #ffffff0d
    }

    .header .menu i {
        width: 15px;
        margin: 4px auto
    }

    .mobile-nav {
        padding-top: 88px
    }
}

@media(max-width:360px) {
    .header,
    .header.condensed {
        right: auto !important;
        left: 8px !important;
        width: calc(100dvw - 16px) !important;
        max-width: calc(100dvw - 16px);
        grid-template-columns: minmax(0, 1fr) 40px;
        padding-left: 12px
    }

    .header .brand,
    .header.condensed .brand,
    .header .brand>span,
    .header.condensed .brand>span,
    .header .brand>span img,
    .header.condensed .brand>span img {
        width: 126px !important
    }

    .header .menu {
        width: 40px;
        height: 40px
    }
}
/* Final mobile section flow */
@media(max-width:900px) {
    .complexity-stage {
        display: flex;
        min-height: 0;
        flex-direction: column;
        padding: 104px 20px 64px;
        overflow: hidden
    }

    .complexity .index {
        position: relative;
        top: auto;
        left: auto;
        order: 0;
        margin-bottom: 28px
    }

    .complexity-media {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: clamp(300px, 92vw, 430px);
        min-height: 0;
        order: 1;
        clip-path: polygon(5% 0, 100% 0, 100% 92%, 0 100%)
    }

    .complexity-copy {
        position: relative;
        top: auto;
        width: 100%;
        order: 2;
        margin-top: 30px;
        padding-top: 0;
        transform: none
    }

    .complexity-copy .eyebrow {
        margin-bottom: 16px
    }

    .complexity-copy h2 {
        font-size: clamp(40px, 11.5vw, 62px)
    }

    .complexity-copy>p:not(.eyebrow) {
        margin-top: 24px
    }

    .complexity-copy strong {
        margin-top: 22px
    }

    .complexity .coordinates {
        display: none
    }

    .institutions-stage {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
        padding: 104px 20px 56px;
        overflow: hidden
    }

    .institution-copy {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        order: 1
    }

    .institution-copy .eyebrow {
        margin-top: 42px
    }

    .institution-copy h2 {
        font-size: clamp(40px, 11.5vw, 60px)
    }

    .institution-visual {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: clamp(330px, 105vw, 440px);
        order: 2;
        margin: 32px 0 0;
        clip-path: none
    }

    .institution-visual>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .institution-b {
        width: 104px
    }

    .audience-list {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        order: 3;
        margin-top: 24px
    }

    .practice-layer,
    .practice-layer:not(.axis-layer) {
        min-height: 730px;
        background: #07171d;
        isolation: isolate
    }

    .practice-media {
        z-index: 0;
        display: block;
        visibility: visible;
        opacity: 1
    }

    .practice-media img {
        display: block;
        visibility: visible;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1
    }

    .practice-atmosphere {
        z-index: 1;
        background: linear-gradient(0deg, #061116f2 0%, #06111699 48%, #06111624 82%)
    }

    .practice-content,
    .terra-layer .practice-content,
    .nexus-layer .practice-content {
        z-index: 2
    }
}
/* Mobile perspective image visibility */
@media(max-width:900px) {
    .perspective>img {
        z-index: 0;
        display: block;
        visibility: visible;
        opacity: 1 !important;
        -webkit-mask: none !important;
        mask: none !important;
        transform: none !important;
        filter: saturate(.82) contrast(1.04)
    }

    .perspective>div {
        z-index: 1
    }

    .perspective section {
        z-index: 2
    }
}
/* Keep the mobile header identical before and after condensation */
@media(max-width:900px) {
    body>.header,
    body>.header.condensed,
    body>.header:not(.condensed) {
        position: fixed !important;
        inset: calc(16px + var(--mobile-vv-top, 0px)) auto auto 12px !important;
        width: calc(100dvw - 24px) !important;
        max-width: calc(100dvw - 24px) !important;
        height: 60px !important;
        margin: 0 !important;
        transform: none !important;
        transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease) !important;
        will-change: auto
    }

    body>.header>* {
        translate: none !important;
        transform: none !important;
        opacity: 1 !important
    }
}

@media(max-width:360px) {
    body>.header,
    body>.header.condensed,
    body>.header:not(.condensed) {
        inset: calc(16px + var(--mobile-vv-top, 0px)) auto auto 8px !important;
        width: calc(100dvw - 16px) !important;
        max-width: calc(100dvw - 16px) !important
    }
}