:root {
    --dark: #091a21;
    --deep: #000;
    --clay: #fff;
    --brown: #3d2d20;
    --paper: #fff;
    --blue: #091a21;
    --white: #fff;
    /* ------------------------------------------------------------------
       PAGE RAILS

       One global left/right content line for the whole site.

            | rail |--------- shell (centred) ---------| rail |

       Two things decide where the rails fall, and the narrower wins:

         --page-gutter   the fluid rail, which is the homepage hero's own
                         composition. It was authored as calc(3vw + 28px)
                         and is the horizontal scale the design is drawn
                         to, so it governs from mobile up to ~1719px.
         --content-max   the centred container, which takes over above
                         that so the band stops growing on large monitors.

       The handover is by construction smooth: the two are equal at the
       width where min() switches, so there is no step in the rail.

       --shell is the band between the rails, and --gutter is the rail
       itself. Everything that already used var(--shell) or the .shell
       class keeps working; sections position against var(--gutter).
       ------------------------------------------------------------------ */
    --content-max: 1560px;
    --page-gutter: clamp(20px, calc(3vw + 28px), 96px);
    --shell: min(var(--content-max), calc(100% - var(--page-gutter) * 2));
    --gutter: calc((100% - var(--shell)) / 2);

    /* Layout width is not reading width. Long copy keeps a measure. */
    --reading: 68ch;
    --reading-tight: 54ch;

    --ease: cubic-bezier(.16, 1, .3, 1)
}

/* Phones and tablets run one column, so the rail closes down to the 20px
   the design already used on a phone. The slope is set so it arrives at
   the breakpoint within a few pixels of the desktop rail (50px at 900,
   55px at 901) — the layout changes there, the rail does not jump. */
@media (max-width: 900px) {
    :root {
        --page-gutter: clamp(20px, 5.6vw, 50px)
    }
}

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

html {
    /* No scroll-behavior here. ScrollTrigger sets the scroll position itself
       while it re-measures, and a smooth scrolling box turns those writes into
       animations it then has to race — which is how a refresh ends up
       measuring at the wrong position and shifting every trigger on the page.
       In-page anchors are scrolled smoothly from main.js instead. */
    /* clip, not hidden: `hidden` turns the root into a scroll container on
       both axes, which puts every sticky section and every scroll-linked
       animation on the slower path. `clip` cuts the overflow without
       creating a scrollport. */
    overflow-x: clip
}

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;
    align-items: center;
    gap: 30px;
    border-top: 1px solid #ffffff3b
}

.contact footer span {
    text-align: right
}

.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) {
    /* --shell used to be pinned to calc(100% - 40px) here, a second
       definition that ignored the rail token. The rail is now the single
       source on this side of the breakpoint too; see --page-gutter. */

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

/* Practice brand palettes and clearer chapter navigation */
.axis-layer {
    --practice-accent: #a7b9bf
}

.terra-layer {
    --practice-accent: #b4c4b2
}

.nexus-layer {
    --practice-accent: #b4a6b7
}

.axis-layer .practice-atmosphere {
    background: linear-gradient(90deg, #071216fa 0%, #10252bd6 42%, #78919a3d 76%), linear-gradient(0deg, #061115ec, transparent 58%)
}

.terra-layer .practice-atmosphere {
    background: linear-gradient(90deg, #07120ef5 0%, #0d1d16c7 46%, #06100cd1 100%), linear-gradient(0deg, #07120eeb, transparent 58%)
}

.nexus-layer .practice-atmosphere {
    background: radial-gradient(circle at 73% 38%, #8a7e8e34, transparent 28%), linear-gradient(90deg, #07120ffa 0%, #10221bc9 53%, #8a7e8e30), linear-gradient(0deg, #07120fe8, transparent 55%)
}

@media(min-width:901px) {
    .axis-layer .practice-content {
        width: min(650px, 48vw)
    }

    .terra-layer .practice-content {
        width: min(650px, 48vw)
    }

    .axis-layer .practice-content h3,
    .terra-layer .practice-content h3 {
        font-size: clamp(64px, 6.8vw, 108px)
    }
}
.practice-layer .practice-content h3 em {
    color: var(--practice-accent)
}

.practice-layer .practice-kicker span {
    border-color: var(--practice-accent);
    background: color-mix(in srgb, var(--practice-accent) 18%, transparent);
    color: #fff
}

.practice-layer .practice-content ul {
    border-top-color: color-mix(in srgb, var(--practice-accent) 70%, transparent)
}

.practice-object {
    background: #607983
}

.practice-dots {
    gap: 12px;
    padding: 10px;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    background: #040b0dc2;
    box-shadow: 0 12px 34px #0000004f;
    backdrop-filter: blur(12px)
}

.practice-dots button {
    --step-color: #fff;
    display: grid;
    min-width: 126px;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    padding: 4px 7px 8px;
    border-bottom-color: #ffffff70;
    color: #ffffffb8;
    text-align: left
}

.practice-dots button:nth-child(1) {
    --step-color: #a7b9bf
}

.practice-dots button:nth-child(2) {
    --step-color: #b4c4b2
}

.practice-dots button:nth-child(3) {
    --step-color: #b4a6b7
}

.practice-dots button span {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--step-color);
    font-size: 8px
}

.practice-dots button b {
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em
}

.practice-dots button small {
    color: #ffffff8f;
    font-size: 7px;
    letter-spacing: .08em;
    white-space: nowrap
}

.practice-dots button.active,
.practice-dots button:hover,
.practice-dots button:focus-visible {
    border-color: var(--step-color);
    color: #fff;
    box-shadow: inset 0 -2px var(--step-color)
}

.practice-dots button.active small,
.practice-dots button:hover small,
.practice-dots button:focus-visible small {
    color: #ffffffe6
}

.practice-caption {
    color: #ffffffc2;
    font-size: 9px;
    font-weight: 500
}

.practice-caption i {
    background: #ffffff70
}
/* Practice photographic media and legibility refinement */
.practice-layer .practice-content h3 {
    text-shadow: 0 2px 28px #0000004d
}

.practice-layer .practice-content>p {
    color: #fffffff2;
    text-shadow: 0 1px 14px #000000b8
}

.practice-layer .practice-content li {
    color: #ffffffe8;
    text-shadow: 0 1px 10px #000000a8
}

@media(min-width:901px) {
    .nexus-layer .practice-content {
        bottom: 18vh
    }

    .nexus-layer .practice-fragment {
        top: 18vh;
        left: 5vw;
        width: min(15vw, 220px);
        aspect-ratio: 1.15;
        border: 1px solid #ffffff3d;
        border-radius: 14px;
        clip-path: none;
        box-shadow: 0 24px 65px #00000045
    }

    .nexus-layer .practice-fragment img {
        height: 100%;
        object-position: center
    }
}
/* Terra professional affiliation marks */
.terra-credentials {
    position: absolute;
    z-index: 7;
    top: auto;
    right: 7vw;
    bottom: 9vh;
    left: auto;
    display: grid;
    width: min(470px, 40vw);
    height: 88px;
    grid-template-columns: .95fr 1.05fr;
    gap: 8px;
    padding: 29px 8px 8px;
    overflow: hidden;
    border: 1px solid #ffffff38;
    border-radius: 15px;
    background: linear-gradient(110deg, #06120fee 0%, #183025d8 46%, #091712ee 100%);
    background-size: 220% 100%;
    box-shadow: 0 20px 48px #0000003d;
    backdrop-filter: blur(14px);
    animation: terra-credentials-sheen 10s linear infinite;
    pointer-events: none
}

.terra-credentials:before {
    content: "Terra verified standards";
    position: absolute;
    top: 10px;
    left: 14px;
    color: #f6faf7;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase
}

.terra-credential {
    position: relative;
    inset: auto;
    display: grid;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    place-items: center;
    border: 1px solid #d9e2dc;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px #ffffff, 0 7px 16px #00000020;
    opacity: 1
}

.terra-credential img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    max-width: none;
    height: auto;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translate3d(-50%, -50%, 0)
}

.terra-credential--safe img {
    width: clamp(195px, 17vw, 235px)
}

.terra-credential--isep img {
    /* The ISEP artwork is stacked (mark over two lines of type), so it carries
       far less whitespace in its file than the single-line SafeContractor mark:
       45% of its canvas height against 18%. Sized on width alone it filled 97%
       of the box height and read as cropped, so it is scaled to 0.8 to leave
       the same kind of breathing room as its neighbour. */
    width: clamp(104px, 8.8vw, 118px)
}

@keyframes terra-credentials-sheen {
    0% { background-position: 100% 50% }
    50% { background-position: 0 50% }
    100% { background-position: 100% 50% }
}

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

@media (prefers-reduced-motion:reduce) {
    .terra-credentials {
        animation: none
    }
}
/* Practice title spacing, contrast, and Terra media refinement */
.practice-layer .practice-content h3 {
    letter-spacing: -.065em;
    line-height: .92
}

@media(min-width:901px) {
    .axis-layer .practice-content h3,
    .terra-layer .practice-content h3 {
        font-size: clamp(60px, 6.2vw, 100px)
    }

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

    .terra-layer .practice-fragment {
        top: 19vh;
        left: 6vw;
        width: min(26vw, 380px);
        min-width: 280px;
        aspect-ratio: 1.45
    }

    .terra-layer .practice-fragment img {
        object-position: center
    }
}
/* 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
    }
}

/* Audience cards: white base with the original dark active state */
.audience-list {
    background: #fff;
    border-block-color: #ffffff8f;
    box-shadow: 0 18px 48px #00000024
}

.audience-list article {
    background: #fff;
    border-right-color: #091a2126;
    color: #091a21
}

.audience-list span {
    color: #6b4e3b
}

.audience-list h3 {
    color: #091a21;
    font-weight: 500
}

.audience-list p {
    color: #34464d;
    font-weight: 400
}

.audience-list article:hover,
.audience-list article.is-active {
    background: #091a21;
    color: #fff;
    box-shadow: 0 18px 38px #0000002e
}

.audience-list article:hover span,
.audience-list article.is-active span,
.audience-list article:hover h3,
.audience-list article.is-active h3 {
    color: #fff
}

.audience-list article:hover p,
.audience-list article.is-active p {
    color: #ffffffe0
}
/* 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{grid-column:4;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:-6vw;top:4.5rem;width:min(26vw,25rem);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)}

/* --- 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-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 --------------------------------------------- */
/* Narrow end of the five-column rail: the columns drop below the 30ch
   measure, so ease the type down to keep every stage note at two lines. */
@media (min-width:1101px) and (max-width:1260px){
  .services-rail p{font-size:.78rem}
}
@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-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-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}
/* The sector cards sit right under the marquee band, which already closes with
   its own full-bleed rule — a second divider directly above the boxes reads as
   a doubled line, so the shell that follows the band opts out. */
.services-page .inner-section > .statement-band + .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)}
/* 14ch sits mid-way inside the 11.6ch–16.4ch window where all four sector
   titles wrap to exactly two lines, so every card's copy starts on the same
   baseline. The measure is in ch and the size is clamped, so both scale
   together and the wrap holds at every width. */
.services-sectors h3{max-width:14ch;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}

/* Intro splits on Projects and Services: the lead was centred against the whole
   kicker + heading block, so it opened well above the display line.
   display:contents lifts the wrapper out of the way and puts the kicker, heading
   and lead on the grid directly — kicker alone on row 1, heading and lead
   sharing row 2 — so the two open on the same line with no magic offsets. The
   shared gap would otherwise apply between those rows, so row-gap resets and
   the kicker keeps using its own margin for the space beneath it. */
.projects-page .inner-split,
.services-page .inner-split{align-items:start;row-gap:0}
.projects-page .inner-split > div,
.services-page .inner-split > div{display:contents}
.projects-page .inner-split .inner-kicker,
.services-page .inner-split .inner-kicker{grid-column:1;grid-row:1}
.projects-page .inner-split h2,
.services-page .inner-split h2{grid-column:1;grid-row:2}
/* margin-top drops the browser's default 1em on the paragraph; the .28em puts
   it back in the right amount. The heading's line-height is under 1 and the
   lead's is 1.45, so with the boxes flush the lead's cap would sit ~6px high —
   this is the half-leading difference, held in em so it tracks the type. */
.projects-page .inner-split .inner-lead,
.services-page .inner-split .inner-lead{grid-column:2;grid-row:2;margin:0}
/* The nudge is the gap between the two half-leadings, so it depends on the
   ratio of heading size to lead size — which differs per page because the two
   leads are sized differently. Hence one tuned value each, in em so it tracks. */
.projects-page .inner-split .inner-lead{margin-top:.28em;font-size:clamp(1.05rem,1.5vw,1.5rem)}
.services-page .inner-split .inner-lead{margin-top:.074em}
/* Below 900px .inner-split collapses to one column, where an explicit second
   column would force the two-up layout back. Hand the wrapper its box back so
   the section stacks in source order on its original row rhythm. */
@media (max-width:900px){
  .projects-page .inner-split,
  .services-page .inner-split{row-gap:clamp(3rem,8vw,9rem)}
  .projects-page .inner-split > div,
  .services-page .inner-split > div{display:block}
  .projects-page .inner-split .inner-kicker,
  .projects-page .inner-split h2,
  .projects-page .inner-split .inner-lead,
  .services-page .inner-split .inner-kicker,
  .services-page .inner-split h2,
  .services-page .inner-split .inner-lead{grid-column:auto;grid-row:auto}
  .projects-page .inner-split .inner-lead,
  .services-page .inner-split .inner-lead{margin-top:0}
}
.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-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}

/* The Services headline is two sentences. Inner heroes set this em inline, which
   let "Three" ride up next to "Agenda"; as a block the second sentence takes its
   own line. Scoped to Services — the other inner heroes use the em as a
   mid-sentence continuation, where a break would read wrong. */
.services-page .inner-hero h1 em{display:block}

@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
   ============================================================ */


/* --- 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}
}

/* ============================================================
   PROJECT DETAILS — bespoke layout & motion
   ============================================================ */

/* Shared compact rhythm + dividers (same as services / projects) */
.case-detail-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}
.case-detail-page .inner-hero + .inner-section > .shell::before{display:none}
.case-detail-page .inner-display{font-size:clamp(2.1rem,4.2vw,4.2rem);line-height:.98}
.case-detail-page .inner-split h2,.case-detail-page .inner-copy h2{margin:0}
.case-detail-page .capability-list{margin-top:clamp(2rem,3vw,3rem)}
.case-detail-page .capability-row{transition:background .5s var(--ease),padding .5s var(--ease),border-radius .5s var(--ease)}
.case-detail-page .capability-row b{display:inline-block;transition:transform .5s var(--ease)}
.case-detail-page .capability-row:hover{padding-right:1.2rem;padding-left:1.2rem;border-radius:14px;background:rgba(61,45,32,.05)}
.case-detail-page .capability-row:hover b{transform:translate(6px,-6px)}

