:root {
    --dark: #091a21;
    --deep: #000;
    --clay: #fff;
    --brown: #3d2d20;
    --paper: #fff;
    --blue: #091a21;
    --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;
    overflow-x: hidden
}

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 #ffffff5c;
    border-radius: 50%;
    font: 46px Georgia
}

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

.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: #ffffffe8;
    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: 66%;
    width: min(34vw, 500px);
    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: calc(3vw + 28px);
    left: calc(3vw + 28px);
    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: calc(3vw + 28px);
    bottom: 8.5vh;
    left: calc(3vw + 28px)
}

.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: 0;
    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 calc(3vw + 28px) 60px
}

.complexity .index {
    position: absolute;
    top: 105px;
    left: calc(3vw + 28px)
}

.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 #091a2142;
    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 #091a2133;
    font-size: 13px;
    font-weight: 500
}

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

.coordinates {
    position: absolute;
    right: calc(3vw + 28px);
    bottom: 38px;
    left: calc(3vw + 28px);
    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%, #091a2126, 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, #000000f2, #000000b2 48%, #0000004a), linear-gradient(0deg, #000000a8, 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);
    color: var(--white)
}

.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: 67%;
        width: 58vw
    }

    .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 #091a2128
}

.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, #000000f5 0%, #000000b3 44%, #00000032 78%), linear-gradient(0deg, #000000d1 0%, transparent 55%)
}

.terra-layer .practice-atmosphere {
    background: linear-gradient(90deg, #091a21ed 0%, #091a2199 45%, #091a2120 78%), linear-gradient(0deg, #091a21d9, transparent 58%)
}

.nexus-layer .practice-atmosphere {
    background: radial-gradient(circle at 73% 38%, #091a2142, transparent 28%), linear-gradient(90deg, #091a21f0 0%, #091a218f 53%, #091a2128), linear-gradient(0deg, #091a21d9, 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: #ffffff
}

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

.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: #ffffff;
    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: auto
    }

    .cursor {
        position: fixed;
        z-index: 10001;
        top: 0;
        left: 0;
        display: none !important;
        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-hidden {
        opacity: 0
    }

    .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: pointer
    }
}

@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, #000000f7 2%, #0000009c 58%, #00000024)
    }

    .terra-layer .practice-atmosphere {
        background: linear-gradient(0deg, #091a21fa, #091a2183 60%, #091a2121)
    }

    .nexus-layer .practice-atmosphere {
        background: linear-gradient(0deg, #091a21fa, #091a2185 60%, #091a2121)
    }

    .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: 17px;
    height: 19px;
    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;
    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: 19%;
    height: 22%;
    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;
    color: #000;
    line-height: 1.01
}

.complexity-copy h2 span {
    color: #3d2d20;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400
}

.complexity-copy .eyebrow {
    color: #3d2d20;
    font-weight: 600
}

.complexity-copy>p:not(.eyebrow) {
    color: #091a21;
    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 #091a2138
}

.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: #ffffffd9;
    backdrop-filter: blur(8px)
}

.complexity-b img {
    width: 44px;
    height: 49px
}

.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: #091a21
}

.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, #091a21f2 0%, #091a2172 35%, #091a210d 72%), linear-gradient(0deg, #091a21e8 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: #091a2187;
    backdrop-filter: blur(10px)
}

.institution-b img {
    width: 33%;
    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: #ffffff
}

.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: #091a21c7;
    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: #ffffff;
    color: #091a21;
    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: #091a21b0
}

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

.terra-layer .practice-atmosphere {
    background: linear-gradient(90deg, #091a21fa 0%, #091a21cf 45%, #091a2152 76%), linear-gradient(0deg, #091a21e9, transparent 58%)
}

.nexus-layer .practice-atmosphere {
    background: radial-gradient(circle at 73% 38%, #091a214d, transparent 28%), linear-gradient(90deg, #091a21fa 0%, #091a21c9 53%, #091a2157), linear-gradient(0deg, #091a21e8, 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: #ffffff;
    box-shadow: 0 40px 120px #0008
}

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

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

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

.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: #ffffff;
    box-shadow: 0 35px 90px #091a2124
}

.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: 30%
}

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

.value-system article {
    position: absolute;
    width: 230px;
    padding: 16px 18px;
    border-top: 1px solid #091a2142;
    background: #ffffffdb;
    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: #ffffff
}

.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: 34%;
    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: #ffffff
}

.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: #ffffff;
    background: #ffffff;
    color: #091a21
}

.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: #091a21
}

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

.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%, #091a2123, transparent 32%), linear-gradient(90deg, #091a21 0%, #091a21f2 46%, transparent 72%)
}

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

.perspective small {
    color: #ffffff
}

.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/30% 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: 28px;
        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, #091a21fa 0%, #091a218a 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: 40px;
    height: 45px;
    object-fit: contain;
    transform: none
}

.complexity-media figcaption {
    color: var(--brown);
    text-shadow: 0 1px 8px #ffffff, 0 0 3px #ffffff;
    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: 27px;
        height: 31px
    }

    .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, #091a21b8 0%, #091a2152 27%, transparent 68%), linear-gradient(0deg, #091a21e8 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: #ffffff;
    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, #091a21 0%, #091a21f2 38%, #091a218c 58%, #091a2122 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, #091a21fc 0%, #091a21e8 32%, #091a2173 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
    }
}

/* =========================================================
   08. Team — staggered portrait field
   ========================================================= */
.team-section {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: clamp(110px, 11vw, 180px) 0 clamp(120px, 12vw, 190px);
    color: var(--paper)
}

.team-section:before {
    position: absolute;
    inset: 8% -16% auto auto;
    width: min(780px, 62vw);
    aspect-ratio: 1;
    border: 1px solid rgba(241, 224, 214, .12);
    border-radius: 50%;
    content: "";
    pointer-events: none
}

.team-section:after {
    position: absolute;
    top: 0;
    right: 12%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(241, 224, 214, .22), transparent);
    content: "";
    pointer-events: none
}

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

.team-intro {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(460px, 1.9fr) minmax(250px, .8fr);
    align-items: end;
    gap: clamp(28px, 5vw, 76px);
    margin-bottom: clamp(64px, 8vw, 116px)
}

.team-intro .eyebrow {
    margin-top: 30px;
    color: rgba(255, 255, 255, .62)
}

.team-intro h2 {
    margin: 0;
    font-size: clamp(54px, 6.2vw, 98px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.055em
}

.team-intro h2 em {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: Georgia, serif;
    font-weight: 400;
    line-height: .9
}

.team-intro>p {
    max-width: 410px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    line-height: 1.8
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
    align-items: start
}

.team-card {
    position: relative;
    min-width: 0;
    cursor: pointer
}

.team-card:nth-child(even) {
    margin-top: clamp(46px, 6.5vw, 104px)
}

.team-card figure {
    position: relative;
    height: clamp(390px, 38vw, 590px);
    margin: 0;
    overflow: hidden;
    background: #10262f;
    clip-path: polygon(0 0, 100% 7%, 100% 94%, 0 100%);
    isolation: isolate
}

.team-card:nth-child(even) figure {
    height: clamp(340px, 32vw, 500px);
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 93%)
}

.team-card figure:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(4, 15, 20, .82));
    content: "";
    transition: opacity .6s var(--ease)
}

.team-card figure img {
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.7) contrast(1.06);
    transform: scale(1.04);
    transition: filter .7s var(--ease), transform .9s var(--ease)
}

.team-card-copy {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr 38px;
    align-items: start;
    gap: 12px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.team-card-copy>span,
.team-card-copy p {
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase
}

.team-card-copy h3 {
    margin: -4px 0 5px;
    font-size: clamp(18px, 1.45vw, 23px);
    font-weight: 400;
    line-height: 1.2
}

.team-card-copy p {
    margin: 0
}

.team-card-copy b {
    display: grid;
    width: 38px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(241, 224, 214, .28);
    border-radius: 50%;
    transition: background-color .45s var(--ease), transform .65s var(--ease)
}

.team-card-copy b img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1)
}

.team-card:is(:hover, :focus-visible) figure img {
    filter: saturate(1) contrast(1.02);
    transform: scale(1.1)
}

.team-card:is(:hover, :focus-visible) .team-card-copy b {
    background: rgba(255, 255, 255, .12);
    transform: rotate(90deg)
}

/* =========================================================
   09. Insights — one featured story, two counterpoints
   ========================================================= */
.insights-section {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(110px, 10vw, 170px) 0 clamp(120px, 11vw, 180px);
    background: #091a21;
    color: #fff
}

.insights-shell {
    position: relative;
    z-index: 2
}

.insights-intro,
.insight-copy {
    will-change: translate, opacity
}

.insights-intro {
    display: grid;
    grid-template-columns: .7fr 1.55fr .72fr;
    align-items: end;
    gap: clamp(28px, 5vw, 76px);
    margin-bottom: clamp(60px, 7.5vw, 110px)
}

.insights-intro .eyebrow {
    margin: 28px 0 0
}

.insights-intro h2 {
    margin: 0;
    font-size: clamp(62px, 7.2vw, 116px);
    font-weight: 300;
    line-height: .88;
    letter-spacing: -.065em
}

.insights-intro h2 em {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: Georgia, serif;
    font-weight: 400;
    line-height: .9
}

.insights-intro>p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    line-height: 1.8
}

.insights-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(330px, .66fr);
    grid-template-rows: repeat(2, minmax(290px, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 20px
}

.insight-card {
    position: relative;
    display: grid;
    min-height: 320px;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .18);
    transition: border-color .45s var(--ease), translate .45s var(--ease), box-shadow .55s var(--ease);
    will-change: transform, opacity, clip-path
}

.insight-card:is(:hover, :focus-visible) {
    border-color: rgba(255, 255, 255, .58);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .3);
    translate: 0 -7px
}

.insight-featured {
    grid-row: 1 / 3;
    min-height: 660px
}

.insight-card figure,
.insight-card figure:after {
    position: absolute;
    inset: 0;
    margin: 0
}

.insight-card figure {
    z-index: -2;
    overflow: hidden;
    background: var(--dark)
}

.insight-card figure:after {
    background: linear-gradient(180deg, rgba(4, 16, 21, .08) 15%, rgba(4, 16, 21, .88) 100%);
    content: ""
}

.insight-card figure img {
    width: 100%;
    height: 116%;
    object-fit: cover;
    filter: saturate(.72) contrast(1.05);
    transform: scale(1.03);
    transition: filter .8s var(--ease), transform 1.1s var(--ease)
}

.insight-copy {
    align-self: end;
    padding: clamp(26px, 3.2vw, 52px)
}

.insight-copy>div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .34)
}

.insight-copy span,
.insight-copy small {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase
}

.insight-copy small {
    color: rgba(255, 255, 255, .62)
}

.insight-copy h3 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(24px, 3vw, 50px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.035em
}

.insight-card:not(.insight-featured) .insight-copy h3 {
    font-size: clamp(20px, 1.8vw, 29px)
}

.insight-copy>p {
    max-width: 580px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px
}

.insight-copy>b {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase
}

.insight-copy>b i {
    font-size: 16px;
    font-style: normal;
    transition: transform .45s var(--ease)
}

.insight-card:is(:hover, :focus-visible) figure:after {
    opacity: .78
}

.insight-card:is(:hover, :focus-visible) figure img {
    filter: saturate(1) contrast(1.02);
    transform: scale(1.1)
}

.insight-card:is(:hover, :focus-visible) .insight-copy>b i {
    transform: translate(6px, -6px)
}

.insights-orbit {
    position: absolute;
    z-index: 1;
    top: 8%;
    right: -8vw;
    display: grid;
    width: min(620px, 48vw);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    pointer-events: none
}

.insights-orbit img {
    width: 16%;
    filter: brightness(0) invert(1);
    opacity: .2
}

.insights-orbit i {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 50%
}

@media(max-width:1100px) {

    .team-intro,
    .insights-intro {
        grid-template-columns: .7fr 1.8fr
    }

    .team-intro>p,
    .insights-intro>p {
        grid-column: 2
    }
}

@media(max-width:900px) {
    .insights-section {
        height: auto;
        min-height: 100vh
    }

    .insights-shell {
        position: relative;
        height: auto;
        padding: 0;
        overflow: visible
    }

    .team-section,
    .insights-section {
        padding: 104px 0 112px
    }

    .team-intro,
    .insights-intro {
        display: block;
        margin-bottom: 54px
    }

    .team-intro h2,
    .insights-intro h2 {
        margin-top: 34px
    }

    .team-intro>p,
    .insights-intro>p {
        max-width: 520px;
        margin-top: 26px
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 14px
    }

    .team-card:nth-child(even) {
        margin-top: 0
    }

    .team-card figure,
    .team-card:nth-child(even) figure {
        height: min(62vw, 520px)
    }

    .insights-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 14px
    }

    .insight-featured {
        grid-row: auto;
        min-height: 620px
    }

    .insight-card:not(.insight-featured) {
        min-height: 420px
    }

    .insights-orbit {
        top: 4%;
        right: -32vw;
        width: 85vw
    }
}

@media(max-width:600px) {

    .team-section,
    .insights-section {
        padding: 92px 0 96px
    }

    .team-intro h2,
    .insights-intro h2 {
        font-size: clamp(44px, 14vw, 62px)
    }

    .team-grid {
        width: calc(100vw - 20px);
        margin-left: 0;
        padding-right: 20px;
        grid-template-columns: repeat(4, 82vw);
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }

    .team-grid::-webkit-scrollbar {
        display: none
    }

    .team-card {
        scroll-snap-align: start
    }

    .team-card figure,
    .team-card:nth-child(even) figure {
        height: min(120vw, 520px)
    }

    .insight-featured,
    .insight-card:not(.insight-featured) {
        min-height: 500px
    }

    .insight-copy {
        padding: 26px 22px
    }

    .insight-copy h3,
    .insight-card:not(.insight-featured) .insight-copy h3 {
        font-size: clamp(24px, 7.5vw, 34px)
    }

    .insight-copy>p {
        display: none
    }
}

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

    .team-card figure img,
    .insight-card figure img,
    .team-card-copy b,
    .insight-copy>b i {
        transition: none !important;
        transform: none
    }
}

/* 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: #091a21;
        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, #000000f2 0%, #00000099 48%, #00000024 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;
        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;
        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;
        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
    }
}

/* =========================================================
   HOME — PROJECTS + CLIENTS
   Uses the homepage palette only.
   ========================================================= */
.projects-home{position:relative;overflow:hidden;padding:clamp(7rem,11vw,12rem) 0;color:var(--white)}
.projects-home:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.08),transparent 34%),var(--dark)}
.projects-home-shell{position:relative;z-index:1}
.projects-home-intro{display:grid;grid-template-columns:.8fr 2.2fr auto;gap:4vw;align-items:end;margin-bottom:clamp(4rem,8vw,8rem)}
.projects-home-intro h2{font-size:clamp(3rem,6.4vw,7.6rem);font-weight:400;line-height:.92;letter-spacing:-.065em}
.projects-home-intro h2 em,.clients-home h2 em{font-style:normal;color:var(--clay)}
.text-link{display:inline-flex;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid currentColor;color:inherit;text-transform:uppercase;font-size:.68rem;letter-spacing:.16em;white-space:nowrap}
.project-index{border-top:1px solid rgba(255,255,255,.16)}
.project-row{position:relative;isolation:isolate;display:grid;grid-template-columns:5.5rem minmax(0,1.35fr) minmax(0,.85fr) 3.5rem;align-items:center;gap:0 clamp(1.5rem,3vw,3.5rem);padding:clamp(1.8rem,3.2vw,3rem) clamp(1rem,2vw,2rem);border-bottom:1px solid rgba(255,255,255,.16);color:var(--white);transition:padding .6s cubic-bezier(.22,1,.36,1)}
.project-row figure{position:absolute;z-index:-1;inset:0;margin:0;overflow:hidden;clip-path:inset(13% 10% 13% 73%);transition:clip-path .8s cubic-bezier(.22,1,.36,1)}
.project-row figure:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,26,33,.92),rgba(9,26,33,.55) 62%,rgba(9,26,33,.28));opacity:0;transition:opacity .7s ease}
.project-row figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1s cubic-bezier(.22,1,.36,1),filter .7s ease;filter:saturate(.85)}
.project-row-num{font-size:clamp(.8rem,1vw,.95rem);letter-spacing:.14em;color:rgba(255,255,255,.42);transition:color .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.project-row-cat{display:block;margin-bottom:.7rem;font-size:.61rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .5s ease}
.project-row h3{margin:0;max-width:26ch;font-size:clamp(1.35rem,2.1vw,2.35rem);font-weight:400;line-height:1.08;letter-spacing:-.04em;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.project-row p{margin:0;max-width:34ch;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.6);transition:color .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.project-row b{justify-self:end;display:grid;place-items:center;width:2.9rem;height:2.9rem;border:1px solid rgba(255,255,255,.28);border-radius:50%;font-size:.9rem;font-weight:400;transition:transform .6s cubic-bezier(.22,1,.36,1),background .5s ease,border-color .5s ease,color .5s ease}
.project-row:hover figure,.project-row:focus-visible figure{clip-path:inset(0% 0% 0% 0%)}
.project-row:hover figure:after,.project-row:focus-visible figure:after{opacity:1}
.project-row:hover figure img,.project-row:focus-visible figure img{transform:scale(1);filter:saturate(1)}
.project-row:hover,.project-row:focus-visible{padding-inline:clamp(1.6rem,3vw,3rem)}
.project-row:hover .project-row-num,.project-row:focus-visible .project-row-num{color:var(--white);transform:translateY(-.2rem)}
.project-row:hover .project-row-cat,.project-row:focus-visible .project-row-cat{color:rgba(255,255,255,.85)}
.project-row:hover h3,.project-row:focus-visible h3{transform:translateX(.5rem)}
.project-row:hover p,.project-row:focus-visible p{color:rgba(255,255,255,.85);transform:translateX(.5rem)}
.project-row:hover b,.project-row:focus-visible b{background:var(--white);border-color:var(--white);color:var(--dark);transform:rotate(45deg) scale(1.06)}
.project-attribution{margin-top:1.4rem;color:rgba(255,255,255,.52);font-size:.61rem;letter-spacing:.17em;text-transform:uppercase}

.clients-home{position:relative;overflow:hidden;padding:clamp(8rem,13vw,14rem) 0;color:var(--brown)}
.clients-home-shell{position:relative;z-index:2}
.clients-home header{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem 7vw;align-items:start;max-width:78rem}
.clients-home header .eyebrow{grid-column:1}
.clients-home h2{grid-column:2;grid-row:1/4;font-size:clamp(3.3rem,7.1vw,8.5rem);font-weight:400;line-height:.9;letter-spacing:-.07em}
.clients-home h2 em{color:var(--dark)}
.clients-home header>p:last-child{grid-column:1;max-width:30ch;font-size:1rem;line-height:1.65}
.clients-orbit{position:absolute;right:-8vw;top:6vw;width:min(38vw,34rem);aspect-ratio:1;border:1px solid rgba(61,45,32,.16);border-radius:50%;display:grid;place-items:center}
.clients-orbit:before,.clients-orbit i{content:"";position:absolute;border:1px solid rgba(61,45,32,.12);border-radius:50%}
.clients-orbit:before{inset:18%}
.clients-orbit i:first-of-type{inset:34%}
.clients-orbit i:last-of-type{inset:-12%}
.clients-orbit img{width:13%;opacity:.1}
.client-stream{display:flex;overflow:hidden;margin:clamp(5rem,10vw,10rem) calc(50% - 50vw) 0;border-block:1px solid rgba(61,45,32,.16)}
.client-track{display:flex;align-items:center;flex:none;gap:2.3rem;padding:2rem 1.15rem;animation:clientMarquee 38s linear infinite}
.client-track span{font-size:clamp(1.45rem,3vw,3.7rem);white-space:nowrap;letter-spacing:-.04em}
.client-track i{width:.7rem;height:.7rem;border-radius:50%;background:var(--dark)}
.client-stream-logos .client-track{gap:clamp(2.5rem,5vw,5.5rem);padding-block:clamp(2rem,3.4vw,3.2rem)}
.client-logo{display:grid;place-items:center;flex:none}
.client-logo img{display:block;width:auto;height:clamp(2.1rem,3.2vw,3.1rem);object-fit:contain;opacity:.88;transition:opacity .5s ease}
.client-stream-logos:hover .client-logo img{opacity:1}
.client-logo img[src*="afaq"]{height:clamp(2rem,3vw,2.9rem)}
.client-logo img[src*="aimstyle"]{height:clamp(2.1rem,3.2vw,3.1rem)}
.client-logo img[src*="greenway"]{height:clamp(2.9rem,4.4vw,4.3rem)}
.client-stream-logos .client-track i{width:.42rem;height:.42rem;background:rgba(61,45,32,.32)}
@keyframes clientMarquee{to{transform:translateX(-100%)}}
.client-stream:hover .client-track{animation-play-state:paused}
.client-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(4rem,7vw,7rem)}
.client-principles article{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2rem,3vw,3rem);border:1px solid rgba(61,45,32,.16);border-radius:.5rem;background:rgba(255,255,255,.42);transition:translate .55s cubic-bezier(.22,1,.36,1),border-color .55s ease,background .55s ease,box-shadow .55s ease}
.client-principles article:before{content:"";position:absolute;z-index:-1;inset:auto auto -35% -10%;width:min(16rem,60%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(61,45,32,.14),transparent 70%);opacity:0;transform:scale(.6);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.client-principles article:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--brown);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.client-principles article:hover,.client-principles article:focus-within{translate:0 -.5rem;border-color:rgba(61,45,32,.3);background:rgba(255,255,255,.72);box-shadow:0 1.8rem 3.5rem -1.6rem rgba(61,45,32,.28)}
.client-principles article:hover:before,.client-principles article:focus-within:before{opacity:1;transform:scale(1)}
.client-principles article:hover:after,.client-principles article:focus-within:after{transform:scaleX(1)}
.client-principles span{display:block;font-size:clamp(2.6rem,4.4vw,4.2rem);font-weight:300;line-height:1;letter-spacing:-.06em;color:rgba(61,45,32,.22);transition:color .55s ease}
.client-principles article:hover span,.client-principles article:focus-within span{color:var(--brown)}
.client-principles h3{margin:clamp(1.6rem,2.6vw,2.4rem) 0 .9rem;font-size:clamp(1.35rem,1.9vw,1.9rem);font-weight:400;line-height:1.15;letter-spacing:-.035em}
.client-principles p{max-width:34ch;line-height:1.65;color:rgba(61,45,32,.7)}