/* --- Chapters section (dark) -------------------------------- */
.chapter-section{position:relative;overflow:hidden;background:var(--dark);color:var(--white)}
.chapter-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 10%,rgba(255,255,255,.07),transparent 38%)}
.chapter-section>.shell{position:relative;z-index:1}
.chapter-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)}
.chapter-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(.6rem,1vw,1rem);color:rgba(255,255,255,.6)}
.chapter-title{margin:0;font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.chapter-title em{font-style:normal;color:rgba(255,255,255,.48)}
.chapter-head>p:not(.inner-kicker){margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7);align-self:end}

/* --- Sticky chapter rail ----------------------------------- */
.chapter-layout{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.chapter-rail{position:sticky;top:7.5rem;display:grid;gap:1.6rem}
.chapter-rail ol{display:grid;gap:.2rem;margin:0;padding:0;list-style:none;
  border-left:1px solid rgba(255,255,255,.18)}
.chapter-rail a{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;gap:.4rem;
  padding:.85rem 0 .85rem 1.1rem;color:rgba(255,255,255,.5);
  transition:color .45s var(--ease),padding-left .45s var(--ease)}
.chapter-rail li{position:relative}
.chapter-rail li:before{content:"";position:absolute;top:50%;left:-1px;width:2px;height:0;
  background:#fff;transform:translateY(-50%);transition:height .45s var(--ease)}
.chapter-rail em{font-style:normal;font-size:.62rem;letter-spacing:.16em}
.chapter-rail span{font-size:.78rem;letter-spacing:.02em;line-height:1.3}
.chapter-rail a:hover{color:#fff;padding-left:1.4rem}
.chapter-rail li.is-active a{color:#fff}
.chapter-rail li.is-active:before{height:100%}
.chapter-rail-note{margin:0;max-width:30ch;font-size:.62rem;line-height:1.7;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}

/* --- A chapter --------------------------------------------- */
.chapter-stack{display:grid;gap:clamp(2rem,3.4vw,3.4rem)}
.chapter{position:relative;overflow:hidden;padding:clamp(1.6rem,2.6vw,2.4rem);
  border:1px solid rgba(255,255,255,.12);border-radius:.6rem;background:rgba(255,255,255,.03);
  scroll-margin-top:8rem;transition:border-color .55s var(--ease),background .55s var(--ease)}
.chapter:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.chapter>header{position:relative;display:grid;gap:.7rem;padding-bottom:clamp(1.2rem,1.9vw,1.7rem);
  border-bottom:1px solid rgba(255,255,255,.14)}
.chapter-index{position:absolute;top:0;right:0;font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:300;
  line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.28)}
.chapter-tag{font-style:normal;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.chapter h3{margin:0;max-width:26ch;font-size:clamp(1.3rem,2.1vw,2rem);font-weight:400;line-height:1.1;letter-spacing:-.04em}
.chapter-lead{margin:0;max-width:52ch;line-height:1.7;font-size:.95rem;color:rgba(255,255,255,.72)}

.chapter-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:clamp(1.2rem,1.9vw,1.7rem) 0;padding:0}
.chapter-meta dt{margin:0;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.chapter-meta dd{margin:.45rem 0 0;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.86)}

.chapter-body{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,2.4vw,2.4rem);
  padding-top:clamp(1.2rem,1.9vw,1.7rem);border-top:1px solid rgba(255,255,255,.14)}
.chapter-body h4{margin:0 0 .7rem;font-size:.6rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
.chapter-body p{margin:0;line-height:1.75;font-size:.92rem;color:rgba(255,255,255,.76)}
.chapter-body ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.chapter-body li{position:relative;padding-left:1.1rem;line-height:1.6;font-size:.9rem;color:rgba(255,255,255,.76)}
.chapter-body li:before{content:"";position:absolute;top:.62em;left:0;width:.32rem;height:.32rem;
  border-radius:50%;background:rgba(255,255,255,.5)}

.chapter-media{position:relative;height:clamp(11rem,20vw,17rem);margin:clamp(1.4rem,2.4vw,2.2rem) 0 0;
  overflow:hidden;border-radius:.4rem}
.chapter-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1s var(--ease),filter .6s ease}
.chapter-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.86),rgba(9,26,33,.08))}
.chapter-media figcaption{position:absolute;bottom:clamp(.9rem,1.6vw,1.3rem);left:clamp(1rem,1.8vw,1.5rem);
  right:clamp(1rem,1.8vw,1.5rem);z-index:2;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.chapter:hover .chapter-media img{transform:scale(1.04);filter:saturate(1)}

/* --- Pre-animation state ----------------------------------- */
.detail-motion .chapter-rail li{opacity:.55}
.detail-motion .chapter-rail li.is-active{opacity:1}

/* --- Responsive -------------------------------------------- */
@media (max-width:1100px){
  .chapter-layout{grid-template-columns:1fr;gap:2rem}
  .chapter-rail{position:static;top:auto;grid-template-columns:1fr}
  .chapter-rail ol{grid-auto-flow:column;grid-auto-columns:1fr;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .chapter-rail a{grid-template-columns:1fr;padding:.9rem 0 0}
  .chapter-rail a:hover{padding-left:0}
  .chapter-rail li:before{top:0;left:0;width:0;height:2px;transform:none;transition:width .45s var(--ease)}
  .chapter-rail li.is-active:before{width:100%;height:2px}
}
@media (max-width:900px){
  .chapter-head{grid-template-columns:1fr}
  .chapter-body{grid-template-columns:1fr}
  .chapter-meta{grid-template-columns:1fr;gap:.8rem}
  .chapter-index{position:static;justify-self:start}
}
@media (max-width:640px){
  .chapter-rail ol{grid-auto-flow:row;grid-auto-columns:auto}
  .chapter-rail li:before{width:2px;height:0;top:50%;transform:translateY(-50%)}
  .chapter-rail li.is-active:before{width:2px;height:100%}
  .chapter-rail ol{border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .chapter-rail a{padding:.7rem 0 .7rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .detail-motion .chapter-rail li{opacity:1}
}

/* ============================================================
   MOTION PRIMITIVES — masked lines, inertia scroll, marquee
   Shared vocabulary for the reference-style choreography.
   ============================================================ */

/* Lenis inertia scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Split lines — each line rises from behind its own edge. SplitText builds
   the mask; the padding gives descenders room inside it and the matching
   negative margin cancels it again, so the text's own leading is untouched. */
.sl-mask{padding-bottom:.14em;margin-bottom:-.14em}
.sl{display:block;will-change:transform}
.qw{display:inline-block;will-change:opacity}

/* A rule that draws itself across a row */
.row-rule{position:absolute;right:0;bottom:-1px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* Arrival curtain */
.page-curtain{position:fixed;z-index:180;display:grid;background:var(--dark);inset:0;place-items:center;will-change:clip-path}
.page-curtain span{display:grid;gap:1.1rem;justify-items:center;color:rgba(255,255,255,.86);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.page-curtain i{display:block;width:min(38vw,15rem);height:1px;background:rgba(255,255,255,.5);transform:scaleX(0);transform-origin:left center}

/* ============================================================
   ABOUT PAGE — motion scaffolding
   ============================================================ */
.about-motion .inner-hero-media{will-change:clip-path}
.about-motion .inner-hero-media img,.about-motion .about-method-strip img{will-change:transform}
.about-page .capability-row{position:relative}

/* Seamless marquee for the statement band.
   The motion kit builds .band-track on every page that has a band, so these
   rules must not be page-scoped — without them the track stays display:block,
   the separator dots collapse to zero width and the phrases run together.
   The band's own gap has to be 0 while a track exists: the loop shifts each
   track by exactly its own width, so any gap between them shows as a jump. */
.statement-band:has(.band-track){gap:0;flex-wrap:nowrap}
.statement-band .band-track{display:flex;flex:none;gap:2rem;align-items:center;padding-right:2rem;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .page-curtain{display:none}
  .sl,.qw{transform:none!important;opacity:1!important}
  .row-rule{transform:scaleX(1)}
}

/* ============================================================
   SERVICES PAGE — vertical rhythm aligned with the About page
   Overrides the earlier "tighter rhythm" rounds so both pages
   breathe at the same scale.
   ============================================================ */

/* Section heads: the About page's gap between kicker, heading and lead */
.services-practices-head,.services-connect-head,.services-section-head,.services-method-head{
  margin-bottom:clamp(3rem,5.5vw,5.2rem);
  gap:clamp(1.4rem,2.4vw,2.2rem) 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(1.6rem,3vw,2.6rem)}
.services-page .inner-split{margin-bottom:0}

/* Blocks inside the sections */
.services-stats{margin-top:clamp(4rem,7vw,7rem)}
.services-page .capability-list{margin-top:5rem}
.services-faq{margin-top:clamp(3.5rem,6vw,6rem)}
.services-method-strip{margin:clamp(3rem,5.5vw,5.5rem) 0}
.services-page .statement-band{margin:clamp(3rem,5vw,5rem) 0}
.practice-stack{gap:clamp(1.4rem,2.2vw,2.2rem)}
.services-page .inner-section > .shell::before{margin-bottom:clamp(2.6rem,4vw,4rem)}

/* The hero and the narrow-screen rhythm already come from the shared
   .inner-page rules that About uses, so neither is overridden here. */

/* ============================================================
   ABOUT + SERVICES — section padding halved
   Every clamp below is exactly 50% of the value it replaces, so the
   rhythm keeps its shape at every viewport width.
   ============================================================ */

/* About */
.about-page .inner-section.dark{padding-bottom:clamp(1.5rem,2.25vw,2.25rem)}

/* Services */
.services-page .services-practices,
.services-page .services-connect,
.services-page .services-method{padding:clamp(3rem,5vw,5.5rem) 0}

/* The closing CTA band on both pages */

/* ============================================================
   CONTACT BAND — small brand mark, calmer headline, legible address
   Shared across every page (the band is injected by main.js).
   ============================================================ */

/* The ringed B drops from a 720px watermark to a small badge */
.contact-media i{top:44%;right:5vw;width:min(13vw,180px)}

.contact-copy{width:min(1020px,74vw)}

/* Desktop only — the narrow layout already has its own type scale and puts
   the address in a two-column grid, so it is left untouched. */
@media (min-width:901px){
  /* Headline pulled back down — it was competing with the band itself.
     line-height .93 had the two lines touching, so it is opened up. */
  .contact-copy h2{font-size:clamp(42px,5.9vw,92px);line-height:1.08}

  /* Address: the 7px/10px type was too small to read against the photograph */
  .contact address{width:min(360px,29vw);bottom:70px}
  .contact address div+div{margin-top:26px}
  .contact address span{margin-bottom:10px;font-size:11px;color:#ffffff8f}
  .contact address p,.contact address a{font-size:16px;line-height:1.7}

  /* The band carried ~360px of dead space above and below the copy: 1050px
     tall for 377px of content. Now 683px — 65% of what it was — with the
     inner block filling everything above the footer strip so the space that
     is left reads as margin rather than a hole. */
  .contact{min-height:683px}
  .contact-inner{min-height:593px;padding:80px 0 70px}
}

@media (max-width:900px){
  .contact-media i{top:28%;right:6vw;width:min(34vw,150px)}
  .contact-copy h2{line-height:1.08}

  /* Narrow screens carried the same dead space, but the stacked content is
     too tall to lose 35%. Instead the address joins the normal flow rather
     than floating at a fixed offset, so the band is exactly as tall as its
     content plus room for the footer strip — no reserved emptiness. */
  .contact{min-height:0}
  .contact-inner{min-height:0;padding:110px 0 150px}
  .contact address{position:static;width:auto;margin-top:52px}
  .contact address span{font-size:10px}
  .contact address p,.contact address a{font-size:14px;line-height:1.65}
}

/* The photograph is a low-key interior, so the veil is eased off on the
   right where the copy does not sit. The headline side stays almost
   opaque, so text contrast is unchanged. */
.contact-media:after{
  background:linear-gradient(90deg,#170f0bf7,#170f0bd4 46%,#170f0b52),
             linear-gradient(0deg,#170f0bdb,transparent 64%)
}
.contact-media img{filter:saturate(.62) sepia(.14)}

/* ============================================================
   HOME — section numbering and chrome captions removed
   ============================================================ */

/* The practice band's top bar lost its label and caption; only the progress
   meter is left, so the 220px / 1fr / 220px grid collapses to the last cell. */
.practice-chrome{grid-template-columns:220px;justify-content:end}

@media (max-width:900px){
  /* The meter is hidden here too, so the bar would just reserve 119px of
     padding around nothing. */
  .practice-chrome{display:none}
}

/* ============================================================
   TEAM PAGE — bespoke layout
   A roster you read down while the portrait answers back, a bench
   of three practices, and an editorial join panel.
   ============================================================ */
.team-page{background:var(--paper)}
.team-main{position:relative;background:var(--paper)}

/* --- 01 · Leadership roster ---------------------------------- */
.team-roster-section{position:relative;padding:clamp(3rem,5.5vw,6rem) 0 clamp(3.5rem,6vw,6.5rem);overflow:hidden;background:var(--paper);color:var(--brown)}
.team-roster-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.6rem,4.5vw,4.4rem)}
.team-roster-head .inner-kicker{grid-column:1/-1;margin:0}
.team-roster-title{margin:0;font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.team-roster-title em{font-style:normal;color:rgba(61,45,32,.42)}
.team-roster-lead{margin:0;max-width:46ch;line-height:1.8;opacity:.74}

.roster{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}

.roster-list{display:grid;border-top:1px solid rgba(61,45,32,.2)}
.roster-row{position:relative;display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:1.4rem;align-items:center;padding:clamp(1.4rem,2.4vw,2.1rem) 0;border-bottom:1px solid rgba(61,45,32,.2);color:inherit;transition:padding .55s var(--ease),opacity .45s var(--ease)}
.roster-index{align-self:start;padding-top:.5rem;font-size:.62rem;letter-spacing:.16em;opacity:.5;transition:opacity .45s var(--ease)}
.roster-name h3{margin:0;font-size:clamp(1.45rem,3vw,2.9rem);font-weight:400;line-height:1.02;letter-spacing:-.045em;transition:transform .6s var(--ease)}
.roster-name p{margin:.55rem 0 0;font-size:.86rem;letter-spacing:.02em;opacity:.62;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.roster-row>i{font-style:normal;font-size:1.2rem;opacity:.35;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.roster-thumb{display:none}

/* Hovering one name dims the rest, so the list reads as a single control */
.roster-list:hover .roster-row{opacity:.38}
.roster-list:hover .roster-row:hover{opacity:1}
.roster-row:hover{padding-left:1.1rem}
.roster-row:hover .roster-name h3{transform:translateX(.35rem)}
.roster-row:hover>i{transform:translate(5px,-5px);opacity:1}
.roster-row:hover .roster-index{opacity:1}

/* The portrait stage: four stacked frames, one visible at a time */
.roster-stage{position:sticky;top:clamp(6rem,11vh,9rem)}
.roster-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(14px,1.4vw,22px);background:var(--dark)}
.roster-frame figure{position:absolute;inset:0;margin:0;clip-path:inset(0 0 100% 0)}
.roster-frame figure.is-current{clip-path:inset(0 0 0% 0)}
.roster-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03)}
.roster-frame-mark{position:absolute;z-index:2;right:1rem;bottom:1rem;display:grid;width:clamp(2.6rem,4vw,3.6rem);aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%}
.roster-frame-mark img{width:44%;opacity:.75;filter:none}
.roster-caption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(61,45,32,.2)}
.roster-caption b{font-weight:400;font-size:.95rem;letter-spacing:-.01em}
.roster-caption span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55}

/* --- 02 · The bench ----------------------------------------- */
.team-bench{position:relative;padding:clamp(3rem,5vw,5.2rem) 0 clamp(3.5rem,6vw,6.5rem);overflow:hidden;background:var(--dark);color:var(--white)}
.team-bench-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,5vw,6rem);align-items:end}
.team-bench-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(1.4rem,2.4vw,2.2rem);color:rgba(255,255,255,.6)}
.team-bench-title{margin:0;font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.team-bench-title em{font-style:normal;color:rgba(255,255,255,.46)}
.team-bench-head>p:not(.inner-kicker){margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7)}
.team-page .statement-band{margin:clamp(2.2rem,4vw,4rem) 0;border-block-color:rgba(255,255,255,.2)}

.bench-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.bench-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:.9rem;padding:clamp(1.7rem,2.6vw,2.4rem);border:1px solid rgba(255,255,255,.13);border-radius:.6rem;background:rgba(255,255,255,.03);transition:background .55s var(--ease),border-color .55s var(--ease),translate .55s var(--ease)}
.bench-mark{position:absolute;z-index:-1;top:-.35em;right:-.06em;font-size:clamp(4.6rem,8vw,7.4rem);font-weight:400;line-height:1;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);transition:transform .8s var(--ease),-webkit-text-stroke-color .55s var(--ease)}
.bench-index{font-size:.62rem;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.bench-panel h3{margin:.2rem 0 0;max-width:20ch;font-size:clamp(1.15rem,1.7vw,1.6rem);font-weight:400;line-height:1.14;letter-spacing:-.035em}
.bench-panel>p{margin:0;max-width:38ch;line-height:1.7;font-size:.92rem;color:rgba(255,255,255,.68)}
.bench-panel ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 0;padding:0;list-style:none}
.bench-panel li{padding:.45rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:border-color .5s ease,color .5s ease}
.bench-panel:hover{translate:0 -.4rem;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.bench-panel:hover .bench-mark{transform:translate(-.3rem,.3rem) rotate(-4deg);-webkit-text-stroke-color:rgba(255,255,255,.34)}
.bench-panel:hover li{border-color:rgba(255,255,255,.34);color:#fff}

.bench-measures{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:clamp(2.2rem,3.6vw,3.4rem) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.bench-measures>div{padding:clamp(1.4rem,2.2vw,2rem) clamp(1.2rem,2vw,2rem) 0 0;border-right:1px solid rgba(255,255,255,.14)}
.bench-measures>div+div{padding-left:clamp(1.2rem,2vw,2rem)}
.bench-measures>div:last-child{border-right:0}
.bench-measures dt{font-size:clamp(1.15rem,1.8vw,1.7rem);font-weight:400;line-height:1;letter-spacing:-.04em}
.bench-measures dd{margin:.8rem 0 0;max-width:26ch;line-height:1.65;font-size:.88rem;color:rgba(255,255,255,.66)}

/* --- 03 · Join ---------------------------------------------- */
.team-join{position:relative;padding:clamp(3rem,5.5vw,6rem) 0;background:var(--paper);color:var(--brown)}
.team-join-inner{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.team-join-media{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:clamp(14px,1.5vw,24px);background:var(--deep)}
.team-join-media img{width:100%;height:116%;object-fit:cover}
.team-join-media figcaption{position:absolute;bottom:1.2rem;left:1.2rem;display:flex;align-items:center;gap:.6rem;padding:.65rem 1.05rem;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)}
.team-join-media figcaption i{width:.4rem;height:.4rem;border-radius:50%;background:#fff}
.team-join-copy{display:grid;gap:1.3rem;padding-top:.2rem}
.team-join-copy .inner-kicker{margin:0;opacity:.6}
.team-join-title{margin:0;font-size:clamp(2rem,4.1vw,4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.team-join-title em{font-style:normal;color:rgba(61,45,32,.42)}
.team-join-copy>p:not(.inner-kicker){margin:0;max-width:50ch;line-height:1.8;opacity:.74}
.join-values{display:grid;margin:.4rem 0 0;padding:0;border-top:1px solid rgba(61,45,32,.18);list-style:none}
.join-values li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:.2rem 1.1rem;padding:1.3rem .3rem;border-bottom:1px solid rgba(61,45,32,.18);transition:background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease),border-radius .45s var(--ease)}
.join-values li:hover{padding-right:1.1rem;padding-left:1.1rem;border-radius:12px;background:var(--dark);color:#fff}
.join-values li>span{padding-top:.3rem;font-size:.6rem;letter-spacing:.16em;opacity:.55}
.join-values h3{margin:0;font-size:clamp(1.1rem,1.8vw,1.55rem);font-weight:400;line-height:1.1;letter-spacing:-.035em}
.join-values p{grid-column:2;margin:.4rem 0 0;font-size:.9rem;line-height:1.6;opacity:.68}
.team-join-copy .about-cta-btn{justify-self:start;margin-top:.4rem}

/* --- Pre-animation states (applied only when GSAP is driving) */
.team-motion .roster-frame figure{clip-path:inset(0 0 100% 0)}
.team-motion .roster-frame figure.is-current{clip-path:inset(0 0 0% 0)}

@media (max-width:1100px){
  .bench-grid{grid-template-columns:1fr}
  .bench-mark{font-size:clamp(4rem,12vw,6rem)}
  .bench-measures{grid-template-columns:1fr}
  .bench-measures>div,.bench-measures>div+div{padding:1.4rem 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .bench-measures>div:last-child{border-bottom:0}
}
@media (max-width:900px){
  .team-roster-head,.team-bench-head{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr}
  /* No hover on touch, so every row carries its own portrait instead */
  .roster-stage{display:none}
  .roster-row{grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:start}
  .roster-thumb{display:block;grid-column:1/-1;margin:1rem 0 0;overflow:hidden;aspect-ratio:16/10;border-radius:12px;background:var(--dark)}
  .roster-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.82)}
  .roster-list:hover .roster-row{opacity:1}
  .team-join-inner{grid-template-columns:1fr}
  .team-join-media{aspect-ratio:5/4}
}
@media (prefers-reduced-motion:reduce){
  .roster-frame figure{clip-path:none;opacity:0}
  .roster-frame figure.is-current{opacity:1}
}

/* ============================================================
   TEAM — roster rows are buttons that open a profile dialog
   A button may only contain phrasing content, so the name and role
   are spans rather than h3/p. These rules re-point the earlier
   roster styling at the new markup.
   ============================================================ */
.roster-row{width:100%;margin:0;border:0;border-bottom:1px solid rgba(61,45,32,.2);border-radius:0;background:none;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.roster-name{display:block}
.roster-person{display:block;font-size:clamp(1.45rem,3vw,2.9rem);font-weight:400;line-height:1.02;letter-spacing:-.045em;transition:transform .6s var(--ease)}
.roster-role{display:block;margin-top:.55rem;font-size:.86rem;letter-spacing:.02em;opacity:.62;transition:transform .6s var(--ease)}
.roster-row:hover .roster-person{transform:translateX(.35rem)}
/* Desktop hides the inline thumbnail — the sticky stage answers the hover.
   Narrow screens keep it (see the max-width:900 rule above), so the list
   still reads visually where there is no hover. */
@media (min-width:901px){.roster-thumb{display:none}}

/* ============================================================
   PERSON PROFILE DIALOG
   ============================================================ */
.person-modal{position:fixed;z-index:220;inset:0;width:100%;max-width:none;height:100%;max-height:none;padding:clamp(1rem,3vw,2.5rem);border:0;background:none;overflow:hidden;color:var(--brown)}
.person-modal:not([open]){display:none}
.person-modal[open]{display:grid;place-items:center}
.person-modal::backdrop{background:rgba(9,26,33,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.person-modal[open]::backdrop{animation:personVeil .45s ease forwards}
@keyframes personVeil{from{opacity:0}to{opacity:1}}

.person-panel{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);width:min(1000px,100%);max-height:min(88svh,44rem);overflow:hidden;border-radius:clamp(16px,1.8vw,26px);background:#f7f4ef;box-shadow:0 3rem 6rem -2rem rgba(9,26,33,.55)}
.person-portrait{position:relative;margin:0;overflow:hidden;background:var(--dark)}
.person-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(.86)}
.person-body{overflow-y:auto;padding:clamp(1.8rem,3.2vw,3rem) clamp(1.6rem,2.8vw,2.8rem)}
.person-body::-webkit-scrollbar{width:6px}
.person-body::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(61,45,32,.22)}

.person-eyebrow{margin:0;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.person-body h3{margin:.9rem 0 0;font-size:clamp(1.8rem,3.2vw,2.9rem);font-weight:400;line-height:1;letter-spacing:-.05em}
.person-practice{margin:.7rem 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);opacity:.72}
.person-bio{margin:clamp(1.2rem,2vw,1.7rem) 0 0;max-width:46ch;line-height:1.8;opacity:.78}

.person-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:clamp(1.4rem,2.4vw,2rem) 0 0;padding:clamp(1.2rem,2vw,1.6rem) 0 0;border-top:1px solid rgba(61,45,32,.18)}
.person-meta>div+div{padding-left:1rem;border-left:1px solid rgba(61,45,32,.14)}
.person-meta dt{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.person-meta dd{margin:.5rem 0 0;font-size:.95rem;letter-spacing:-.01em}

.person-focus{display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(1.2rem,2vw,1.6rem) 0 0;padding:0;list-style:none}
.person-focus li{padding:.5rem .85rem;border:1px solid rgba(61,45,32,.24);border-radius:999px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

.person-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(1.4rem,2.4vw,2rem) 0 0;padding:clamp(1.2rem,2vw,1.6rem) 0 0;border-top:1px solid rgba(61,45,32,.18)}
.person-links a{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.25rem;border:1px solid rgba(61,45,32,.32);border-radius:999px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:inherit;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.person-links a i{font-style:normal;transition:transform .4s var(--ease)}
.person-links a:hover{border-color:var(--dark);background:var(--dark);color:#fff}
.person-links a:hover i{transform:translate(3px,-3px)}

.person-close{position:absolute;z-index:3;top:clamp(.9rem,1.6vw,1.3rem);right:clamp(.9rem,1.6vw,1.3rem);display:grid;width:2.6rem;height:2.6rem;place-items:center;padding:0;border:1px solid rgba(61,45,32,.28);border-radius:50%;background:rgba(247,244,239,.86);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease)}
.person-close i{position:absolute;width:.95rem;height:1px;background:var(--brown);transition:background .4s var(--ease)}
.person-close i:first-child{transform:rotate(45deg)}
.person-close i:last-child{transform:rotate(-45deg)}
.person-close:hover{border-color:var(--dark);background:var(--dark);transform:rotate(90deg)}
.person-close:hover i{background:#fff}

body.person-open{overflow:hidden}

@media (max-width:820px){
  .person-panel{grid-template-columns:1fr;max-height:92svh}
  .person-portrait{height:min(42svh,20rem)}
  .person-portrait img{object-position:center 20%}
  .person-meta{grid-template-columns:1fr}
  .person-meta>div+div{margin-top:.9rem;padding-top:.9rem;padding-left:0;border-top:1px solid rgba(61,45,32,.14);border-left:0}
  .person-links a{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   HOME TEAM CARDS — each card opens the shared profile dialog
   The card keeps its article markup (a button may not contain
   figures or headings), so an invisible button covers it. That
   also replaces the old tabindex="0", which made the card
   focusable without being activatable.
   ============================================================ */
.team-card-trigger{position:absolute;z-index:3;inset:0;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.team-card-trigger:focus-visible{outline:2px solid var(--clay);outline-offset:5px}
/* Focus on the trigger has to light the card exactly the way hover does */
.team-card:focus-within figure img{filter:saturate(1) contrast(1.02);transform:scale(1.1)}
.team-card:focus-within .team-card-copy b{background:rgba(255,255,255,.12);transform:rotate(90deg)}

/* Locking the page behind a dialog removes the scrollbar, which would let
   the layout underneath jump sideways. scrollbar-gutter cannot help here —
   it is ignored once overflow is hidden — so the width the scrollbar gave
   up is handed back as padding, measured in JS when the dialog opens. */
html.person-open,body.person-open{overflow:hidden}
html.person-open{padding-right:var(--lock-gap,0px)}

/* Terra green delivery timeline */
.delivery-line {
    background: #8aad9930
}

.delivery-line i {
    background: linear-gradient(180deg, #c8d7cd 0%, #8aad99 55%, #5f806c 100%);
    box-shadow: 0 0 18px #8aad995c
}

.delivery-steps article>span {
    border-color: #8aad9970;
    background: #102a23;
    color: #c9d8cf;
    box-shadow: inset 0 0 0 1px #8aad9914;
    transition: border-color .35s, background-color .35s, color .35s, box-shadow .35s, transform .35s
}

.delivery-steps article.is-active>span {
    border-color: #c2d3c7;
    background: #8aad99;
    color: #071914;
    box-shadow: 0 0 0 6px #8aad9917, 0 0 24px #8aad994d;
    transform: scale(1.04)
}
/* ============================================================
   CLIENT LOGO STREAM — mono by default, full colour on hover
   Every logo sits in near-black grayscale so the strip reads as one
   row rather than four competing palettes. Hovering a logo returns it
   to its own colour at full opacity — nothing dims it.
   ============================================================ */
.client-logo img{
  filter:grayscale(1) brightness(.28) contrast(1.15);
  opacity:.72;
  transition:filter .55s var(--ease),opacity .55s var(--ease),transform .55s var(--ease)
}
/* No dimming of the neighbours: that rule outranked the hover rule below on
   specificity, so the logo being hovered was dimmed along with them and its
   colour came back washed out. The hovered logo now simply returns to full
   colour at full opacity, and the rest stay as they were. */
/* A larger hit target, so a moving logo is easy to catch */
.client-logo{padding:.6rem .4rem}
.client-logo:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.06)
}
/* Touch screens have no hover, so the logos simply show in colour */
@media (hover:none){
  .client-logo img{filter:none;opacity:.9}
  .client-stream-logos:hover .client-logo img{opacity:.9}
}

/* Who we serve audience heading */
.audience-heading {
    position: absolute;
    z-index: 5;
    right: 4vw;
    bottom: calc(2.5vh + 198px);
    left: 5vw;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff
}

.audience-heading:before {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border: 1px solid #a27d62;
    background: #6b4e3b;
    box-shadow: 0 0 0 5px #6b4e3b20;
    content: "";
    transform: rotate(45deg)
}

.audience-heading span {
    flex: 0 0 auto;
    font-size: clamp(18px, 1.6vw, 25px);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1
}

.audience-heading i {
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #a27d6299, #ffffff42 42%, transparent)
}

@media(max-width:900px) {
    .audience-heading {
        position: relative;
        inset: auto;
        width: 100%;
        order: 3;
        margin-top: 36px
    }

    .audience-list {
        order: 4;
        margin-top: 18px
    }
}
/* About hero scroll-scrub film */
.about-page .about-video-hero {
    --about-video-progress: 0;
    display: block;
    height: 450svh;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: #050f14
}

.about-hero-sticky {
    position: sticky;
    top: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    align-items: flex-end;
    padding: 0 0 clamp(2.8rem, 4.5vw, 4rem);
    overflow: hidden;
    background: #050f14;
    isolation: isolate
}

.about-video-hero.is-scroll-driven .about-hero-sticky {
    position: relative;
    top: auto
}

.about-video-hero .about-hero-film {
    z-index: 0;
    inset: -3%;
    overflow: hidden;
    clip-path: none;
    background: #050f14 url("./assets/videos/bridgestone-hero-poster.webp") center / cover no-repeat;
    transform: scale(calc(1.025 + var(--about-video-progress) * .025));
    will-change: transform
}

.about-video-hero .about-hero-film:after {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(4, 11, 14, .93) 0%, rgba(4, 11, 14, .72) 36%, rgba(4, 11, 14, .14) 68%, rgba(4, 11, 14, .3) 100%),
        linear-gradient(0deg, rgba(4, 11, 14, .8), transparent 48%),
        radial-gradient(circle at 72% 46%, transparent 0 24%, rgba(4, 11, 14, .28) 88%)
}

.about-video-hero .about-hero-film video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.82) contrast(1.08) brightness(.88);
    opacity: 0;
    transition: opacity .35s ease
}

.about-video-hero.is-video-ready .about-hero-film video {
    opacity: 1
}

.about-video-hero .inner-hero-content {
    position: relative;
    z-index: 3
}

.about-video-hero .inner-hero-mark {
    z-index: 2
}

.about-hero-progress {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #ffffff24;
    pointer-events: none
}

.about-hero-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: #866346;
    box-shadow: 0 0 14px #86634666;
    transform: scaleX(var(--about-video-progress));
    transform-origin: left center;
    will-change: transform
}

@media(max-width:900px) {
    .about-page .about-video-hero {
        height: 400svh
    }

    .about-hero-sticky {
        padding: 0 0 3rem
    }

    .about-video-hero .about-hero-film {
        inset: -2%
    }

    .about-video-hero .about-hero-film:after {
        background:
            linear-gradient(90deg, rgba(4, 11, 14, .88), rgba(4, 11, 14, .32)),
            linear-gradient(0deg, rgba(4, 11, 14, .86), transparent 58%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .about-page .about-video-hero {
        height: 100svh
    }

    .about-video-hero .about-hero-film {
        transform: none
    }

    .about-hero-progress {
        display: none
    }
}
/* ============================================================
   CONTACT PAGE — bespoke layout
   A form you read down like a document, the direct channels held
   beside it, then what actually happens after you press send.
   ============================================================ */
.contact-page{background:var(--paper)}
.contact-main{position:relative;background:var(--paper)}

/* --- 01 · The enquiry --------------------------------------- */
.enquiry{position:relative;padding:clamp(3rem,5.5vw,6rem) 0 clamp(3.5rem,6vw,6.5rem);overflow:hidden;background:var(--paper);color:var(--brown)}
.enquiry-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.6rem,4.5vw,4.4rem)}
.enquiry-head .inner-kicker{grid-column:1/-1;margin:0}
.enquiry-title{margin:0;font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.enquiry-title em{font-style:normal;color:rgba(61,45,32,.42)}
.enquiry-lead{margin:0;max-width:46ch;line-height:1.8;opacity:.74}

.enquiry-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}

/* The form sits on its own card and every field is a real surface — the
   underline-only version read as a page of blank rules rather than a form.
   The numbered column keeps it reading like a document you fill in order. */
.enquiry-form{
  display:grid;
  padding:clamp(1.5rem,2.6vw,2.4rem) clamp(1.4rem,2.4vw,2.2rem);
  border:1px solid rgba(61,45,32,.16);
  border-radius:clamp(16px,1.6vw,24px);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.32))
}
.field-row{
  position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1.2rem;
  padding:clamp(1rem,1.7vw,1.4rem) 0;border-bottom:1px solid rgba(61,45,32,.14)
}
.field-row:first-child{padding-top:0}
.field-index{
  padding-top:2rem;font-size:.69rem;letter-spacing:.16em;font-variant-numeric:tabular-nums;
  color:rgba(61,45,32,.45);transition:color .45s var(--ease)
}
.field-row:focus-within .field-index{color:var(--dark)}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.6vw,1.4rem)}
.enquiry-field{display:grid;gap:.55rem}
.enquiry-field>span{
  font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(61,45,32,.66);transition:color .45s var(--ease)
}
.enquiry-field:focus-within>span{color:var(--dark)}

/* Field surfaces */
.enquiry-field input,.enquiry-field select,.enquiry-field textarea{
  width:100%;padding:.95rem 1.05rem;
  border:1px solid rgba(61,45,32,.2);border-radius:10px;
  background:rgba(255,255,255,.7);
  color:var(--brown);font:inherit;font-size:1rem;letter-spacing:-.005em;line-height:1.5;
  -webkit-appearance:none;appearance:none;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)
}
.enquiry-field textarea{min-height:8.5rem;resize:vertical}
.enquiry-field input::placeholder,.enquiry-field textarea::placeholder{color:rgba(61,45,32,.38)}
.enquiry-field input:hover,.enquiry-field select:hover,.enquiry-field textarea:hover{border-color:rgba(61,45,32,.34)}
.enquiry-field input:focus,.enquiry-field select:focus,.enquiry-field textarea:focus{
  /* background-color, never the shorthand: the shorthand would reset
     background-size/position and blow the select's chevron up to fill
     the whole control. */
  outline:0;border-color:var(--dark);background-color:#fff;
  box-shadow:0 0 0 3px rgba(9,26,33,.09)
}
/* The browser default ring is replaced by the box-shadow above */
.enquiry-field input:focus-visible,.enquiry-field select:focus-visible,.enquiry-field textarea:focus-visible{outline:0}