/* =========================================================
   INTERNAL PAGES — SHARED SYSTEM
   ========================================================= */
.inner-page{background:var(--paper);color:var(--brown)}
.inner-page .header{color:var(--white)}
.inner-page .header.condensed{color:var(--brown)}
.inner-page .skip{z-index:9999}
.inner-main{overflow:hidden}
.inner-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);color:var(--white);padding:10rem 0 4rem}
.inner-hero-media{position:absolute;inset:0;margin:0}
.inner-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.18) 68%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 52%)}
.inner-hero-media img{width:100%;height:115%;object-fit:cover;filter:saturate(.72)}
.inner-hero-content{position:relative;z-index:2;flex:0 0 auto;width:var(--shell);margin-inline:auto}
.inner-hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(4rem,8vw,8rem);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase}
.inner-hero h1{max-width:13ch;font-size:clamp(4.3rem,8.2vw,9.5rem);font-weight:400;line-height:.86;letter-spacing:-.072em}
.inner-hero h1 em{display:block;font-style:normal;color:var(--clay)}
.inner-hero-bottom{display:grid;grid-template-columns:1.3fr .7fr;gap:5vw;align-items:end;margin-top:3rem}
.inner-hero-bottom p{max-width:46ch;font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.55;color:rgba(255,255,255,.78)}
.inner-hero-bottom span{justify-self:end;text-transform:uppercase;font-size:.6rem;letter-spacing:.17em}
.inner-hero-mark{position:absolute;right:8vw;top:19%;z-index:1;width:min(29vw,28rem);aspect-ratio:1;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center}
.inner-hero-mark:before{content:"";position:absolute;inset:19%;border:1px dashed rgba(255,255,255,.25);border-radius:50%}
.inner-hero-mark img{width:44%;opacity:.22}
.inner-section{position:relative;padding:clamp(6rem,11vw,12rem) 0}
.inner-section.dark{background:var(--dark);color:var(--white)}
.inner-section.clay{background:var(--clay);color:var(--brown)}
.inner-kicker{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.inner-display{font-size:clamp(3.1rem,6.7vw,7.6rem);line-height:.92;font-weight:400;letter-spacing:-.065em}
.inner-display em{font-style:normal;color:var(--clay)}
.inner-section:not(.dark) .inner-display em{color:var(--dark)}
.inner-lead{font-size:clamp(1.2rem,2vw,2rem);line-height:1.45;max-width:44ch}
.inner-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(3rem,8vw,9rem);align-items:center}
.inner-copy{display:grid;gap:2rem}
.inner-copy p:not(.inner-kicker){max-width:54ch;line-height:1.75;color:inherit;opacity:.76}
.inner-media{position:relative;min-height:38rem;overflow:hidden;margin:0;background:var(--deep)}
.inner-media img{width:100%;height:120%;object-fit:cover}
.inner-media.rounded{border-radius:50% 50% 0 0}
.inner-media-mark{position:absolute;right:-7%;bottom:-5%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--clay);display:grid;place-items:center}
.inner-media-mark img{width:46%;height:auto;opacity:.22}
.statement-band{display:flex;gap:2rem;align-items:center;overflow:hidden;padding:2rem 0;border-block:1px solid currentColor}
.statement-band span{font-size:clamp(2rem,5vw,6rem);white-space:nowrap;letter-spacing:-.05em}
.statement-band i{width:.8rem;height:.8rem;flex:none;border-radius:50%;background:currentColor}
.capability-list{margin-top:5rem;border-top:1px solid rgba(61,45,32,.22)}
.dark .capability-list{border-color:rgba(255,255,255,.2)}
.capability-row{display:grid;grid-template-columns:5rem 1fr 1fr auto;gap:2rem;align-items:start;padding:2.3rem 0;border-bottom:1px solid rgba(61,45,32,.22)}
.dark .capability-row{border-color:rgba(255,255,255,.2)}
.capability-row>span{font-size:.63rem;letter-spacing:.16em}
.capability-row h3{font-size:clamp(1.6rem,3vw,3.4rem);font-weight:400;line-height:1;letter-spacing:-.045em}
.capability-row p{max-width:44ch;line-height:1.6;opacity:.68}
.capability-row b{font-weight:400;font-size:1.4rem}
.number-grid{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid currentColor;margin-top:5rem}
.number-grid article{padding:3rem 2rem 4rem 0;border-right:1px solid currentColor}
.number-grid article+article{padding-left:2rem}
.number-grid article:last-child{border:0}
.number-grid strong{display:block;font-size:clamp(3rem,6vw,7rem);font-weight:400;letter-spacing:-.06em}
.number-grid p{margin-top:1rem;line-height:1.5;opacity:.7}
.quote-panel{padding:clamp(3rem,7vw,7rem);background:var(--dark);color:var(--white)}
.quote-panel blockquote{font-size:clamp(2.2rem,4.8vw,5.8rem);line-height:1;letter-spacing:-.055em}
.quote-panel cite{display:block;margin-top:3rem;font-style:normal;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:3rem 0 4rem}
.filters button{border:1px solid currentColor;border-radius:999px;padding:.85rem 1.2rem;background:transparent;color:inherit;font:inherit;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.filters button.is-active,.filters button:hover{background:var(--dark);color:var(--white)}
.editorial-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem}
.editorial-card{grid-column:span 4;display:block;color:inherit;border-top:1px solid currentColor;padding-top:1rem}
.editorial-card.featured{grid-column:span 8}
.editorial-card figure{height:32rem;overflow:hidden;margin:0 0 1.6rem;background:var(--deep)}
.editorial-card.featured figure{height:42rem}
.editorial-card img{width:100%;height:115%;object-fit:cover}
.editorial-card small{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase}
.editorial-card h3{margin:1.3rem 0 .8rem;font-size:clamp(1.5rem,2.7vw,3.4rem);font-weight:400;line-height:1;letter-spacing:-.045em}
.editorial-card p{max-width:42ch;line-height:1.55;opacity:.7}
.project-index{counter-reset:project}
.project-index .editorial-card{position:relative}
.project-index .editorial-card:before{counter-increment:project;content:"0" counter(project);position:absolute;right:0;top:1rem;z-index:2;padding:.5rem;background:var(--paper);font-size:.6rem;letter-spacing:.15em}
.team-directory{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:5rem}
.person-card{position:relative;color:inherit}
.person-card figure{height:34rem;overflow:hidden;margin:0;background:var(--deep)}
.person-card img{width:100%;height:112%;object-fit:cover;filter:saturate(.72)}
.person-card div{padding:1.4rem 0;border-bottom:1px solid currentColor}
.person-card h3{font-size:1.55rem;font-weight:400}
.person-card p{margin-top:.35rem;font-size:.76rem;opacity:.68}
.article-hero{min-height:86svh}
.article-meta{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase}
.article-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:8vw;align-items:start}
.article-aside{position:sticky;top:8rem;display:grid;gap:1rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.article-body{max-width:48rem}
.article-body h2{margin:4rem 0 1.5rem;font-size:clamp(2.2rem,4vw,4.6rem);font-weight:400;line-height:1;letter-spacing:-.05em}
.article-body h2:first-child{margin-top:0}
.article-body p,.article-body li{font-size:1.05rem;line-height:1.8;color:rgba(61,45,32,.78)}
.article-body ul{display:grid;gap:1rem;margin:1.5rem 0 2rem;padding-left:1.2rem}
.article-image{height:min(68vw,48rem);overflow:hidden;margin:4rem 0}
.article-image img{width:100%;height:115%;object-fit:cover}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form label{display:grid;gap:.65rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.contact-form label.full{grid-column:1/-1}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:0;border-bottom:1px solid rgba(61,45,32,.35);background:transparent;padding:1rem 0;color:var(--brown);font:inherit;font-size:1rem;border-radius:0}
.contact-form textarea{min-height:10rem;resize:vertical}
.contact-form button{grid-column:1/-1;justify-self:start;margin-top:1rem;border:1px solid var(--dark);border-radius:999px;background:var(--dark);color:var(--white);padding:1rem 1.4rem;font:inherit;cursor:pointer}
.contact-details{display:grid;gap:3rem;border-left:1px solid rgba(61,45,32,.25);padding-left:4vw}
.contact-details h3{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400}
.contact-details p,.contact-details a{display:block;margin-top:.8rem;line-height:1.65;color:inherit}
.inner-footer{background:var(--deep);color:var(--white);padding:clamp(6rem,10vw,10rem) 0 2rem}
.inner-footer-top{display:flex;justify-content:space-between;align-items:end;gap:3rem;padding-bottom:clamp(5rem,9vw,9rem)}
.inner-footer h2{font-size:clamp(3rem,7vw,8rem);font-weight:400;line-height:.9;letter-spacing:-.065em}
.inner-footer-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:2rem;border-top:1px solid rgba(255,255,255,.28);padding-top:2rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.inner-footer-bottom img{width:8.5rem}
.inner-footer-bottom span{text-align:right}

@media (max-width:900px){
  .projects-home{min-height:auto;padding:7rem 0}.projects-home-intro{grid-template-columns:1fr;align-items:start}.projects-home-intro h2{font-size:clamp(3.2rem,14vw,5.8rem)}
  .project-row{grid-template-columns:3.2rem minmax(0,1fr) 2.6rem;gap:.4rem 1.2rem;padding:1.6rem .2rem;align-items:start}
  .project-row figure{clip-path:inset(0);opacity:.3}
  .project-row figure:after{opacity:1;background:linear-gradient(90deg,rgba(9,26,33,.9),rgba(9,26,33,.72))}
  .project-row-num{grid-row:1}
  .project-row-head{grid-column:2}
  .project-row p{grid-column:2;margin-top:.7rem;max-width:none}
  .project-row b{grid-column:3;grid-row:1;width:2.4rem;height:2.4rem}
  .project-row:hover figure,.project-row:focus-visible figure{clip-path:inset(0);opacity:.55}
  .project-row:hover h3,.project-row:focus-visible h3,.project-row:hover p,.project-row:focus-visible p{transform:none}
  .clients-home header{grid-template-columns:1fr}.clients-home h2,.clients-home header .eyebrow,.clients-home header>p:last-child{grid-column:1;grid-row:auto}.clients-home h2{font-size:clamp(3.3rem,15vw,6rem)}
  .client-principles{grid-template-columns:1fr}.client-principles h3{margin:1.6rem 0 .9rem}
  .inner-hero{min-height:88svh}.inner-hero h1{font-size:clamp(4rem,20vw,7rem)}.inner-hero-mark{width:58vw;right:-14vw;top:20%}.inner-hero-bottom{grid-template-columns:1fr}.inner-hero-bottom span{justify-self:start}
  .inner-split,.contact-grid,.article-layout{grid-template-columns:1fr}.inner-media{min-height:30rem}.capability-row{grid-template-columns:3rem 1fr auto}.capability-row p{grid-column:2/4}.number-grid{grid-template-columns:1fr}.number-grid article,.number-grid article+article{padding:2rem 0;border-right:0;border-bottom:1px solid currentColor}.editorial-card,.editorial-card.featured{grid-column:1/-1}.editorial-card figure,.editorial-card.featured figure{height:58vh}.team-directory{grid-template-columns:repeat(2,1fr)}.person-card figure{height:48vw}.article-aside{position:static;border-bottom:1px solid rgba(61,45,32,.2);padding-bottom:2rem}.contact-details{border-left:0;border-top:1px solid rgba(61,45,32,.25);padding:3rem 0 0}.inner-footer-top{display:grid}.inner-footer-bottom{grid-template-columns:1fr}.inner-footer-bottom span{text-align:left}
}
@media (max-width:560px){.team-directory{grid-template-columns:1fr}.person-card figure{height:125vw}.contact-form{grid-template-columns:1fr}.contact-form label.full{grid-column:1}.inner-footer .contact-cta{font-size:.72rem}}

/* ============================================================
   ABOUT PAGE — bespoke layout & motion
   ============================================================ */
.about-page{background:var(--paper)}
.about-main{position:relative;background:var(--paper)}

/* --- Hero card ---------------------------------------------- */
.about-hero{padding:14px 14px 0;background:var(--deep)}
.about-hero-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:min(calc(100svh - 28px),900px);min-height:34rem;padding:clamp(6.5rem,9vw,8rem) clamp(1.6rem,3.6vw,4rem) clamp(2rem,3.4vw,3.4rem);border-radius:clamp(20px,2.2vw,34px);overflow:hidden;background:var(--deep);color:var(--white);isolation:isolate}
.about-hero-media{position:absolute;inset:0;z-index:0;margin:0}
.about-hero-media img{width:100%;height:112%;object-fit:cover;filter:saturate(.62) contrast(1.05)}
.about-hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(96deg,rgba(4,10,13,.82),rgba(4,10,13,.22) 58%,rgba(4,10,13,.55)),linear-gradient(0deg,rgba(4,10,13,.84),transparent 54%)}
.about-hero-ring{position:absolute;z-index:1;top:11%;right:-2vw;display:grid;width:min(33vw,29rem);aspect-ratio:1;place-items:center}
.about-hero-ring i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.26);border-radius:50%}
.about-hero-ring i:last-child{inset:16%;border-style:dashed;border-color:rgba(255,255,255,.2)}
.about-hero-ring img{width:25%;opacity:.34;filter:brightness(0) invert(1)}
.about-hero-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:2rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.about-hero-main{position:relative;z-index:2}
.about-hero h1{margin:0;max-width:12ch;font-size:clamp(3rem,6.6vw,7rem);font-weight:400;line-height:.87;letter-spacing:-.062em}
.about-hero h1 .accent b{color:var(--white)}
.about-hero-bottom{display:grid;grid-template-columns:minmax(0,1.15fr) auto;align-items:end;gap:1.4rem 4vw;margin-top:clamp(1.8rem,3.4vw,3rem);padding-top:clamp(1.5rem,2.8vw,2.4rem);border-top:1px solid rgba(255,255,255,.16)}
.about-hero-bottom p{margin:0;max-width:44ch;font-size:clamp(.95rem,1.15vw,1.18rem);line-height:1.6;color:rgba(255,255,255,.8)}
.about-hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-self:end}
.about-hero-tags span{padding:.55rem .95rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.about-hero-loc{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.about-hero-cue{display:inline-flex;align-items:center;gap:.7rem;justify-self:end;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.about-hero-cue i{display:block;width:3.4rem;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.65),transparent);transition:.5s var(--ease)}
.about-hero-cue:hover i{width:5rem}

/* --- Proposition -------------------------------------------- */
.about-prop{position:relative;padding:clamp(6rem,10vw,11rem) 0 clamp(5rem,8vw,9rem);overflow:hidden;background:var(--paper);color:var(--brown)}
.about-prop-head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding-bottom:clamp(1.8rem,3vw,2.8rem);border-bottom:1px solid rgba(61,45,32,.16)}
.about-prop-head .inner-kicker{margin:0}
.about-prop-meta{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.about-prop-title{margin:clamp(2.2rem,4.2vw,3.8rem) 0 clamp(3rem,5.5vw,5.2rem);font-size:clamp(2.6rem,7vw,8rem);font-weight:400;line-height:.9;letter-spacing:-.062em}
.about-prop-title em{font-style:normal;color:var(--dark)}
.about-prop-body{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(2.5rem,5.5vw,6.5rem);align-items:start}
.about-prop-media{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:clamp(16px,1.6vw,26px);background:var(--deep)}
.about-prop-media img{width:100%;height:118%;object-fit:cover}
.about-prop-media figcaption{position:absolute;bottom:1.3rem;left:1.3rem;display:flex;align-items:center;gap:.65rem;padding:.7rem 1.1rem;border-radius:999px;background:rgba(7,20,25,.5);color:#fff;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.about-prop-media figcaption i{width:.42rem;height:.42rem;border-radius:50%;background:#fff}
.about-prop-copy{display:grid;gap:1.5rem;padding-top:.3rem}
.about-prop-lead{margin:0;max-width:30ch;font-size:clamp(1.25rem,2.05vw,2.05rem);line-height:1.38;letter-spacing:-.025em;color:var(--dark)}
.about-prop-copy>p:not(.about-prop-lead){margin:0;max-width:52ch;line-height:1.8;opacity:.72}
.about-pillars{display:grid;margin:1.4rem 0 0;padding:0;border-top:1px solid rgba(61,45,32,.16);list-style:none}
.about-pillars li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.2rem 1.2rem;padding:1.5rem .4rem;border-bottom:1px solid rgba(61,45,32,.16);transition:background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease),border-radius .45s var(--ease)}
.about-pillars li:hover{padding-right:1.2rem;padding-left:1.2rem;border-radius:14px;background:var(--dark);color:#fff}
.about-pillars li>span{padding-top:.4rem;font-size:.6rem;letter-spacing:.16em;opacity:.55}
.about-pillars h3{margin:0;font-size:clamp(1.3rem,2.2vw,2.1rem);font-weight:400;line-height:1.05;letter-spacing:-.04em}
.about-pillars p{grid-column:2;margin:.45rem 0 0;font-size:.95rem;line-height:1.6;opacity:.68}

/* --- Why we exist (shared inner blocks, about accents) ------- */
.about-page .statement-band{border-block-color:rgba(255,255,255,.2)}
.about-page .capability-row{transition:background .5s var(--ease),padding .5s var(--ease),border-radius .5s var(--ease)}
.about-page .capability-row b{display:inline-block;transition:transform .5s var(--ease)}
.about-page .capability-row:hover{padding-right:1.2rem;padding-left:1.2rem;border-radius:14px;background:rgba(255,255,255,.06)}
.about-page .capability-row:hover b{transform:translate(6px,-6px)}

/* --- How we work -------------------------------------------- */
/* The dark band above runs straight into this one, so keep the seam tight. */
.about-page .inner-section.dark{padding-bottom:clamp(3rem,4.5vw,4.5rem)}
.about-method{position:relative;padding:clamp(3rem,4.5vw,4.5rem) 0 clamp(6rem,9vw,10rem);overflow:hidden;background:var(--dark);color:var(--white)}
.about-method-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.about-method-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(1.6rem,3vw,2.6rem);color:rgba(255,255,255,.6)}
.about-method-title{margin:0;font-size:clamp(2.6rem,6.4vw,7.2rem);font-weight:400;line-height:.9;letter-spacing:-.062em}
.about-method-title em{font-style:normal;color:rgba(255,255,255,.48)}
.about-method-head>p:not(.inner-kicker){margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7)}
.about-method-strip{position:relative;height:clamp(15rem,32vw,28rem);margin:clamp(3rem,5.5vw,5.5rem) 0;overflow:hidden}
.about-method-strip img{width:100%;height:126%;object-fit:cover;object-position:72% center;filter:saturate(.7)}
.about-method-strip:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.92),rgba(9,26,33,.5) 26%,rgba(9,26,33,.04) 62%);content:""}
.about-method-strip figcaption{position:absolute;right:0;bottom:clamp(1.2rem,2.4vw,2.2rem);left:0;z-index:2;display:flex;justify-content:space-between;gap:2rem;width:var(--shell);margin-inline:auto;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.about-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin:0;padding:0;list-style:none}
.about-rail-line{position:absolute;top:.72rem;right:0;left:0;height:1px;background:rgba(255,255,255,.18)}
.about-rail-line i{display:block;width:100%;height:100%;background:#fff;transform-origin:left center}
.about-rail li{position:relative;padding-top:2.9rem;transition:opacity .6s var(--ease)}
.about-rail li:before{position:absolute;top:.31rem;left:0;width:.82rem;height:.82rem;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:var(--dark);content:"";transition:.5s var(--ease)}
.about-rail li.is-active:before{border-color:#fff;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.about-rail em{display:block;font-size:.6rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.about-rail h3{margin:.85rem 0 .75rem;font-size:clamp(1.45rem,2.6vw,2.5rem);font-weight:400;line-height:1;letter-spacing:-.045em}
.about-rail p{max-width:34ch;margin:0;line-height:1.7;color:rgba(255,255,255,.7)}

/* --- Quote -------------------------------------------------- */
.about-page .quote-panel,.services-page .quote-panel,.projects-page .quote-panel{position:relative;overflow:hidden;border-radius:clamp(16px,1.8vw,28px)}
.quote-mark{position:absolute;top:-14%;right:-6%;display:grid;width:min(30vw,22rem);aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.quote-mark img{width:34%;opacity:.14}
.about-page .quote-panel blockquote,.services-page .quote-panel blockquote,.projects-page .quote-panel blockquote{position:relative;z-index:2;max-width:22ch;margin:0}
.about-page .quote-panel cite,.services-page .quote-panel cite,.projects-page .quote-panel cite{position:relative;z-index:2}

/* --- Closing CTA band --------------------------------------- */
.about-cta{position:relative;padding:clamp(3rem,5vw,5rem) 0 clamp(5rem,8vw,8rem);background:var(--paper);color:var(--brown)}
.about-cta-inner{position:relative;display:grid;width:var(--shell);min-height:clamp(19rem,30vw,26rem);margin-inline:auto;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;overflow:hidden;border-radius:clamp(16px,1.8vw,28px);background:#f5f2ed}
.about-cta-copy{padding:clamp(2.4rem,3.8vw,4rem) clamp(1.4rem,2.4vw,2.6rem) clamp(2.4rem,3.8vw,4rem) clamp(1.8rem,3.4vw,3.6rem)}
.about-cta-copy .inner-kicker{margin:0;opacity:.6}
.about-cta-copy h2{margin:1.1rem 0;font-size:clamp(2rem,4.1vw,4.3rem);font-weight:400;line-height:.94;letter-spacing:-.058em}
.about-cta-copy h2 em{font-style:normal;color:var(--dark)}
.about-cta-copy>p:not(.inner-kicker){max-width:44ch;margin:0 0 2.1rem;line-height:1.72;opacity:.72}
.about-cta-btn{display:inline-flex;align-items:center;gap:.9rem;padding:1.05rem 1.7rem;border:1px solid rgba(61,45,32,.42);border-radius:999px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.about-cta-btn i{font-style:normal;transition:transform .4s var(--ease)}
.about-cta-btn:hover{border-color:var(--dark);background:var(--dark);color:#fff}
.about-cta-btn:hover i{transform:translate(4px,-4px)}
.about-cta-media{position:absolute;top:0;right:0;bottom:0;width:46%;margin:0;overflow:hidden;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.about-cta-media img{width:100%;height:118%;object-fit:cover}

/* --- Pre-animation states (applied only when GSAP is driving) */
.about-motion .about-rail li{opacity:.4}
.about-motion .about-rail li.is-active{opacity:1}
.about-motion .about-rail-line i{transform:scaleX(0)}

@media (max-width:900px){
  .about-hero{padding:10px 10px 0}
  .about-hero-card{height:auto;min-height:min(90svh,44rem);padding:7.5rem 1.3rem 2.2rem}
  .about-hero h1{max-width:14ch;font-size:clamp(2.7rem,13.5vw,4.8rem)}
  .about-hero-top{flex-direction:column;gap:.5rem;font-size:.56rem}
  .about-hero-bottom{grid-template-columns:1fr}
  .about-hero-tags,.about-hero-cue{justify-self:start}
  .about-hero-ring{top:auto;right:-26vw;bottom:24%;width:74vw}
  .about-prop-body{grid-template-columns:1fr}
  .about-prop-media{aspect-ratio:5/4}
  .about-prop-lead{max-width:none}
  .about-method-head{grid-template-columns:1fr}
  .about-rail{grid-template-columns:1fr;gap:0}
  .about-rail-line{top:0;right:auto;bottom:0;left:.4rem;width:1px;height:auto}
  .about-rail-line i{transform-origin:top center}
  .about-motion .about-rail-line i{transform:scaleY(0)}
  .about-rail li{padding:0 0 2.4rem 2.4rem}
  .about-rail li:before{top:.3rem}
  .about-rail li:last-child{padding-bottom:0}
  .quote-mark{top:-8%;right:-18%;width:60vw}
  .about-cta-inner{grid-template-columns:1fr}
  .about-cta-media{position:relative;inset:auto;order:-1;width:auto;height:15rem;clip-path:none}
  .about-cta-copy{padding:2.2rem 1.4rem 2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .about-rail li{opacity:1}
  .about-rail-line i{transform:none}
}

/* ============================================================
   SERVICES PAGE — bespoke layout & motion
   ============================================================ */

/* --- Opening measures --------------------------------------- */
.services-stats,.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(4rem,7vw,7rem) 0 0;padding:0;border-top:1px solid rgba(61,45,32,.22)}
.services-stats>div,.case-metrics>div{padding:clamp(1.8rem,2.8vw,2.6rem) clamp(1.4rem,2vw,2rem) clamp(2rem,3vw,3rem) 0;border-right:1px solid rgba(61,45,32,.16)}
.services-stats>div+div,.case-metrics>div+div{padding-left:clamp(1.4rem,2vw,2rem)}
.services-stats>div:last-child,.case-metrics>div:last-child{border-right:0}
.services-stats dt,.case-metrics dt{font-size:clamp(2.4rem,4.6vw,4.4rem);font-weight:300;line-height:1;letter-spacing:-.06em;color:rgba(61,45,32,.28)}
.services-stats dd,.case-metrics dd{margin:1.1rem 0 0;max-width:24ch;line-height:1.6;font-size:.92rem;opacity:.74}

/* --- Shared section head ------------------------------------ */
.services-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(3.5rem,6vw,6rem)}
.services-section-head .inner-kicker{grid-column:1/-1;margin:0}
.services-section-head .inner-lead{margin:0}

/* --- The three practices ------------------------------------ */
.services-practices{position:relative;overflow:hidden;padding:clamp(6rem,11vw,12rem) 0;background:var(--dark);color:var(--white)}
.services-practices:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 14%,rgba(255,255,255,.07),transparent 38%)}
.services-practices>.shell{position:relative;z-index:1}
.services-practices-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(4rem,7vw,7rem)}
.services-practices-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(1.6rem,3vw,2.6rem);color:rgba(255,255,255,.6)}
.services-practices-title{margin:0;font-size:clamp(2.6rem,6.4vw,7.2rem);font-weight:400;line-height:.9;letter-spacing:-.062em}
.services-practices-title em{font-style:normal;color:rgba(255,255,255,.48)}
.services-practices-head>p{margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7)}

.practice-stack{display:grid;gap:1.4rem}
.practice-block{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;background:rgba(255,255,255,.03);color:var(--white);transition:border-color .55s var(--ease),background .55s var(--ease),box-shadow .55s var(--ease)}
.practice-block figure{position:relative;margin:0;overflow:hidden;min-height:clamp(15rem,24vw,21rem)}
.practice-block figure:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,26,33,.25),rgba(9,26,33,.85));transition:opacity .6s ease}
.practice-block figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1s var(--ease),filter .6s ease}
.practice-block-body{position:relative;display:grid;align-content:center;gap:1rem;padding:clamp(2rem,3.4vw,3.4rem)}
.practice-block-index{position:absolute;top:clamp(1.2rem,2vw,2rem);right:clamp(1.4rem,2.4vw,2.6rem);font-size:clamp(2.6rem,4.4vw,4.2rem);font-weight:300;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.14);transition:color .55s ease}
.practice-block-tag{font-style:normal;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.58);transition:color .5s ease}
.practice-block h3{margin:0;max-width:22ch;font-size:clamp(1.5rem,2.6vw,2.6rem);font-weight:400;line-height:1.06;letter-spacing:-.045em}
.practice-block-body>p{margin:0;max-width:46ch;line-height:1.7;color:rgba(255,255,255,.7)}
.practice-block ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 0;padding:0;list-style:none}
.practice-block li{padding:.5rem .85rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:border-color .5s ease,color .5s ease}
.practice-block b{display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;font-weight:400;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.practice-block b i{font-style:normal;transition:transform .5s var(--ease)}
.practice-block:hover,.practice-block:focus-visible{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);box-shadow:0 2.2rem 4rem -2.2rem rgba(0,0,0,.7)}
.practice-block:hover figure img,.practice-block:focus-visible figure img{transform:scale(1.05);filter:saturate(1)}
.practice-block:hover figure:after,.practice-block:focus-visible figure:after{opacity:.82}
.practice-block:hover .practice-block-index,.practice-block:focus-visible .practice-block-index{color:rgba(255,255,255,.3)}
.practice-block:hover .practice-block-tag,.practice-block:focus-visible .practice-block-tag{color:#fff}
.practice-block:hover li,.practice-block:focus-visible li{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.9)}
.practice-block:hover b i,.practice-block:focus-visible b i{transform:translate(5px,-5px)}

/* --- Engagement models -------------------------------------- */
.services-models{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.services-models article{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:.9rem;padding:clamp(1.8rem,2.6vw,2.4rem);border:1px solid rgba(61,45,32,.18);border-radius:.5rem;background:rgba(255,255,255,.4);transition:translate .55s var(--ease),border-color .55s ease,background .55s ease,box-shadow .55s ease}
.services-models article:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--brown);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.services-models article:hover,.services-models article:focus-within{translate:0 -.5rem;border-color:rgba(61,45,32,.32);background:rgba(255,255,255,.72);box-shadow:0 1.8rem 3.5rem -1.6rem rgba(61,45,32,.26)}
.services-models article:hover:after,.services-models article:focus-within:after{transform:scaleX(1)}
.services-models span{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid rgba(61,45,32,.28);border-radius:50%;font-size:.72rem;letter-spacing:.06em;transition:background .5s ease,color .5s ease,border-color .5s ease}
.services-models article:hover span,.services-models article:focus-within span{border-color:var(--brown);background:var(--brown);color:var(--paper)}
.services-models h3{margin:.4rem 0 0;font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:400;line-height:1.15;letter-spacing:-.035em}
.services-models p{margin:0;line-height:1.65;font-size:.93rem;opacity:.74}
.services-models em{margin-top:.4rem;font-style:normal;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55}