/* Native select arrows differ per platform, so the chevron is drawn here.
   It lives on the label as a pseudo-element rather than as a background
   gradient on the select: any rule using the `background` shorthand would
   reset background-size and stretch a gradient chevron across the control. */
.enquiry-field select{padding-right:2.6rem;cursor:pointer}
.enquiry-field:has(select){position:relative}
.enquiry-field:has(select):after{
  content:"";position:absolute;right:1.15rem;bottom:1.5rem;
  width:.5rem;height:.5rem;
  border-right:1.5px solid rgba(61,45,32,.55);
  border-bottom:1.5px solid rgba(61,45,32,.55);
  transform:rotate(45deg) translateY(-1px);
  pointer-events:none;
  transition:border-color .35s var(--ease)
}
.enquiry-field:has(select):focus-within:after{border-color:var(--dark)}

/* Required fields are marked, so nothing is a surprise on submit */
.enquiry-field:has([required])>span:after{content:" *";color:rgba(61,45,32,.45)}

.enquiry-submit{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;
  padding-top:clamp(1.4rem,2.2vw,1.9rem)
}
.enquiry-submit button{cursor:pointer}
.enquiry-submit p{margin:0;max-width:28ch;font-size:.85rem;line-height:1.6;color:rgba(61,45,32,.6)}

/* The channels sit in a dark card so the page has a second voice */
.enquiry-aside{position:sticky;top:clamp(6rem,11vh,9rem);display:grid;gap:1.1rem}
.channel-card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:.2rem;padding:clamp(1.7rem,2.6vw,2.4rem);border-radius:clamp(14px,1.4vw,22px);background:var(--dark);color:var(--white)}
.channel-mark{position:absolute;z-index:-1;top:-2.4rem;right:-2.4rem;display:grid;width:clamp(9rem,14vw,12rem);aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.channel-mark img{width:34%;opacity:.16}
.channel-eyebrow{margin:0 0 1.1rem;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.channel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1rem;align-items:baseline;padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.16);color:inherit;transition:padding .5s var(--ease)}
.channel span{grid-column:1;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.channel b{grid-column:1;font-weight:400;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;letter-spacing:-.01em}
.channel i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;opacity:.45;transition:transform .5s var(--ease),opacity .45s var(--ease)}
a.channel:hover{padding-left:.6rem}
a.channel:hover i{transform:translate(4px,-4px);opacity:1}
.channel-static{cursor:default}

.aside-note{padding:clamp(1.5rem,2.4vw,2rem);border:1px solid rgba(61,45,32,.2);border-radius:clamp(14px,1.4vw,22px)}
.aside-note .channel-eyebrow{margin-bottom:.7rem;color:rgba(61,45,32,.55)}
.aside-note p:last-child{margin:0;line-height:1.75;font-size:.97rem;opacity:.74}

/* --- 02 · What happens next --------------------------------- */
.next-steps{position:relative;padding:clamp(3rem,5vw,5.2rem) 0 clamp(3.5rem,6vw,6.5rem);overflow:hidden;background:var(--dark);color:var(--white)}
.next-steps-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,5vw,6rem);align-items:end}
.next-steps-head .inner-kicker{grid-column:1/-1;margin:0 0 clamp(1.4rem,2.4vw,2.2rem);color:rgba(255,255,255,.6)}
.next-steps-title{margin:0;font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:400;line-height:.98;letter-spacing:-.06em}
.next-steps-title em{font-style:normal;color:rgba(255,255,255,.46)}
.next-steps-head>p:not(.inner-kicker){margin:0;max-width:46ch;line-height:1.8;color:rgba(255,255,255,.7)}
.contact-page .statement-band{margin:clamp(2.2rem,4vw,4rem) 0;border-block-color:rgba(255,255,255,.2)}

.next-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin:0;padding:0;list-style:none}
.next-rail-line{position:absolute;top:.72rem;right:0;left:0;height:1px;background:rgba(255,255,255,.18)}
.next-rail-line i{display:block;width:100%;height:100%;background:#fff;transform-origin:left center}
.next-rail li{position:relative;padding-top:2.9rem;transition:opacity .6s var(--ease)}
.next-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)}
.next-rail li.is-active:before{border-color:#fff;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.next-rail em{display:block;font-size:.69rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.next-rail h3{margin:.85rem 0 .75rem;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:400;line-height:1.05;letter-spacing:-.045em}
.next-rail p{max-width:32ch;margin:0;line-height:1.7;font-size:.97rem;color:rgba(255,255,255,.7)}

.next-strip{position:relative;height:clamp(13rem,26vw,22rem);margin:clamp(3rem,5vw,5rem) 0 clamp(2.6rem,4.5vw,4.4rem);overflow:hidden}
.next-strip img{width:100%;height:126%;object-fit:cover;object-position:center 38%;filter:saturate(.68)}
.next-strip:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,33,.92),rgba(9,26,33,.45) 30%,rgba(9,26,33,.06) 68%);content:""}
.next-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:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}

.assurance{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}
.assurance-lead{margin:0;font-size:clamp(1.2rem,2vw,1.9rem);line-height:1.4;letter-spacing:-.03em;color:rgba(255,255,255,.92)}
.assurance-list{display:grid;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2);list-style:none}
.assurance-list li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:.2rem 1.1rem;padding:1.3rem .3rem;border-bottom:1px solid rgba(255,255,255,.16);transition:background .45s var(--ease),padding .45s var(--ease),border-radius .45s var(--ease)}
.assurance-list li:hover{padding-right:1.1rem;padding-left:1.1rem;border-radius:12px;background:rgba(255,255,255,.06)}
.assurance-list li>span{padding-top:.28rem;font-size:.69rem;letter-spacing:.16em;opacity:.55}
.assurance-list h3{margin:0;font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:400;line-height:1.1;letter-spacing:-.035em}
.assurance-list p{grid-column:2;margin:.4rem 0 0;font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.68)}

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

@media (max-width:1000px){
  .enquiry-layout{grid-template-columns:1fr}
  .enquiry-aside{position:static}
  .next-rail{grid-template-columns:1fr;gap:0}
  .next-rail-line{top:0;right:auto;bottom:0;left:.4rem;width:1px;height:auto}
  .next-rail-line i{transform-origin:top center}
  .contact-motion .next-rail-line i{transform:scaleY(0)}
  .next-rail li{padding:0 0 2.4rem 2.4rem}
  .next-rail li:last-child{padding-bottom:0}
  .assurance{grid-template-columns:1fr}
}
@media (max-width:900px){
  .enquiry-head,.next-steps-head{grid-template-columns:1fr}
}
@media (max-width:560px){
  .field-pair{grid-template-columns:1fr;gap:1.4rem}
  .field-row{grid-template-columns:2.4rem minmax(0,1fr);gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .next-rail li{opacity:1}
  .next-rail-line i{transform:none}
}

/* BLOG JOURNAL — editorial index and article */
.journal-index {
    padding: clamp(5rem, 8vw, 9rem) 0 clamp(6rem, 10vw, 11rem);
    color: var(--brown)
}

.journal-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    gap: 3rem 8vw;
    align-items: end;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(61, 45, 32, .25)
}