/* --- Sectors ------------------------------------------------ */
.services-page .statement-band{margin:clamp(3rem,5vw,5rem) 0;border-block-color:rgba(255,255,255,.2)}
.services-sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.2)}
.services-sectors li{padding:clamp(1.8rem,2.8vw,2.6rem) clamp(1.2rem,2vw,2rem) clamp(2rem,3vw,3rem) 0;border-right:1px solid rgba(255,255,255,.14)}
.services-sectors li+li{padding-left:clamp(1.2rem,2vw,2rem)}
.services-sectors li:last-child{border-right:0}
.services-sectors h3{margin:0;max-width:20ch;font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:400;line-height:1.2;letter-spacing:-.03em}
.services-sectors p{margin:.9rem 0 0;max-width:26ch;line-height:1.65;font-size:.9rem;color:rgba(255,255,255,.66)}

/* --- Delivery method rail ----------------------------------- */
.services-method{position:relative;overflow:hidden;padding:clamp(6rem,10vw,11rem) 0;background:var(--dark);color:var(--white)}
.services-method .inner-kicker{margin:0 0 clamp(1.6rem,3vw,2.6rem);color:rgba(255,255,255,.6)}
.services-method-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.services-method-title{margin:0;font-size:clamp(2.6rem,6.4vw,7.2rem);font-weight:400;line-height:.9;letter-spacing:-.062em}
.services-method-title em{font-style:normal;color:rgba(255,255,255,.48)}
.services-method-head>p{margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7)}
.services-method-strip{position:relative;height:clamp(14rem,28vw,24rem);margin:clamp(3rem,5.5vw,5.5rem) 0;overflow:hidden;border-radius:.5rem}
.services-method-strip img{width:100%;height:126%;object-fit:cover;filter:saturate(.7)}
.services-method-strip:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.8),rgba(9,26,33,.06));content:""}
.services-method-strip figcaption{position:absolute;right:clamp(1.4rem,2.6vw,2.6rem);bottom:clamp(1.2rem,2.4vw,2.2rem);left:clamp(1.4rem,2.6vw,2.6rem);z-index:2;display:flex;justify-content:space-between;gap:2rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.services-rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,2.4vw,2.4rem);margin:0;padding:0;list-style:none}
.services-rail-line{position:absolute;top:.72rem;right:0;left:0;height:1px;background:rgba(255,255,255,.18)}
.services-rail-line i{display:block;width:100%;height:100%;background:#fff;transform-origin:left center}
.services-rail li{position:relative;padding-top:2.9rem;transition:opacity .6s var(--ease)}
.services-rail li:before{position:absolute;top:.31rem;left:0;width:.82rem;height:.82rem;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:var(--dark);content:"";transition:.5s var(--ease)}
.services-rail li.is-active:before{border-color:#fff;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.services-rail em{display:block;font-size:.6rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.services-rail h3{margin:.85rem 0 .75rem;font-size:clamp(1.15rem,1.8vw,1.7rem);font-weight:400;line-height:1.1;letter-spacing:-.04em}
.services-rail p{max-width:30ch;margin:0;line-height:1.7;font-size:.9rem;color:rgba(255,255,255,.7)}

/* --- What remains (capability rows) ------------------------- */
.services-page .capability-row,.projects-page .capability-row{transition:background .5s var(--ease),padding .5s var(--ease),border-radius .5s var(--ease)}
.services-page .capability-row b,.projects-page .capability-row b{display:inline-block;transition:transform .5s var(--ease)}
.services-page .capability-row:hover,.projects-page .capability-row:hover{padding-right:1.2rem;padding-left:1.2rem;border-radius:14px;background:rgba(61,45,32,.05)}
.services-page .capability-row:hover b,.projects-page .capability-row:hover b{transform:translate(6px,-6px)}

/* --- Questions ---------------------------------------------- */
.services-faq{margin-top:clamp(3.5rem,6vw,6rem);border-top:1px solid rgba(61,45,32,.22)}
.services-faq details{border-bottom:1px solid rgba(61,45,32,.22)}
.services-faq summary{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.4rem,2.4vw,2.1rem) 0;cursor:pointer;list-style:none;transition:padding .45s var(--ease)}
.services-faq summary::-webkit-details-marker{display:none}
.services-faq summary span{font-size:clamp(1.1rem,1.9vw,1.75rem);font-weight:400;line-height:1.2;letter-spacing:-.035em}
.services-faq summary i{position:relative;flex:none;width:1.5rem;height:1.5rem}
.services-faq summary i:before,.services-faq summary i:after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.services-faq summary i:after{transform:rotate(90deg)}
.services-faq details[open] summary i:after{transform:rotate(0)}
.services-faq summary:hover{padding-left:.6rem}
.services-faq details p{margin:0;padding:0 clamp(2rem,6vw,7rem) clamp(1.6rem,2.6vw,2.4rem) 0;max-width:70ch;line-height:1.8;opacity:.76}

/* --- Responsive --------------------------------------------- */
@media (max-width:1100px){
  .services-stats,.services-models,.services-sectors{grid-template-columns:repeat(2,1fr)}
  .services-stats>div:nth-child(2),.services-sectors li:nth-child(2){border-right:0}
  .services-rail{grid-template-columns:repeat(3,1fr);row-gap:2.6rem}
  .services-rail-line{display:none}
}
@media (max-width:900px){
  .services-practices-head,.services-method-head,.services-section-head{grid-template-columns:1fr}
  .practice-block{grid-template-columns:1fr}
  .practice-block figure{min-height:clamp(12rem,42vw,17rem)}
  .practice-block figure:after{background:linear-gradient(0deg,rgba(9,26,33,.72),rgba(9,26,33,.18))}
  .practice-block-index{top:auto;bottom:clamp(1rem,3vw,1.6rem)}
  .services-stats>div,.services-stats>div+div{padding:1.6rem 0;border-right:0;border-bottom:1px solid rgba(61,45,32,.16)}
  .services-sectors li,.services-sectors li+li{padding:1.6rem 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .services-stats>div:last-child,.services-sectors li:last-child{border-bottom:0}
  .services-rail{grid-template-columns:1fr;row-gap:0}
  .services-rail li{padding:0 0 2.2rem 2.2rem}
  .services-rail li:before{top:.35rem;left:0}
  .services-rail li:last-child{padding-bottom:0}
}
@media (max-width:640px){
  .services-stats,.services-models,.services-sectors{grid-template-columns:1fr}
  .services-models article{padding:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .services-rail li{opacity:1}
  .services-rail-line i{transform:none}
}

/* --- Pre-animation states (applied only when GSAP is driving) */
.services-motion .services-rail li{opacity:.4}
.services-motion .services-rail li.is-active{opacity:1}
.services-motion .services-rail-line i{transform:scaleX(0)}

/* ============================================================
   SERVICES PAGE — refinements: simpler hero, tighter rhythm
   ============================================================ */

/* --- Simpler, shorter hero ---------------------------------- */
.services-page .inner-hero{min-height:auto;padding:clamp(7.5rem,10.5vw,9.5rem) 0 clamp(2.8rem,4.5vw,4rem)}
.services-page .inner-hero-media img{height:118%}
.services-page .inner-hero-top{margin-bottom:clamp(2rem,4vw,3.4rem)}
.services-page .inner-hero h1{max-width:20ch;font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.05em}
.services-page .inner-hero h1 em{display:inline;color:rgba(255,255,255,.58)}
.services-page .inner-hero-bottom{grid-template-columns:minmax(0,1.2fr) auto;gap:1.4rem 4vw;margin-top:clamp(1.8rem,3vw,2.6rem);padding-top:clamp(1.5rem,2.6vw,2.2rem);border-top:1px solid rgba(255,255,255,.16)}
.services-page .inner-hero-bottom p{max-width:52ch;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.6}
.services-page .inner-hero-mark{width:min(20vw,17rem);top:auto;bottom:clamp(3rem,6vw,5rem);right:5vw}

/* --- Tighter vertical rhythm -------------------------------- */
.services-page .inner-section{padding:clamp(3.5rem,5.5vw,5.6rem) 0}
.services-practices,.services-method,.services-connect{padding:clamp(4rem,6vw,6.2rem) 0}
.services-practices-head,.services-connect-head{margin-bottom:clamp(2.8rem,4.5vw,4.5rem)}
.services-stats,.case-metrics{margin-top:clamp(3rem,5vw,5rem)}
.services-page .capability-list,.projects-page .capability-list{margin-top:clamp(2.8rem,4.5vw,4rem)}
.services-faq{margin-top:clamp(2.8rem,4.5vw,4.5rem)}
.services-section-head{margin-bottom:clamp(2.8rem,4.5vw,4.5rem)}
.services-method-strip{margin:clamp(2.4rem,4vw,4rem) 0}
.services-page .statement-band{margin:clamp(2.4rem,4vw,4rem) 0}

/* --- Where the practices meet ------------------------------- */
.services-connect{position:relative;background:var(--paper);color:var(--brown)}
.services-connect-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.services-connect-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(1.4rem,2.6vw,2.2rem)}
.services-connect-title{margin:0;font-size:clamp(2.3rem,5.2vw,5.4rem);font-weight:400;line-height:.94;letter-spacing:-.06em}
.services-connect-title em{font-style:normal;color:rgba(61,45,32,.42)}
.services-connect-head>p:not(.inner-kicker){margin:0;max-width:46ch;line-height:1.8;opacity:.74}

.services-pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid rgba(61,45,32,.22)}
.services-pairs li{position:relative;padding:clamp(1.8rem,2.8vw,2.6rem) clamp(1.4rem,2.2vw,2.2rem) clamp(2rem,3vw,3rem) 0;border-right:1px solid rgba(61,45,32,.14);transition:background .5s var(--ease)}
.services-pairs li+li{padding-left:clamp(1.4rem,2.2vw,2.2rem)}
.services-pairs li:last-child{border-right:0}
.services-pairs li:after{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--brown);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.services-pairs li:hover:after{transform:scaleX(1)}
.services-pairs li:hover{background:rgba(61,45,32,.035)}
.services-pair-tags{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.services-pair-tags span{padding:.45rem .8rem;border:1px solid rgba(61,45,32,.28);border-radius:999px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .5s ease,background .5s ease,color .5s ease}
.services-pairs li:hover .services-pair-tags span{border-color:var(--brown);background:var(--brown);color:var(--paper)}
.services-pair-tags i{font-style:normal;font-size:.9rem;opacity:.45}
.services-pairs h3{margin:clamp(1.4rem,2.4vw,2rem) 0 .8rem;max-width:18ch;font-size:clamp(1.35rem,2.3vw,2.2rem);font-weight:400;line-height:1.08;letter-spacing:-.04em}
.services-pairs p{margin:0;max-width:34ch;line-height:1.7;font-size:.93rem;opacity:.74}

/* --- Responsive -------------------------------------------- */
@media (max-width:1100px){
  .services-pairs{grid-template-columns:repeat(2,1fr)}
  .services-pairs li:nth-child(2){border-right:0}
}
@media (max-width:900px){
  .services-connect-head{grid-template-columns:1fr}
  .services-page .inner-hero{padding:8.5rem 0 3rem}
  .services-page .inner-hero h1{max-width:16ch;font-size:clamp(2.1rem,8.6vw,3.1rem)}
  .services-page .inner-hero-top{flex-direction:column;gap:.5rem;align-items:flex-start;font-size:.56rem}
  .services-page .inner-hero-bottom{grid-template-columns:1fr}
  .services-page .inner-hero-bottom span{justify-self:start}
  .services-page .inner-hero-mark{width:44vw;right:-10vw;bottom:auto;top:24%}
  .services-pairs{grid-template-columns:1fr}
  .services-pairs li,.services-pairs li+li{padding:1.7rem 0;border-right:0;border-bottom:1px solid rgba(61,45,32,.14)}
  .services-pairs li:last-child{border-bottom:0}
}

/* ============================================================
   SERVICES PAGE — round 2 refinements
   ============================================================ */

/* --- Hero: keep the headline visible, no entrance dependency -- */
.services-page .inner-hero h1{opacity:1}

/* --- Tighter rhythm everywhere ------------------------------- */
.services-page .inner-section{padding:clamp(3rem,4.4vw,4.6rem) 0}
.services-practices,.services-method,.services-connect{padding:clamp(3.4rem,5vw,5.2rem) 0}
.services-practices-head,.services-connect-head,.services-section-head,.services-method-head{margin-bottom:clamp(2rem,3vw,3rem)}
.services-stats{margin-top:clamp(2rem,3vw,3rem)}
.services-page .capability-list{margin-top:clamp(2rem,3vw,3rem)}
.services-faq{margin-top:clamp(2rem,3vw,3rem)}
.services-method-strip{margin:clamp(1.8rem,2.8vw,2.8rem) 0}
.services-page .statement-band{margin:clamp(1.8rem,2.8vw,2.8rem) 0}

/* Kill the oversized row gap that was pushing headings away from kickers */
.services-section-head,.services-connect-head,.services-practices-head,.services-method-head{
  gap:clamp(.8rem,1.2vw,1.3rem) clamp(2rem,5vw,6rem)
}
.services-section-head .inner-kicker,
.services-connect-head .inner-kicker,
.services-practices-head .inner-kicker,
.services-method .inner-kicker{margin:0 0 clamp(1rem,1.6vw,1.6rem)}

/* Calmer display size on this page */
.services-page .inner-display,.projects-page .inner-display{font-size:clamp(2.1rem,4.2vw,4.2rem);line-height:.98}
.services-connect-title,.services-practices-title,.services-method-title{font-size:clamp(2.1rem,4.4vw,4.4rem);line-height:.98}

/* --- Section dividers: sections stop bleeding into each other - */
.services-page .inner-section + .inner-section > .shell::before,
.services-page .services-connect > .shell::before,
.services-page .services-method > .shell::before,
.services-page .services-practices > .shell::before,
.services-page .inner-section > .shell::before,
.projects-page .inner-section > .shell::before{
  content:"";display:block;width:100%;height:1px;margin-bottom:clamp(1.8rem,2.8vw,2.8rem);
  background:currentColor;opacity:.16
}
.services-page .inner-hero + .inner-section > .shell::before,
.projects-page .inner-hero + .inner-section > .shell::before{display:none}

/* --- Opening measures: compact credentials bar --------------- */
.services-stats,.case-metrics{grid-template-columns:repeat(4,1fr);border-top:0;border:1px solid rgba(61,45,32,.18);border-radius:.5rem;overflow:hidden;background:rgba(255,255,255,.42)}
.services-stats>div{display:grid;align-content:start;gap:.55rem;padding:clamp(1.2rem,1.9vw,1.7rem);border-right:1px solid rgba(61,45,32,.14);transition:background .5s var(--ease)}
.services-stats>div+div{padding-left:clamp(1.2rem,1.9vw,1.7rem)}
.services-stats>div:last-child{border-right:0}
.services-stats>div:hover,.case-metrics>div:hover{background:rgba(61,45,32,.045)}
.services-stats dt{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:400;line-height:1;letter-spacing:-.045em;color:var(--brown)}
.services-stats dd{margin:0;max-width:22ch;line-height:1.55;font-size:.85rem;opacity:.7}

/* --- Sectors: real cards instead of floating columns --------- */
.services-sectors{grid-template-columns:repeat(4,1fr);gap:.9rem;border-top:0}
.services-sectors li{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:.7rem;
  padding:clamp(1.4rem,2.1vw,1.9rem);border:1px solid rgba(255,255,255,.14);border-radius:.5rem;
  background:rgba(255,255,255,.035);transition:translate .55s var(--ease),border-color .55s ease,background .55s ease}
.services-sectors li+li{padding-left:clamp(1.4rem,2.1vw,1.9rem)}
.services-sectors li:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.services-sectors li:hover{translate:0 -.4rem;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.services-sectors li:hover:after{transform:scaleX(1)}
.services-sectors h3{max-width:18ch;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.22}
.services-sectors p{margin:0;max-width:28ch;font-size:.87rem;line-height:1.6}

/* --- FAQ: smooth panel ------------------------------------- */
.services-faq details p{overflow:hidden}
.services-faq summary{-webkit-tap-highlight-color:transparent}

/* --- Responsive -------------------------------------------- */
@media (max-width:1100px){
  .services-stats,.services-sectors{grid-template-columns:repeat(2,1fr)}
  .services-stats>div:nth-child(2){border-right:0}
}
@media (max-width:900px){
  .services-stats>div,.services-stats>div+div{padding:1.2rem;border-right:0;border-bottom:1px solid rgba(61,45,32,.14)}
  .services-stats>div:last-child{border-bottom:0}
  .services-sectors li,.services-sectors li+li{padding:1.4rem;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
}
@media (max-width:640px){
  .services-stats,.services-sectors{grid-template-columns:1fr}
}

/* Section heads: kill inherited heading margins that were opening huge gaps */
.services-section-head h2,
.services-connect-head h2,
.services-practices-head h2,
.services-method-head h2,
.projects-page .inner-split h2,
.projects-page .inner-copy h2,
.services-page .inner-split h2,
.services-page .inner-copy h2{margin:0}
.services-section-head,
.services-connect-head,
.services-practices-head,
.services-method-head{align-items:start}
.services-section-head .inner-lead,
.services-connect-head>p:not(.inner-kicker),
.services-practices-head>p:not(.inner-kicker),
.services-method-head>p:not(.inner-kicker){align-self:end}

/* Final vertical rhythm pass */
.services-page .inner-section,.projects-page .inner-section{padding:clamp(2.4rem,3.4vw,3.6rem) 0}
.services-practices,.services-method,.services-connect{padding:clamp(2.8rem,3.9vw,4.1rem) 0}
.services-section-head .inner-kicker,
.services-connect-head .inner-kicker,
.services-practices-head .inner-kicker,
.services-method .inner-kicker{margin:0 0 clamp(.6rem,1vw,1rem)}

/* ============================================================
   INNER HERO — compact treatment across every inner page
   (home has no .inner-hero; About ships its own card hero)
   ============================================================ */
.inner-page .inner-hero{min-height:auto;padding:clamp(7.5rem,10.5vw,9.5rem) 0 clamp(2.8rem,4.5vw,4rem)}
.inner-page .inner-hero-media img{height:118%}
.inner-page .inner-hero-top{margin-bottom:clamp(2rem,4vw,3.4rem)}
.inner-page .inner-hero h1{max-width:20ch;font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.05em}
.inner-page .inner-hero h1 em{display:inline;color:rgba(255,255,255,.58)}
.inner-page .inner-hero-bottom{grid-template-columns:minmax(0,1.2fr) auto;gap:1.4rem 4vw;margin-top:clamp(1.8rem,3vw,2.6rem);padding-top:clamp(1.5rem,2.6vw,2.2rem);border-top:1px solid rgba(255,255,255,.16)}
.inner-page .inner-hero-bottom p{max-width:52ch;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.6}
.inner-page .inner-hero-mark{width:min(20vw,17rem);top:auto;bottom:clamp(3rem,6vw,5rem);right:5vw}

@media (max-width:900px){
  .inner-page .inner-hero{padding:8.5rem 0 3rem}
  .inner-page .inner-hero h1{max-width:16ch;font-size:clamp(2.1rem,8.6vw,3.1rem)}
  .inner-page .inner-hero-top{flex-direction:column;gap:.5rem;align-items:flex-start;font-size:.56rem}
  .inner-page .inner-hero-bottom{grid-template-columns:1fr}
  .inner-page .inner-hero-bottom span{justify-self:start}
  .inner-page .inner-hero-mark{width:44vw;right:-10vw;bottom:auto;top:24%}
}

/* Inner hero: one shared height across every inner page, white B mark */
.inner-page .inner-hero{min-height:clamp(30rem,72svh,46rem)}
.inner-page .inner-hero h1{max-width:28ch}
.inner-page .inner-hero-mark img{opacity:.3}

@media (max-width:900px){
  .inner-page .inner-hero{min-height:clamp(30rem,74svh,42rem)}
  .inner-page .inner-hero h1{max-width:18ch}
}

/* Inner hero: all text pure white (home page keeps its own treatment) */
.inner-page .inner-hero,
.inner-page .inner-hero h1,
.inner-page .inner-hero h1 em,
.inner-page .inner-hero-top,
.inner-page .inner-hero-top span,
.inner-page .inner-hero-bottom p,
.inner-page .inner-hero-bottom span{color:#fff}

/* ============================================================
   PROJECTS PAGE — bespoke layout & motion
   ============================================================ */

.projects-page .case-section,
.projects-page .case-evidence{padding:clamp(2.8rem,3.9vw,4.1rem) 0}

/* --- Shared heads ------------------------------------------- */
.case-head,.case-evidence-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(.8rem,1.2vw,1.3rem) clamp(2rem,5vw,6rem);align-items:start;margin-bottom:clamp(2rem,3vw,3rem)}
.case-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(.6rem,1vw,1rem)}
.case-head h2,.case-evidence-head h2{margin:0}
.case-head>p:not(.inner-kicker),.case-evidence-head>p{margin:0;max-width:46ch;line-height:1.8;align-self:end}

/* --- Case index (dark) -------------------------------------- */
.case-section{position:relative;overflow:hidden;background:var(--dark);color:var(--white)}
.case-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 12%,rgba(255,255,255,.07),transparent 38%)}
.case-section>.shell{position:relative;z-index:1}
.case-title{font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.case-title em{font-style:normal;color:rgba(255,255,255,.48)}
.case-head>p:not(.inner-kicker){color:rgba(255,255,255,.7)}

.case-section .filters{margin:clamp(1.6rem,2.6vw,2.4rem) 0 clamp(2rem,3vw,3rem)}
.case-section .filters button{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)}
.case-section .filters button.is-active,.case-section .filters button:hover{background:#fff;border-color:#fff;color:var(--dark)}

.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.case-card{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);border-radius:.6rem;background:rgba(255,255,255,.03);color:var(--white);
  transition:border-color .55s var(--ease),background .55s var(--ease),box-shadow .55s var(--ease)}
.case-card[hidden]{display:none}
.case-card figure{position:relative;margin:0;overflow:hidden;height:clamp(12rem,19vw,16rem)}
.case-card figure:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.9),rgba(9,26,33,.12));transition:opacity .6s ease}
.case-card figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1s var(--ease),filter .6s ease}
.case-card-body{position:relative;display:grid;align-content:start;gap:.85rem;padding:clamp(1.5rem,2.4vw,2.2rem)}
.case-card-index{position:absolute;top:clamp(-2.6rem,-3.4vw,-2rem);right:clamp(1.2rem,2vw,2rem);
  font-size:clamp(1.9rem,3vw,2.8rem);font-weight:300;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.55);transition:color .55s ease}
.case-card-tag{font-style:normal;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.58);transition:color .5s ease}
.case-card h3{margin:0;max-width:24ch;font-size:clamp(1.2rem,1.9vw,1.75rem);font-weight:400;line-height:1.12;letter-spacing:-.04em}
.case-card-body>p{margin:0;max-width:44ch;line-height:1.65;font-size:.92rem;color:rgba(255,255,255,.7)}
.case-card ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 0;padding:0;list-style:none}
.case-card li{padding:.42rem .75rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:border-color .5s ease,color .5s ease}
.case-card b{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;font-weight:400;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.case-card b i{font-style:normal;transition:transform .5s var(--ease)}
.case-card:hover,.case-card:focus-visible{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);box-shadow:0 2.2rem 4rem -2.2rem rgba(0,0,0,.7)}
.case-card:hover figure img,.case-card:focus-visible figure img{transform:scale(1.05);filter:saturate(1)}
.case-card:hover figure:after,.case-card:focus-visible figure:after{opacity:.78}
.case-card:hover .case-card-index,.case-card:focus-visible .case-card-index{color:#fff}
.case-card:hover .case-card-tag,.case-card:focus-visible .case-card-tag{color:#fff}
.case-card:hover li,.case-card:focus-visible li{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.9)}
.case-card:hover b i,.case-card:focus-visible b i{transform:translate(5px,-5px)}
.case-note{margin:clamp(1.6rem,2.4vw,2.2rem) 0 0;font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.52)}