.journal-head .inner-kicker {
    margin: 0 0 clamp(1.5rem, 2.5vw, 2.4rem)
}

.journal-title {
    margin: 0;
    font-size: clamp(3rem, 6.4vw, 7rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.065em
}

.journal-title em {
    color: rgba(61, 45, 32, .46);
    font-style: normal
}

.journal-head>p {
    max-width: 39ch;
    margin: 0 0 .4rem;
    font-size: clamp(.95rem, 1.15vw, 1.1rem);
    line-height: 1.75;
    opacity: .72
}

.journal-feature {
    margin-top: clamp(4rem, 7vw, 7rem);
    background: var(--dark);
    color: #fff;
    overflow: hidden
}

.journal-feature>a {
    display: grid;
    min-height: clamp(34rem, 54vw, 46rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
    color: inherit;
    text-decoration: none
}

.journal-feature figure,
.journal-card figure,
.journal-related figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #10232b
}

.journal-feature figure:after,
.journal-card figure:after,
.journal-related figure:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(9, 26, 33, .32));
    content: "";
    pointer-events: none
}

.journal-feature img,
.journal-card img,
.journal-related img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    filter: saturate(.74) contrast(1.04);
    transition: transform 1.1s var(--ease), filter .7s ease
}

.journal-feature-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(2.3rem, 4.5vw, 5rem)
}

.journal-feature-copy:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, .18);
    content: ""
}

.journal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.35rem;
    font-size: .6rem;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: .65
}

.journal-feature h3 {
    max-width: 13ch;
    margin: clamp(2.2rem, 4vw, 4rem) 0 1.4rem;
    font-size: clamp(2.4rem, 4.5vw, 5.1rem);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.06em
}

.journal-feature-copy>p {
    max-width: 38ch;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.75
}

.journal-read {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(2.2rem, 4vw, 4rem);
    padding-top: 1rem;
    border-top: 1px solid currentColor;
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase
}

.journal-read i {
    font-size: 1rem;
    font-style: normal;
    transition: transform .45s var(--ease)
}

.journal-feature:hover img,
.journal-card:hover img,
.journal-related a:hover img {
    filter: saturate(.92) contrast(1.05);
    transform: scale(1.035)
}

.journal-feature:hover .journal-read i,
.journal-card:hover .journal-read i {
    transform: translate(5px, -5px)
}

.journal-toolbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(5rem, 8vw, 8rem);
    padding: 1.2rem 0;
    border-block: 1px solid rgba(61, 45, 32, .24)
}

.journal-toolbar>p {
    margin: 0;
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase
}

.journal-toolbar .filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0
}

.journal-toolbar .filters button {
    min-width: auto;
    padding: .72rem 1.1rem;
    border: 1px solid rgba(61, 45, 32, .24);
    border-radius: 999px;
    background: transparent;
    color: var(--brown);
    font: inherit;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .4s ease, color .4s ease, border-color .4s ease
}

.journal-toolbar .filters button:hover,
.journal-toolbar .filters button.is-active {
    border-color: var(--brown);
    background: var(--brown);
    color: var(--paper)
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3.5rem, 6vw, 7rem) clamp(1.4rem, 2.5vw, 2.6rem);
    margin-top: clamp(3rem, 5vw, 5rem)
}

.journal-card {
    grid-column: span 6;
    min-width: 0
}

.journal-card--wide {
    grid-column: 1 / -1
}

.journal-card>a {
    display: grid;
    height: 100%;
    color: inherit;
    text-decoration: none
}

.journal-card figure {
    height: clamp(22rem, 34vw, 34rem)
}

.journal-card--tall figure {
    height: clamp(29rem, 44vw, 44rem)
}

.journal-card--wide>a {
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .6fr);
    border-block: 1px solid rgba(61, 45, 32, .22)
}

.journal-card--wide figure {
    height: clamp(27rem, 39vw, 39rem)
}

.journal-card-copy {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 0 0;
    border-top: 1px solid rgba(61, 45, 32, .24)
}

.journal-card--wide .journal-card-copy {
    justify-content: flex-end;
    padding: clamp(2rem, 4vw, 4rem);
    border-top: 0
}

.journal-card h3 {
    max-width: 20ch;
    margin: 1.5rem 0 .9rem;
    font-size: clamp(1.65rem, 2.6vw, 3rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.045em
}

.journal-card--wide h3 {
    font-size: clamp(2rem, 3.6vw, 4.2rem)
}

.journal-card-copy>p {
    max-width: 42ch;
    margin: 0;
    line-height: 1.7;
    opacity: .68
}

.journal-card .journal-read {
    margin-top: auto;
    padding-top: 1.5rem
}

.journal-card:not(.journal-card--wide) .journal-read {
    margin-top: 2rem
}

/* Article page */
.blog-detail-page .journal-article-hero {
    min-height: 100svh
}

.blog-detail-page .journal-article-hero h1 {
    max-width: 13ch;
    font-size: clamp(3.7rem, 7.2vw, 8rem);
    line-height: .9
}

.journal-article {
    padding: clamp(5rem, 9vw, 10rem) 0 clamp(6rem, 10vw, 11rem);
    color: var(--brown)
}

.journal-article-layout {
    display: grid;
    grid-template-columns: minmax(13rem, .52fr) minmax(0, 1.48fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: start
}

.journal-article-aside {
    position: sticky;
    top: 8rem;
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(61, 45, 32, .28)
}

.journal-article-aside>a,
.journal-article-aside>div {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(61, 45, 32, .2)
}

.journal-article-aside>a {
    color: inherit;
    font-size: .66rem;
    letter-spacing: .15em;
    text-decoration: none;
    text-transform: uppercase
}

.journal-article-aside>div {
    display: grid;
    gap: .45rem
}

.journal-article-aside span {
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .5
}

.journal-article-aside strong {
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.45
}

.journal-article-body {
    max-width: 54rem
}

.journal-standfirst {
    margin: 0 0 3.2rem !important;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem) !important;
    line-height: 1.35 !important;
    letter-spacing: -.035em;
    color: var(--brown) !important
}

.journal-article-body>p {
    max-width: 46rem;
    margin: 0 0 1.7rem;
    color: rgba(61, 45, 32, .78);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.85
}

.journal-article-body h2 {
    max-width: 15ch;
    margin: clamp(4.5rem, 8vw, 8rem) 0 1.8rem;
    font-size: clamp(2.5rem, 4.8vw, 5.3rem);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.06em
}

.journal-article-body blockquote {
    position: relative;
    margin: clamp(4rem, 7vw, 7rem) 0;
    padding: clamp(2.4rem, 5vw, 5rem);
    background: var(--dark);
    color: #fff;
    font-size: clamp(2rem, 3.7vw, 4.1rem);
    line-height: 1.05;
    letter-spacing: -.05em
}

.journal-article-body blockquote:before {
    display: block;
    margin-bottom: 2rem;
    color: #a98b75;
    content: "“";
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: .5
}

.journal-article-image {
    margin: clamp(4rem, 7vw, 7rem) 0
}

.journal-article-image>img {
    width: 100%;
    height: clamp(31rem, 61vw, 52rem);
    object-fit: cover;
    filter: saturate(.72)
}

.journal-article-image figcaption {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(61, 45, 32, .25);
    font-size: .58rem;
    letter-spacing: .15em;
    text-transform: uppercase
}

.journal-principles {
    display: grid;
    margin: 2.6rem 0 0;
    padding: 0;
    border-top: 1px solid rgba(61, 45, 32, .28);
    list-style: none
}

.journal-principles li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.5rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(61, 45, 32, .22)
}

.journal-principles li>span {
    padding-top: .3rem;
    font-size: .62rem;
    letter-spacing: .15em;
    opacity: .52
}

.journal-principles h3 {
    margin: 0 0 .65rem;
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    font-weight: 400;
    letter-spacing: -.035em
}

.journal-principles p {
    max-width: 42rem;
    margin: 0;
    line-height: 1.7;
    opacity: .7
}

.journal-conclusion {
    margin-top: clamp(4.5rem, 8vw, 8rem);
    padding: clamp(2.3rem, 4vw, 4rem);
    border: 1px solid rgba(61, 45, 32, .22)
}

.journal-conclusion p {
    max-width: 35ch;
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1.45;
    letter-spacing: -.025em
}

.journal-conclusion a {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid currentColor;
    color: inherit;
    font-size: .65rem;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase
}

.journal-related {
    padding: clamp(5rem, 8vw, 9rem) 0;
    color: var(--brown)
}

.journal-related header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(3rem, 5vw, 5rem);
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(61, 45, 32, .25)
}

.journal-related header .inner-kicker {
    margin: 0
}

.journal-related h2 {
    margin: 0;
    font-size: clamp(2.5rem, 4.7vw, 5rem);
    font-weight: 400;
    letter-spacing: -.06em
}

.journal-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem)
}

.journal-related-grid>a {
    color: inherit;
    text-decoration: none
}

.journal-related figure {
    height: clamp(22rem, 33vw, 34rem)
}

.journal-related-grid>a>span {
    display: block;
    margin-top: 1.3rem;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .56
}

.journal-related-grid h3 {
    max-width: 22ch;
    margin: 1rem 0 0;
    font-size: clamp(1.5rem, 2.4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.045em
}

@media(max-width:900px) {
    .journal-head,
    .journal-feature>a,
    .journal-card--wide>a,
    .journal-article-layout {
        grid-template-columns: 1fr
    }

    .journal-feature>a {
        min-height: 0
    }

    .journal-feature figure {
        height: 62vh;
        min-height: 26rem
    }

    .journal-feature-copy:before {
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 1px
    }

    .journal-toolbar,
    .journal-related header {
        align-items: flex-start;
        flex-direction: column
    }

    .journal-card,
    .journal-card--wide {
        grid-column: 1 / -1
    }

    .journal-card figure,
    .journal-card--tall figure,
    .journal-card--wide figure {
        height: min(68vh, 34rem)
    }

    .journal-card--wide .journal-card-copy {
        padding: 1.6rem 0 0;
        border-top: 1px solid rgba(61, 45, 32, .24)
    }

    .journal-article-aside {
        position: static;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 1rem
    }

    .journal-article-aside>a {
        grid-column: 1 / -1
    }

    .journal-article-aside>div {
        padding-right: 1rem
    }
}

@media(max-width:600px) {
    .journal-toolbar .filters {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, 1fr)
    }

    .journal-toolbar .filters button {
        width: 100%
    }

    .journal-feature figure {
        height: 52vh;
        min-height: 22rem
    }

    .journal-feature-copy {
        padding: 2rem 1.35rem
    }

    .journal-feature h3 {
        font-size: clamp(2.15rem, 11vw, 3.25rem)
    }

    .journal-card figure,
    .journal-card--tall figure,
    .journal-card--wide figure {
        height: 52vh
    }

    .journal-article-aside,
    .journal-related-grid {
        grid-template-columns: 1fr
    }

    .journal-article-aside>div {
        padding-right: 0
    }

    .journal-article-image>img {
        height: 64vh
    }

    .journal-article-image figcaption {
        align-items: flex-start;
        flex-direction: column
    }

    .journal-principles li {
        grid-template-columns: 2.7rem 1fr;
        gap: .7rem
    }
}
/* ============================================================
   JOURNAL — scale and rhythm pass
   The structure was right but everything was outsized: the feature ran
   986px tall, cards 882px, and six posts filled 6,100px of page. These
   rules bring the whole index back to a readable editorial scale and
   lift the small type to the same 11px floor as the rest of the site.
   ============================================================ */
.journal-index{padding:clamp(3rem,5vw,5.5rem) 0 clamp(3.5rem,6vw,6.5rem)}
.journal-head{grid-template-columns:minmax(0,1.2fr) minmax(16rem,.8fr);gap:clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,5vw,6rem)}
.journal-head .inner-kicker{margin:0 0 clamp(1rem,1.8vw,1.6rem)}
.journal-title{font-size:clamp(2.1rem,4.4vw,4.4rem);line-height:.98;letter-spacing:-.06em}
.journal-head>p{margin:0 0 .3rem;font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.8}

/* --- Featured perspective ----------------------------------- */
.journal-feature{margin-top:clamp(2.4rem,4vw,4rem);border-radius:clamp(14px,1.4vw,22px)}
.journal-feature>a{min-height:clamp(20rem,32vw,27rem);grid-template-columns:minmax(0,1.1fr) minmax(19rem,.9fr)}
.journal-feature h3{max-width:16ch;margin:clamp(1.2rem,2.2vw,2rem) 0 .9rem;font-size:clamp(1.75rem,3.1vw,3.3rem);line-height:1}
.journal-feature-copy{padding:clamp(1.8rem,3vw,3rem)}
.journal-feature-copy>p{max-width:40ch;font-size:.97rem;line-height:1.7}

/* --- Toolbar ------------------------------------------------ */
.journal-toolbar{margin-top:clamp(2.6rem,4.5vw,4.4rem);padding:1rem 0}
.journal-toolbar>p{font-size:.69rem;letter-spacing:.18em}
.journal-toolbar .filters button{padding:.68rem 1.05rem;font-size:.66rem}

/* --- Grid --------------------------------------------------- */
.journal-grid{gap:clamp(2.2rem,3.6vw,3.6rem) clamp(1.2rem,2vw,2rem);margin-top:clamp(2rem,3.4vw,3.2rem)}
.journal-card figure{height:clamp(15rem,22vw,20rem);border-radius:clamp(12px,1.2vw,18px)}
.journal-card--tall figure{height:clamp(19rem,28vw,26rem)}
.journal-card--wide figure{height:clamp(16rem,24vw,22rem);border-radius:0}
.journal-card--wide>a{grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr)}
.journal-card--wide .journal-card-copy{padding:clamp(1.6rem,2.8vw,2.6rem)}
.journal-card-copy{padding:1.3rem 0 0}
.journal-card h3{max-width:24ch;margin:1.1rem 0 .7rem;font-size:clamp(1.25rem,1.95vw,1.9rem);line-height:1.1}
.journal-card--wide h3{max-width:22ch;font-size:clamp(1.6rem,2.6vw,2.6rem)}
.journal-card-copy>p{max-width:44ch;font-size:.95rem;line-height:1.7}
.journal-card:not(.journal-card--wide) .journal-read{margin-top:1.4rem}
.journal-card .journal-read{padding-top:1.1rem}

/* Small type floor — the meta line and read links were 9.6px */
.journal-meta{gap:.5rem 1.1rem;font-size:.69rem;opacity:.7}
.journal-read{margin-top:clamp(1.4rem,2.4vw,2.2rem);font-size:.69rem}