/* --- Evidence (dark) ---------------------------------------- */
.case-evidence{position:relative;overflow:hidden;background:var(--dark);color:var(--white)}
.case-evidence .inner-kicker{margin:0 0 clamp(.6rem,1vw,1rem);color:rgba(255,255,255,.6)}
.case-evidence-title{font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.case-evidence-title em{font-style:normal;color:rgba(255,255,255,.48)}
.case-evidence-head>p{color:rgba(255,255,255,.7)}
.case-evidence-strip{position:relative;height:clamp(12rem,24vw,20rem);margin:clamp(1.8rem,2.8vw,2.8rem) 0;overflow:hidden;border-radius:.5rem}
.case-evidence-strip img{width:100%;height:126%;object-fit:cover;filter:saturate(.7)}
.case-evidence-strip:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.8),rgba(9,26,33,.06));content:""}
.case-evidence-strip figcaption{position:absolute;right:clamp(1.4rem,2.6vw,2.6rem);bottom:clamp(1.2rem,2.4vw,2.2rem);left:clamp(1.4rem,2.6vw,2.6rem);
  z-index:2;display:flex;justify-content:space-between;gap:2rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}

.case-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:0;padding:0;list-style:none}
.case-outcomes li{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:.6rem;
  padding:clamp(1.4rem,2.1vw,1.9rem);border:1px solid rgba(255,255,255,.14);border-radius:.5rem;background:rgba(255,255,255,.035);
  transition:translate .55s var(--ease),border-color .55s ease,background .55s ease}