/* The category is the first meta item, so it reads as a tag */
.journal-card .journal-meta>span:first-child,
.journal-feature .journal-meta>span:first-child{
  padding:.32rem .7rem;border:1px solid currentColor;border-radius:999px;opacity:.85
}

/* Cards lift on hover so the whole tile reads as the target */
.journal-card>a{transition:transform .55s var(--ease)}
.journal-card:hover>a{transform:translateY(-.35rem)}

/* --- Article page ------------------------------------------- */
/* The article hero was the only 100svh hero left on the site */
.blog-detail-page .journal-article-hero{min-height:clamp(30rem,72svh,46rem)}
.blog-detail-page .journal-article-hero h1{max-width:16ch;font-size:clamp(2.4rem,5vw,5rem);line-height:.98}
.journal-article{padding:clamp(3rem,5vw,5.5rem) 0 clamp(3.5rem,6vw,6.5rem)}
.journal-article-layout{grid-template-columns:minmax(12rem,.48fr) minmax(0,1.52fr);gap:clamp(2rem,5vw,5.5rem)}
.journal-article-aside{top:clamp(6rem,11vh,9rem)}

/* --- Pre-animation states (applied only when GSAP is driving) */
.journal-motion .journal-card,
.journal-motion .journal-feature{will-change:transform}

@media (max-width:900px){
  .journal-head{grid-template-columns:1fr}
  .journal-feature>a,.journal-card--wide>a{grid-template-columns:1fr}
  .journal-card{grid-column:1/-1}
  .journal-toolbar{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* The featured tile had no height on its figure, so img{height:112%} had no
   basis to resolve against and the photograph's intrinsic height set the grid
   row — 943px for 470px of copy. Taking the image out of flow lets the row be
   driven by the copy and the min-height, and leaves room for the parallax. */
.journal-feature figure{align-self:stretch}
.journal-feature img{position:absolute;top:-7%;left:0;width:100%;height:114%;object-fit:cover}

/* ============================================================
   UNIFORM CARDS + PER-ITEM DETAIL ROUTES
   Two cards side by side used to end up different heights because the
   grid carried --tall/--wide variants. Every card now has the same
   figure height and the read link is pushed to a shared baseline, so a
   row lines up regardless of how many lines a headline takes.
   ============================================================ */
.journal-grid{align-items:stretch}
.journal-card>a{display:flex;flex-direction:column;height:100%}
.journal-card figure{flex:none}
.journal-card-copy{flex:1 1 auto}
.journal-card .journal-read{margin-top:auto}

/* Newsroom — the cards are links now, and all the same shape */
.editorial-grid{align-items:stretch;gap:clamp(1.6rem,2.8vw,2.6rem) clamp(1.2rem,2vw,2rem)}
.editorial-card{grid-column:span 6;display:flex;flex-direction:column;border-top:0;padding-top:0}
.editorial-card figure{height:clamp(15rem,22vw,20rem);flex:none;border-radius:clamp(12px,1.2vw,18px);margin:0 0 1.3rem;position:relative}
.editorial-card img{height:112%;transition:transform 1.1s var(--ease),filter .7s ease;filter:saturate(.74) contrast(1.04)}
.editorial-card:hover img{transform:scale(1.035);filter:saturate(.92) contrast(1.05)}
.editorial-card small{display:inline-block;align-self:flex-start;padding:.32rem .7rem;border:1px solid currentColor;border-radius:999px;font-size:.69rem;letter-spacing:.14em;opacity:.85}
.editorial-card h3{margin:1.1rem 0 .7rem;max-width:24ch;font-size:clamp(1.25rem,1.95vw,1.9rem);line-height:1.1}
.editorial-card p{max-width:44ch;font-size:.95rem;line-height:1.7;opacity:.68}
.editorial-card:after{
  content:"Read ↗";margin-top:auto;padding-top:1.1rem;
  border-top:1px solid currentColor;font-size:.69rem;letter-spacing:.15em;text-transform:uppercase
}
.editorial-card>a{transition:transform .55s var(--ease)}
.editorial-card:hover{transform:translateY(-.35rem);transition:transform .55s var(--ease)}

/* The project rail now routes to the other projects rather than to anchors */
.chapter-rail-title{margin:0;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.chapter-rail-note a{color:rgba(255,255,255,.62);transition:color .4s ease}
.chapter-rail-note a:hover{color:#fff}
.chapter-rail span{font-size:.8rem}

@media (max-width:900px){
  .editorial-card{grid-column:1/-1}
}

/* Same specificity as the earlier :not() rule, and later in the file, so the
   read link is genuinely pushed to a shared baseline across a row. */
.journal-card:not(.journal-card--wide) .journal-read{margin-top:auto}
.journal-card-copy>p{margin-bottom:1.4rem}

/* ============================================================
   PARALLAX COVERAGE
   The parallax tweens travel yPercent -8 → +8, but card images were only
   112% tall, so at the positive end the top edge slid below the figure and
   exposed its dark background as a black strip across the top of the photo.
   Absolute + 124%/-12% keeps both edges outside the frame for the whole
   travel: +8% of 124 = 9.9%, so the top stays at -2.1% and the bottom at
   102.1%. Applies to every parallaxed card image, not just the journal.
   ============================================================ */
/* Only the images that actually travel. Project and related-card images are
   static, so stretching them would crop the photograph for no reason. */
.journal-card figure img,
.editorial-card figure img{
  position:absolute;top:-12%;left:0;width:100%;height:124%;object-fit:cover
}
.journal-feature img{top:-12%;height:124%}
.editorial-card figure{position:relative;overflow:hidden}
/* Static images simply fill their frame */
.journal-related figure img{height:100%}

/* ============================================================
   ACTIVE NAVIGATION
   The current section is marked with a rule that draws under the label,
   using the same easing as every other line on the site. The pill just
   inverts, since it is already a filled shape.
   ============================================================ */
.header nav a{position:relative}
.header nav a:after{
  content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);opacity:.55
}
.header nav a:hover:after{transform:scaleX(1)}
.header nav a.is-current{opacity:1}
.header nav a.is-current:after{transform:scaleX(1);opacity:1}

/* The header inverts to dark type once it condenses over a light section */
.header.condensed nav a.is-current{opacity:1}

/* Contact lives in the pill rather than the nav list */
.header .pill.is-current{background:#fff;border-color:#fff;color:var(--dark)}
.header .pill.is-current:hover{background:#ffffffdd}

/* Mobile menu — the number and the label both come forward */
.mobile-nav a.is-current{opacity:1}
.mobile-nav a.is-current span{opacity:1}
.mobile-nav a.is-current:after{
  content:"";margin-left:auto;align-self:center;
  width:6px;height:6px;border-radius:50%;background:currentColor
}

/* ============================================================
   CONTACT — social channels
   They sit inside the Direct channels card because that is what they are:
   another way to reach the firm. Icons are inline SVG so they inherit the
   card's colour and stay crisp at any size.
   ============================================================ */
.channel-social{padding-top:clamp(1.1rem,1.8vw,1.5rem);border-top:1px solid rgba(255,255,255,.16)}
.channel-social>span{
  display:block;margin-bottom:.9rem;
  font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)
}
.channel-social ul{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.channel-social a{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  color:rgba(255,255,255,.78);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)
}
.channel-social svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}
.channel-social a:hover,.channel-social a:focus-visible{
  border-color:#fff;background:#fff;color:var(--dark);transform:translateY(-2px)
}
.channel-social a:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:900px){
  .channel-social a{width:2.9rem;height:2.9rem}
}

/* Practice headings — one shared scale so each title holds its two forced lines */
@media (min-width:901px){
  .axis-layer .practice-content h3,
  .terra-layer .practice-content h3,
  .nexus-layer .practice-content h3{
    font-size:clamp(44px,4.9vw,68px)
  }
}

@media (max-width:900px){
  .practice-content h3,
  .nexus-layer .practice-content h3{
    font-size:clamp(28px,9vw,58px)
  }

  /* Axis alone still inherited the desktop 46vw column here, so its title
     had a third of the width the other two layers get. */
  .axis-layer .practice-content{
    width:auto
  }
}

/* Services stats — the measures now carry a label above their description.
   No max-width here: the inherited 20ch cap was wrapping the longest label
   onto a second line while ~85px of the cell sat unused. */
.services-stats dd.services-stat-title{
  margin-top:.15rem;max-width:none;font-size:.95rem;font-weight:500;line-height:1.35;letter-spacing:-.01em;opacity:1
}

/* Engagement models — pin the "Best for" label to the foot of every card.
   The article was a top-packed grid, so the label floated directly under the
   paragraph and landed at a different height in each card.
   The label reserves two lines so every card's label STARTS on the same
   baseline, whether its own text runs to one line or two. */
.services-models article{
  display:flex;flex-direction:column
}
.services-models em{
  margin-top:auto;padding-top:.5rem;
  line-height:1.5;min-height:calc(3em + .5rem)
}

/* The five stages — every heading reserves two lines, so all five start and
   end level and the paragraphs below them share one baseline. Only in the
   five-column layout; at three or one column the headings all fit on one line. */
@media (min-width:1201px){
  .services-rail h3{
    min-height:2.35em
  }
}

/* The capability rows carried a decorative arrow that was never a link, so it
   is gone from the markup. Drop the fourth grid track it used to sit in —
   otherwise its column gap leaves dead space on the right of every row. */
.projects-page .capability-row,
.about-page .capability-row,
.services-page .capability-row,
.case-detail-page .capability-row{
  grid-template-columns:5rem 1fr 1fr
}

/* The two-line headings and the homepage heading weight are handled by the
   typography system at the end of this file, which supersedes the one-off
   sizes that used to sit here. */

/* About proposition — the image was locked to a 4/5 aspect ratio while the copy
   column beside it is as tall as its own content, so the photo finished 49px
   above the last line of text. Let the figure fill the row instead. */
@media (min-width:901px){
  .about-prop-body{
    align-items:stretch
  }
  .about-prop-media{
    aspect-ratio:auto;height:100%
  }
}

/* Same locked aspect-ratio vs content-height mismatch in the Team join block. */
@media (min-width:901px){
  .team-join-inner{
    align-items:stretch
  }
  .team-join-media{
    aspect-ratio:auto;height:100%
  }
}

/* =========================================================
   SCROLL RHYTHM
   The sticky chapters each held the reader for three to five
   viewports, so a page that is one continuous argument read as a
   series of stops. Trimmed so every chapter still plays out in
   full, with less dead travel between beats.
   ========================================================= */
@media (min-width:901px){
  .institutions{height:300svh}
  .practice-journey{height:400svh}
  .perspectives{height:400svh}
}

/* ---------------------------------------------------------
   The institutions picture opens on transforms, not on width.

   `width` cost a layout pass, a re-crop of a 2700px photograph
   and a fresh raster of its mask and gradient on every frame.
   The figure now sits at its full width and scales on x from its
   right edge; the frame inside carries the exact reciprocal, so
   the photograph holds its size and its centre while the frame
   around it opens. Because the cover scale here is driven by the
   height, which never changed with the width, the result is
   pixel-identical to the old reveal.

   `--reveal` is the figure's share of the stage: .44 at the top
   of the section, 1 at the bottom. It defaults to 1 so that a
   reader on reduced motion, or with the script blocked, gets the
   finished full-bleed frame rather than a cropped one.
   --------------------------------------------------------- */
@media (min-width:901px){
  .institution-visual{
    width:100%;
    transform:scaleX(var(--reveal,1));
    transform-origin:100% 50%;
    will-change:transform
  }
  /* --reveal-inv is the reciprocal of --reveal, written by the timeline.
     This used to be calc(1 / var(--reveal)); a division whose divisor only
     becomes a number after substitution is fragile across engines — Safari
     drops the whole declaration, which leaves the frame and the disc without
     their counter-scale and hands them the figure's own squash instead. The
     reciprocal is computed once in JavaScript now, so the CSS is a plain
     value everywhere. */
  .institution-visual-frame{
    position:absolute;
    inset:0;
    display:block;
    overflow:hidden;
    transform:scaleX(var(--reveal-inv,1));
    transform-origin:50% 50%
  }
  /* The brand disc reads as part of the picture, so it stays inside the
     figure and its holder carries the reciprocal too. Scaled from its
     right edge, the disc lands on exactly the pixel the width version
     put it on, and because the disc itself is untouched it keeps its own
     centre for the turn the timeline gives it. */
  .institution-b-hold{
    transform:scaleX(var(--reveal-inv,1));
    transform-origin:100% 50%
  }
}

/* The holder takes over the disc's place in the figure and shrink-wraps
   it, so every width the disc already had per breakpoint still applies. */
.institution-b-hold{position:absolute;z-index:2;top:18%;right:9%}
.institution-b{position:relative;top:auto;right:auto;z-index:auto}

@media (max-width:900px){
  .institution-visual{transform:none}
  .institution-visual-frame{display:contents}
}

/* The photograph moved one level down into the frame. */
/* Scoped to the frame. Written as `.institution-visual img` while the
   photograph was the only image in the figure, this later also matched the
   brand disc's own mark once the disc moved back inside — so the mark was
   being laid out at 100% wide and 115% tall of the disc (228x280 instead of
   ~76x76), which burst the disc open and is why it rendered as a lopsided
   blob rather than a circle. */
.institution-visual-frame img{width:100%;height:115%;object-fit:cover;filter:saturate(.58) contrast(1.04)}

/* =========================================================
   TYPOGRAPHY SYSTEM

   Headings were sized one section at a time, so the same level of
   heading arrived at ten different sizes, two weights and six
   trackings across the site — the homepage ran from 68px to
   104px for one hierarchy, and About's section headings were half
   again larger than its own page title. The tokens below hold the
   shared voice; only the size step changes, and only because a
   heading in a 560px column cannot be set like one that owns the
   full shell.

   Deliberately left alone: the practice chapter titles, which are
   the pinned section's whole composition, and the hero, which is
   the page's one display moment.
   ========================================================= */
:root{
  /* Display voice — section-opening headings */
  --fw-display:300;
  --lh-display:.96;
  --ls-display:-.065em;
  --fs-display-lg:clamp(46px,5.7vw,84px);   /* heading owns the full shell */
  --fs-display:clamp(44px,5.4vw,80px);      /* heading shares the row with media */

  /* Inner-page section titles — the step below the page title */
  --fs-section-title:clamp(1.85rem,4.4vw,4.4rem);
  --lh-section-title:.98;

  /* Sub-headings inside cards, rows and list items */
  --fw-heading:400;

  /* Eyebrows, kickers and every other small uppercase label */
  --fs-label:10px;
  --fw-label:500;
  --ls-label:.18em;
}

/* ---- Homepage section headings -------------------------- */
.complexity-copy h2,
.institution-copy h2,
.value-intro h2,
.method-intro h2,
.perspective h2,
.clients-home h2,
.projects-home-intro h2,
.team-intro h2,
.insights-intro h2,
.contact-copy h2{
  font-weight:var(--fw-display);
  letter-spacing:var(--ls-display)
}

.complexity-copy h2,
.institution-copy h2,
.value-intro h2,
.method-intro h2,
.perspective h2,
.clients-home h2{
  font-size:var(--fs-display);
  line-height:var(--lh-display)
}

.projects-home-intro h2,
.team-intro h2,
.insights-intro h2{
  font-size:var(--fs-display-lg);
  line-height:var(--lh-display)
}

/* The closing band reveals its lines from behind their own masks,
   so it keeps the extra leading the masks need to clear descenders. */
.contact-copy h2{
  font-size:var(--fs-display-lg);
  line-height:1.08
}

/* ---- Inner-page section titles -------------------------- */
/* About set its section headings larger than the page title above
   them, and half again larger than the equivalent heading on every
   other inner page. Brought onto the shared step. */
.about-prop-title,
.about-method-title,
.about-cta-copy h2,
.team-join-title,
.journal-related h2{
  font-size:var(--fs-section-title);
  line-height:var(--lh-section-title);
  letter-spacing:var(--ls-display)
}

.about-prop-title{margin:clamp(1.8rem,3.4vw,3rem) 0 clamp(2.4rem,4.4vw,4rem)}

/* ---- Labels --------------------------------------------- */
/* One label voice: .6rem, .62rem, .64rem, .69rem and 10px, at two
   different trackings, were all doing the same job. */
.eyebrow,
.inner-kicker,
.person-eyebrow,
.channel-eyebrow,
.chapter-rail-title,
.about-prop-meta,
.chapter-body h4,
.contact-details h3{
  font-size:var(--fs-label);
  font-weight:var(--fw-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase
}

/* ---- Sub-headings --------------------------------------- */
/* Card and row headings are set at 400 throughout; two on the
   homepage had drifted off it. */
.audience-list h3,
.value-system h3,
.person-card h3{
  font-weight:var(--fw-heading)
}

.person-card h3{line-height:1.2;letter-spacing:-.035em}

/* =========================================================
   TWO-LINE HEADINGS
   "Value happens / at the intersection." and "Different Mandates. /
   One Decision Discipline." each carry a <br>, but the second half
   was wider than its own column and wrapped again, so the heading
   rendered on three lines. Both now fit at the shared display size,
   by giving the heading the room rather than by shrinking the type:
   the clients header keeps its column from being eaten by a gap
   that grew with the viewport, and the value column is a little
   wider. Sized against Arial, the fallback face, so the break holds
   whether or not Poppins is available.
   ========================================================= */
@media (min-width:901px){
  .clients-home header{max-width:82rem;gap:2.5rem clamp(3rem,7vw,6.5rem)}
  .value-intro{width:min(600px,41vw)}
}

/* Below the desktop layout every section runs in a single column, so
   both of these headings take the shared display step like the rest
   and are free to wrap naturally. */

/* =========================================================
   VERTICAL RHYTHM

   Section padding had been set section by section: the homepage
   content bands ran 144, 158, 173 and 187px, which stacked into
   gaps of 317 to 346px between bands, while About ran 32 to 79px
   and dropped to a 65px gap in one place and 144px in the next.
   Same job, a five-fold spread, and both complaints at once —
   sections adrift on the homepage, sections crowded on About.

   Two steps, because there are two kinds of band:

     --band        a full-width content band, the homepage's
                   alternating dark/paper sections and the shared
                   inner-page sections
     --band-tight  a sub-section inside a page's own flow, where
                   the composition is deliberately closer set

   Because the two alternate on the inner pages, a band and a
   tight band meet at every boundary there, and two bands meet on
   the homepage: one rhythm, held to within 15% across the site.
   The pinned chapters keep padding 0 — their sticky stage is a
   full viewport and owns its own inset.
   ========================================================= */
:root{
  /* The two steps sit close together on purpose. A page whose sections
     are all one kind meets at tight+tight, a page that alternates meets
     at band+tight, and the homepage's colour bands meet at band+band;
     keeping the steps within about 15% of each other means those three
     boundaries read as one rhythm rather than three. */
  --band:clamp(4rem,7vw,7rem);              /* 64 → 112px */
  --band-tight:clamp(3.4rem,6vw,6rem);      /* 54 → 96px  */
  --gap-label:clamp(.9rem,1.3vw,1.25rem);   /* label to heading   */
  --gap-heading:clamp(1.4rem,1.9vw,1.9rem)  /* heading to its copy */
}

@media (max-width:900px){
  :root{
    --band:clamp(3.5rem,10vw,5rem);         /* 56 → 80px */
    --band-tight:clamp(3rem,8.5vw,4.25rem)  /* 48 → 68px */
  }
}

/* ---- Full content bands --------------------------------- */
.projects-home,
.clients-home,
.team-section,
.insights-section,
.inner-section,
.journal-related,
.about-page .inner-section,
.services-page .inner-section,
.projects-page .inner-section,
.case-detail-page .inner-section{
  padding-block:var(--band)
}

/* The dark band on About runs straight into the one below it, so the
   seam between them stays deliberately tighter than the rhythm. */
.about-page .inner-section.dark{padding-bottom:var(--band-tight)}

.method .shell{padding-block:var(--band)}

/* ---- Closer-set sub-sections ---------------------------- */
/* Services, Projects and Project details had each accumulated their
   own "tighter rhythm" pass on top of the last — five rounds of
   section padding for the same three selectors, the later ones dead
   the moment they were written. Those declarations are gone; this is
   the one place a section band is sized. The page-scoped selectors
   here carry the specificity those rounds used, so nothing earlier
   can win by being more specific. */
.about-prop,
.about-method,
.about-cta,
.services-practices,
.services-connect,
.services-method,
.journal-article,
.journal-index,
.team-roster-section,
.team-bench,
.team-join,
.enquiry,
.next-steps,
.case-section,
.case-evidence,
.chapter-section,
.about-page .about-prop,
.about-page .about-method,
.about-page .about-cta,
.services-page .about-cta,
.projects-page .case-section,
.projects-page .case-evidence,
.case-detail-page .chapter-section{
  padding-block:var(--band-tight)
}

/* ---- The closing band ----------------------------------- */
/* Its own footer row carries the space below, so the band keeps
   the tighter step rather than doubling up on it. */
.contact-inner{padding-block:var(--band-tight)}

/* ---- Heading to content --------------------------------- */
/* Labels sat at 20px above their heading and headings at 25, 26,
   28 or 30px above their paragraph. One step for each. */
.eyebrow,
.inner-kicker{margin-block:0 var(--gap-label)}

.complexity-copy>p:not(.eyebrow),
.institution-copy>p:last-child,
.value-intro>p:last-child,
.method-intro>p:not(.eyebrow),
.contact-copy>p:not(.eyebrow){
  margin-top:var(--gap-heading)
}

/* =========================================================
   IMAGE AND TEXT ALIGNMENT

   Where a picture sits beside a column of copy the two should
   read as one composition. The proposition row was carrying a
   .3rem nudge on the copy column, and even without it a line of
   type starts below its own box by half its leading plus the gap
   between the ascender and the cap. The first line's cap height
   now sits on the top edge of the picture, and the row's stretch
   alignment keeps the two flush at the bottom.
   ========================================================= */
@media (min-width:901px){
  .about-prop-copy{padding-top:0}
  .about-prop-lead{margin-top:-.38em}
}

/* =========================================================
   INTRO ROWS — the heading gets its own column back

   Projects, Team and Insights each open with a three-column row:
   label, display heading, supporting line. The gap between the
   columns was set in vw while the shell stops growing at 1400px,
   so past that width every extra pixel of gap came straight out of
   the heading's column: at 1920 the heading had less room than at
   1440 while the type was larger, and both "Complex programmes. /
   Clear lines of impact." and "Expertise is personal. / Delivery
   is collective." broke into four lines instead of the two their
   markup asks for. The gap is capped, the heading column carries a
   larger share, and the display step is sized to leave about a
   tenth of the column spare at every width.
   ========================================================= */
@media (min-width:901px){
  .projects-home-intro{grid-template-columns:.6fr 2.8fr auto;gap:clamp(24px,3.2vw,46px)}
  .team-intro,
  .insights-intro{gap:clamp(24px,3.2vw,46px)}
}

@media (min-width:1101px){
  .team-intro{grid-template-columns:minmax(150px,.62fr) minmax(420px,2.1fr) minmax(210px,.74fr)}
  .insights-intro{grid-template-columns:.62fr 1.75fr .68fr}
}

/* Below 1100px the shell is too narrow to carry the label, the
   heading and the "Explore all projects" link on one row: the link
   holds a fixed width, so everything it takes comes out of the
   heading. It drops under the heading instead, which is where the
   single-column layout already puts it. */
@media (min-width:901px) and (max-width:1100px){
  .projects-home-intro{grid-template-columns:.6fr 2.8fr;gap:1.6rem 2rem}
  .projects-home-intro .text-link{grid-column:2;justify-self:start}
}

/* Below 901px every section stacks into one column, so a display
   heading has the whole shell to itself and takes a larger share of
   the viewport than it can when it is sharing a row with a picture
   or a diagram. One step for each level here too. */
@media (max-width:900px){
  :root{
    --fs-display:clamp(34px,8.6vw,66px);
    --fs-display-lg:clamp(38px,9.6vw,72px)
  }
}

/* =========================================================
   SUB-HEADING SCALE

   Card, row and list-item headings had drifted to nineteen
   different sizes between 19 and 43px, several of them a couple of
   pixels apart for components doing the same job on different
   pages: 30px on a project row, 31px on an About pillar, 33px on a
   Services pair, 37px on a journal card. Three steps instead, by
   the weight a heading carries in its own block:

     lg  a row or card that is the block's main event
     md  a card or list item inside a set
     sm  a compact item in a dense grid

   Left out on purpose: the homepage's pinned compositions, where
   the audience row, the value diagram and the practice chapters
   size their headings to the geometry they sit in.
   ========================================================= */
:root{
  --fs-heading-lg:clamp(1.5rem,2.9vw,2.9rem);
  --fs-heading:clamp(1.3rem,2.35vw,2.5rem);
  --fs-heading-sm:clamp(1.1rem,1.75vw,1.62rem);
  --lh-heading:1.1;
  --ls-heading:-.04em
}

.capability-row h3,
.roster-name h3,
.delivery-steps h3,
.insight-featured .insight-copy h3{
  font-size:var(--fs-heading-lg)
}

.about-pillars h3,
.about-rail h3,
.practice-block h3,
.services-pairs h3,
.chapter h3,
.next-rail h3,
.project-row h3,
.editorial-card h3,
.journal-card h3,
.journal-related-grid h3{
  font-size:var(--fs-heading)
}

.services-rail h3,
.services-models h3,
.case-card h3,
.case-outcomes h3,
.bench-panel h3,
.join-values h3,
.assurance-list h3,
.journal-principles h3,
.client-principles h3,
.team-card-copy h3,
.person-card h3,
.insight-card:not(.insight-featured) .insight-copy h3{
  font-size:var(--fs-heading-sm)
}

.capability-row h3,
.roster-name h3,
.delivery-steps h3,
.insight-featured .insight-copy h3,
.about-pillars h3,
.about-rail h3,
.practice-block h3,
.services-pairs h3,
.chapter h3,
.next-rail h3,
.project-row h3,
.editorial-card h3,
.journal-card h3,
.journal-related-grid h3,
.services-rail h3,
.services-models h3,
.case-card h3,
.case-outcomes h3,
.bench-panel h3,
.join-values h3,
.assurance-list h3,
.journal-principles h3,
.client-principles h3,
.team-card-copy h3,
.person-card h3,
.insight-card:not(.insight-featured) .insight-copy h3{
  font-weight:var(--fw-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading)
}

/* =========================================================
   HEADING WEIGHT

   Display type ran at 300 on the homepage and 400 on every inner
   page. The site ships no webfont, so both currently render in
   Arial Regular and the difference is invisible — but it is the
   kind of inconsistency that appears the day Poppins is installed.
   One rule instead: display type is light, sub-headings are
   regular.
   ========================================================= */
.inner-hero h1,
.inner-page .inner-hero h1,
.about-prop-title,
.about-method-title,
.about-cta-copy h2,
.team-join-title,
.team-roster-title,
.team-bench-title,
.services-practices-title,
.services-connect-title,
.services-method-title,
.case-title,
.case-evidence-title,
.chapter-title,
.enquiry-title,
.next-steps-title,
.journal-title,
.journal-related h2,
.journal-article-body h2,
.article-body h2,
.inner-display,
.inner-footer h2{
  font-weight:var(--fw-display)
}

/* Services, Projects and Project details set a display heading through
   .inner-display rather than a named title class; it belongs on the same
   step as every other section title. */
.inner-display,
.services-page .inner-display,
.projects-page .inner-display,
.case-detail-page .inner-display{
  font-size:var(--fs-section-title);
  line-height:var(--lh-section-title);
  letter-spacing:var(--ls-display)
}

/* Article headings. The body subheadings inside an article were set
   larger than the section titles around them, which inverted the
   hierarchy on the page; the article hero title was six pixels above
   every other page title. Both onto the shared steps. */
.journal-article-body h2,
.article-body h2{
  font-size:var(--fs-section-title);
  line-height:var(--lh-section-title);
  letter-spacing:var(--ls-display)
}

.blog-detail-page .journal-article-hero h1{
  font-size:clamp(2.4rem,4.6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.05em
}

/* Below 901px the cards and rows these headings sit in all go
   full width, so the three steps close up: there is no dense grid
   left to justify the smallest of them staying small. */
@media (max-width:900px){
  :root{
    --fs-heading-lg:clamp(1.75rem,6vw,2.6rem);
    --fs-heading:clamp(1.5rem,5.2vw,2.2rem);
    --fs-heading-sm:clamp(1.35rem,4.6vw,1.9rem)
  }
}

/* Every named section title onto the shared step. They already
   agreed on the desktop size by carrying identical clamps, but each
   kept its own floor, so below about 670px they drifted apart again. */
.services-practices-title,
.services-connect-title,
.services-method-title,
.case-title,
.case-evidence-title,
.chapter-title,
.team-roster-title,
.team-bench-title,
.team-join-title,
.enquiry-title,
.next-steps-title,
.journal-title,
.about-prop-title,
.about-method-title,
.about-cta-copy h2,
.journal-related h2{
  font-size:var(--fs-section-title);
  line-height:var(--lh-section-title);
  letter-spacing:var(--ls-display)
}

/* The sectors list is set small on purpose: on desktop it is a dense
   multi-column grid and the type has to stay out of the way. Below
   901px that grid unstacks, and there is nothing left to justify it
   being a third smaller than every other list heading. */
@media (max-width:900px){
  .services-sectors h3{font-size:var(--fs-heading-sm)}
}

/* The Join block has the same picture-beside-copy composition as the
   About proposition. Its copy column is stretched to the height of the
   photograph, and the leftover space was being shared out above the
   first line, so the column started 32px below the top of the picture.
   Content pinned to the top, and the label trimmed of the space its own
   leading and ascender put above its cap height. */
@media (min-width:901px){
  .team-join-copy{padding-top:0;align-content:start}
  .team-join-copy>.inner-kicker:first-child{margin-top:-.5em}
}

/* =========================================================
   HORIZONTAL GRID

   The page has one content grid, defined by the rail tokens at the
   top of this file. The in-flow sections always sat on it; the
   pinned chapters did not, because their rails were written in vw
   (3vw, 4vw, 5vw, 7vw) and tuned at about 1440px, where the two
   happen to coincide. They diverge as the viewport grows: at 2560
   the homepage had six different left rails and content running
   hundreds of pixels past where the grid ended.

   --gutter is the shell's own margin, expressed so it resolves
   against the containing block rather than 100vw; that keeps it
   exact whether or not a scrollbar is present. Every rail that
   carries content, navigation or a composed image column is anchored
   to it, so the whole site holds two vertical lines at every width.

   Deliberately left on viewport rails: the orbit rings and the
   perspective gallery, which are meant to drift off the edge of the
   frame, and the full-bleed media behind the pinned chapters.
   ========================================================= */
/* --gutter is defined with the rest of the rail tokens at the top of this
   file; it is the rail itself, (100% - shell) / 2. */

@media (min-width:901px){
  /* Hero */
  .hero-copy,
  .hero-meta{left:var(--gutter);right:var(--gutter)}
  .scroll-cue{right:var(--gutter)}

  /* Complexity */
  .complexity-stage{padding-inline:var(--gutter)}
  .complexity-media{right:var(--gutter)}

  /* Institutions */
  .institution-copy{left:var(--gutter)}
  .audience-list,
  .audience-heading{left:var(--gutter);right:var(--gutter)}

  /* Practice chapters */
  .practice-chrome{left:var(--gutter);right:var(--gutter)}
  .practice-dots{left:var(--gutter)}
  .practice-caption{right:var(--gutter)}
  .practice-content{left:var(--gutter)}
  .terra-layer .practice-content{right:var(--gutter);left:auto}
  .axis-layer .practice-fragment{right:var(--gutter)}
  .terra-layer .practice-fragment,
  .nexus-layer .practice-fragment{left:var(--gutter)}
  .terra-credentials{right:var(--gutter)}

  /* Value */
  .value-intro{left:var(--gutter)}
  .value-system{right:var(--gutter)}

  /* Perspectives */
  .perspective section{left:var(--gutter)}
  .perspective>img{right:var(--gutter)}

  /* The closing band's address column sat 4vw inside the shell while
     the copy beside it was flush to it. Both edges are the grid now. */
  .contact address{right:0}

  /* The floating nav was 94vw wide, so at 2560 the logo sat 536px
     outside the first heading below it. Capped so its inner edges
     land on the grid, and unchanged below ~1400px where 94vw is
     already the narrower of the two. */
  .header,
  .header.condensed{
    left:max(3%, calc((100% - var(--shell) - 56px) / 2));
    width:min(94%, calc(var(--shell) + 56px))
  }

  /* An internal column gap that was also growing with the viewport. */
  .contact-details{padding-left:clamp(1.5rem,4vw,3.5rem)}
}

/* =========================================================
   COMPOSITION COLUMNS

   The pinned chapters are two-column compositions. Their columns
   were sized in px caps and vw fractions tuned for a fixed 1320px
   band — min(620px, 44vw), min(640px, 46vw), min(57vw, 850px) and
   so on. With the band now following the viewport, those caps left
   the two columns stranded: at 2560 the complexity row had 1145px
   of dead space between its copy and its picture.

   Every column is now a fraction of the band itself, so each
   composition keeps the proportions it was drawn with at 1440
   (roughly 48/44 with a 7% channel) at every width. Reading width
   is handled separately, by the max-width already on each
   paragraph — the column carries the heading and the composition,
   the paragraph keeps its measure.
   ========================================================= */
/* One thing to know before editing these: var(--shell) is
   calc(100% - gutter*2), so it only reads as the band where 100% is the
   full stage. That is true for an absolutely positioned child, whose
   containing block is the stage's padding box, and it is what almost
   every column below is. .complexity-copy is the exception: it is in
   flow inside a stage that already carries the gutter as padding, so its
   100% is the band already and a plain percentage is the correct form.
   Using var(--shell) there would subtract the gutter a second time. */
@media (min-width:901px){
  .complexity-copy{width:48%}
  .complexity-media{width:calc(var(--shell) * .44)}

  .institution-copy{width:calc(var(--shell) * .5)}
  /* The column is the measure now, so the heading no longer needs
     its own cap on top of it. */
  .institution-copy h2{max-width:none}

  .axis-layer .practice-content,
  .terra-layer .practice-content{width:calc(var(--shell) * .5)}
  .nexus-layer .practice-content{width:calc(var(--shell) * .65)}
  .axis-layer .practice-fragment{width:calc(var(--shell) * .24)}
  .terra-layer .practice-fragment{width:calc(var(--shell) * .22)}
  .nexus-layer .practice-fragment{width:calc(var(--shell) * .17)}
  .terra-credentials{width:min(calc(var(--shell) * .37), 40rem)}

  .value-intro{width:calc(var(--shell) * .46)}
  /* The diagram is a square-ish figure inside a viewport-height
     stage, so it is bounded by the stage's height as well as by the
     band — otherwise it outgrows a short, wide monitor. */
  .value-system{width:min(calc(var(--shell) * .64), calc(78svh * 1.25))}

  .perspective section{width:calc(var(--shell) * .48)}
}

/* The third card in the value diagram hung 2% past the ring, which put
   it outside the right rail. It is content, not decoration, so it comes
   back onto the line; it still sits proud of the other four, which is
   what broke the ring in the first place. */
@media (min-width:901px){
  .value-system article:nth-of-type(3){right:0}
}

/* =========================================================
   FOOTER

   The closing footer row sat on its own 40px rail, so at 2560 the
   logo started 453px to the left of every heading above it and its
   divider ran 452px past the right rail. It closes the same grid as
   the rest of the page now: the rule and all three cells are on the
   page rails at every width.
   ========================================================= */
.contact footer{left:var(--gutter);right:var(--gutter)}

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

   Below the breakpoint the stages carried their own hardcoded 20px
   inset while .shell carried another one, so the same two-rail
   problem existed on a phone, just at a smaller scale. Everything
   here is the page rail, so a heading inside a pinned stage lines
   up with a card in the section below it.
   ========================================================= */
@media (max-width:900px){
  .complexity-stage,
  .institutions-stage,
  .value-pin,
  .practice-chrome{padding-inline:var(--gutter)}

  /* The practice copy is absolutely positioned here, so the rail is an
     inset. The complexity picture is in flow inside the stage and takes
     the rail from the stage's own padding — giving it left/right as
     well would shift it by the rail a second time. */
  .practice-content,
  .terra-layer .practice-content,
  .nexus-layer .practice-content{right:var(--gutter);left:var(--gutter)}

  .contact footer{right:var(--gutter);left:var(--gutter)}
}

/* The brand disc sits inside the figure's scaleX and carries the reciprocal
   to keep its shape. That cancels exactly for geometry, but not for
   backdrop-filter: Chrome samples the backdrop in the scaled ancestor's
   space and then transforms the result, so the blur comes out smeared and
   the disc renders as a lumpy ellipse rather than a circle. The glass is
   dropped on the side of the breakpoint where the scale exists, and the
   background carries a little more weight in its place. Below 901px there is
   no scale in the chain, so the blur stays. */
@media (min-width:901px){
  .institution-b{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:#091a21b0
  }
}

/* =========================================================
   CLOSING BAND — room for the footer row

   The footer rule sits at the bottom of the band on position:absolute,
   so the band has to reserve its height in padding or the content runs
   underneath it. On desktop that happens for free: the address is
   absolutely positioned too, and clears it. Below 901px the address
   returns to the flow, and when the band's padding became the shared
   rhythm token it lost the larger bottom value that used to hold that
   space open — so the logo and the copyright landed on top of the
   telephone number.

   One number for the footer's height, read by both the footer and the
   padding that reserves it, so they cannot drift apart again.
   ========================================================= */
:root{--contact-footer-h:5.625rem}

.contact footer{min-height:var(--contact-footer-h)}

@media (max-width:900px){
  .contact-inner{padding-bottom:calc(var(--band-tight) + var(--contact-footer-h))}
}

/* =========================================================
   MASKED LINES — room for descenders

   A .mask clips its line to overflow:hidden so the text can rise from
   behind its own edge. The display headings are set tight — the hero at
   line-height .96, the closing band at 1.08 — and a line box that tight
   is shorter than the type's ink, so the tails of g, p and y were being
   cut off along the bottom of every masked line. The hero lost 6px of
   descender, the closing band 2px.

   The clip box gains that room and a negative margin takes it straight
   back out of the layout, so line spacing is untouched. The reveals that
   start below the line now travel 120% rather than 105–110%, which is
   what it takes to stay hidden behind a mask that is fractionally taller.
   ========================================================= */
.mask{
  padding-bottom:.16em;
  margin-bottom:-.16em
}

/* =========================================================
   TEAM ROSTER — five people

   The grid was built for four: four fixed columns on desktop and a
   four-card track on the phone carousel. With five, the figure heights
   also needed to stop being fixed pixels — a fifth column at the same
   height made each card 292px wide against a 547px frame, which reads
   as a sliver rather than a portrait. The frames are ratios now, so
   they keep the alternating tall/short rhythm at any column width, and
   the carousel counts its own children.
   ========================================================= */
@media (min-width:901px){
  .team-card figure,
  .team-card:nth-child(even) figure{height:auto}
  .team-card figure{aspect-ratio:5/7}
  .team-card:nth-child(even) figure{aspect-ratio:5/6}
}

/* One row of five, but only where five columns still leave a portrait
   rather than a sliver: the band has to reach about 1280px before each
   card clears ~210px. Below that the row runs three and two, which also
   fixes the four-wide grid that used to strand the fifth card alone. */
@media (min-width:1280px){
  .team-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (min-width:901px) and (max-width:1279px){
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
}

/* The phone carousel: one track, however many people are in it. */
@media (max-width:600px){
  .team-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:82vw
  }
}

/* The team photography is 16:9 while every frame here is portrait, so the
   crop cannot be one shared value: each subject sits at a different point
   across their frame (Martin's face is left of centre, Amin's is right of
   it). The crop travels with the person as focalPoint in the TEAM array
   and is written inline, so it stays next to the portrait it belongs to
   rather than becoming five more rules in here. */

/* =========================================================
   HOME TEAM CARDS — the portrait reads at rest

   The cards were desaturated at rest (saturate .7) and only came up to
   full colour on hover, and the veil over the lower half ran to 82%
   black, so at a glance five faces looked washed out and half-buried and
   only the one under the cursor looked finished. The resting state is
   the finished state now: full saturation, and a veil that still lifts
   the copy off the picture without swallowing the subject.

   Hover keeps its job — it still pushes in — so the card is visibly
   interactive without that being the only way to see the person.

   Scoped to .home-page: the Team page has its own roster treatment and
   is deliberately left alone.
   ========================================================= */
.home-page .team-card figure img{
  filter:saturate(1) contrast(1.02)
}

.home-page .team-card figure:after{
  background:linear-gradient(180deg, transparent 58%, rgba(4,15,20,.55))
}

/* Hover lifts the veil and warms the picture. Not scale: GSAP owns the
   transform on these images for the parallax drift, so a CSS scale here
   would simply be overwritten and the card would look inert. The veil's
   opacity and the image filter are nobody else's, so they land. */
.home-page .team-card:is(:hover, :focus-visible) figure:after,
.home-page .team-card:focus-within figure:after{
  opacity:.5
}

.home-page .team-card:is(:hover, :focus-visible) figure img,
.home-page .team-card:focus-within figure img{
  filter:saturate(1.08) contrast(1.04) brightness(1.07)
}

/* =========================================================
   PROFILE DIALOG — rebalanced for the approved content

   The panel used to carry six blocks: eyebrow, name, practice line,
   bio, a three-column meta row and a row of social buttons. Four of
   those were invented for layout. What is left is the client's own
   content — number and rank, name, biography, focus areas — and the
   biographies are roughly twice as long as the placeholders they
   replace, so the vertical rhythm is set for a body of text rather
   than for a stack of short rows.

   The measure opens to 54ch (the bio is the panel's main event now,
   not one paragraph among many), and the focus areas keep the rule
   above them that the meta row used to provide, so the panel still
   reads as two parts rather than one long column.
   ========================================================= */
.person-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* A grid item will not shrink below its content unless told to, so
     without this the body pushes the panel past its own max-height and
     overflow:hidden clips the last row of chips instead of the body
     scrolling. Only bites where the panel is stacked and short. */
  min-height:0
}

.person-bio{
  max-width:54ch;
  line-height:1.75;
  opacity:.82
}

.person-focus{
  margin-top:clamp(1.5rem,2.6vw,2.2rem);
  padding-top:clamp(1.3rem,2.2vw,1.8rem);
  border-top:1px solid rgba(61,45,32,.18)
}

/* With four blocks instead of six the panel no longer needs to run to
   44rem, and a shorter panel keeps the portrait from stretching. */
.person-panel{max-height:min(88svh,38rem)}

@media (max-width:820px){
  /* Stacked, the body scrolls under a fixed portrait, so it goes back to
     flowing from the top rather than centring in the leftover space.

     The rows have to be declared for that to work: a grid sizes its rows
     to their content, so with both rows on auto the panel grew past its
     own max-height and overflow:hidden cut the last row of chips off
     instead of the body scrolling. minmax(0, 1fr) hands the body exactly
     what is left under the portrait and lets it scroll inside that. */
  .person-panel{
    max-height:92svh;
    grid-template-rows:auto minmax(0, 1fr)
  }
  .person-body{justify-content:flex-start}
}