.case-outcomes li:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.case-outcomes li:hover{translate:0 -.4rem;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.case-outcomes li:hover:after{transform:scaleX(1)}
.case-outcomes em{font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.case-outcomes h3{margin:0;font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:400;line-height:1.15;letter-spacing:-.035em}
.case-outcomes p{margin:0;max-width:30ch;line-height:1.6;font-size:.88rem;color:rgba(255,255,255,.7)}

/* --- Responsive -------------------------------------------- */
@media (max-width:1100px){
  .case-outcomes{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .case-head,.case-evidence-head{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .case-card-index{top:auto;bottom:calc(100% + .6rem)}
  .case-outcomes{grid-template-columns:1fr}
}

/* Case metrics: same responsive behaviour as the services stats panel */
@media (max-width:1100px){
  .case-metrics{grid-template-columns:repeat(2,1fr)}
  .case-metrics>div:nth-child(2){border-right:0}
}
@media (max-width:900px){
  .case-metrics>div,.case-metrics>div+div{padding:1.2rem;border-right:0;border-bottom:1px solid rgba(61,45,32,.14)}
  .case-metrics>div:last-child{border-bottom:0}
}
@media (max-width:640px){
  .case-metrics{grid-template-columns:1fr}
}

/* ============================================================
   CASE METRICS — self-contained (do not rely on shared aliases)
   ============================================================ */
.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:clamp(2rem,3vw,3rem) 0 0;padding:0;
  border:1px solid rgba(61,45,32,.18);border-radius:.5rem;overflow:hidden;
  background:rgba(255,255,255,.42)}
.case-metrics>div{position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:start;gap:.6rem;
  padding:clamp(1.5rem,2.2vw,2rem);
  border-right:1px solid rgba(61,45,32,.14);
  transition:background .5s var(--ease)}
.case-metrics>div+div{padding-left:clamp(1.5rem,2.2vw,2rem)}
.case-metrics>div:last-child{border-right:0}
.case-metrics>div:after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--brown);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.case-metrics>div:hover{background:rgba(61,45,32,.05)}
.case-metrics>div:hover:after{transform:scaleX(1)}
.case-metrics dt{margin:0;font-size:clamp(1.7rem,2.5vw,2.4rem);font-weight:400;line-height:1;
  letter-spacing:-.045em;color:var(--brown);transition:transform .5s var(--ease)}
.case-metrics>div:hover dt{transform:translateY(-.15rem)}
.case-metrics dd{margin:0;max-width:22ch;line-height:1.55;font-size:.86rem;color:rgba(61,45,32,.72)}

@media (max-width:1100px){
  .case-metrics{grid-template-columns:repeat(2,1fr)}
  .case-metrics>div:nth-child(2){border-right:0}
  .case-metrics>div:nth-child(1),.case-metrics>div:nth-child(2){border-bottom:1px solid rgba(61,45,32,.14)}
}
@media (max-width:640px){
  .case-metrics{grid-template-columns:1fr}
  .case-metrics>div,.case-metrics>div+div{padding:1.4rem;border-right:0;border-bottom:1px solid rgba(61,45,32,.14)}
  .case-metrics>div:last-child{border-bottom:0}
}