:root {
    --ink: #020713;
    --navy: #06163b;
    --blue: #127cff;
    --cyan: #34e4ee;
    --violet: #a76dff;
    --ice: #eef4fb;
    --line: #77b8ff40
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--ink);
    color: var(--ice);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden
}

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

.site-nav {
    z-index: 50;
    background: linear-gradient(#010716cc, #0000);
    border-bottom: 1px solid #ffffff26;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 0 5vw;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}

.nav-logo {
    display: none
}

.site-nav nav {
    text-transform: uppercase;
    letter-spacing: .2em;
    gap: 4.5vw;
    font-size: 11px;
    font-weight: 700;
    display: flex
}

.site-nav nav a {
    transition: all .25s
}

.site-nav nav a:hover {
    color: var(--cyan)
}

.menu-button {
    display: none
}

.nav-contact {
    letter-spacing: .16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cyan);
    padding-bottom: 7px;
    font-size: 10px;
    position: absolute;
    top: 39px;
    right: 4vw
}

.cinema-hero {
    background: #020918;
    height: 100vh;
    min-height: 720px;
    position: relative;
    overflow: hidden
}

.hero-bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    animation: 18s ease-in-out infinite alternate heroZoom;
    position: absolute;
    inset: 0;
    transform: scale(1.08)
}

.hero-overlay {
    background: linear-gradient(#01051247, #01061405 45%, #010512d9), linear-gradient(90deg, #00051273, #0000 45%, #00051233);
    position: absolute;
    inset: 0
}

.hero-scan {
    mix-blend-mode: screen;
    background: repeating-linear-gradient(90deg, #0000 0 calc(12.5% - 1px), #43a9ff14 12.5%);
    position: absolute;
    inset: 0
}

.hero-center {
    text-align: center;
    text-shadow: 0 4px 35px #000;
    animation: 1.2s both fadeUp;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.hero-mark {
    letter-spacing: -.08em;
    border: 6px solid #fff;
    border-radius: 50%;
    place-items: center;
    width: 190px;
    height: 190px;
    margin: auto;
    font-size: 85px;
    font-weight: 200;
    display: grid;
    box-shadow: 0 0 40px #2dd2ff59, inset 0 0 35px #875aff40
}

.hero-center h1 {
    letter-spacing: .28em;
    margin: 24px 0 4px;
    font-size: clamp(52px, 7vw, 105px);
    font-weight: 300;
    transform: translate(.14em)
}

.hero-center p {
    letter-spacing: .65em;
    margin: 0;
    font-size: 14px;
    transform: translate(.3em)
}

.hero-tagline {
    text-align: center;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: clamp(22px, 2.3vw, 37px);
    line-height: 1.25;
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translate(-50%)
}

.hero-tagline em {
    color: #8feaff
}

.hero-location {
    letter-spacing: .2em;
    font-size: 8px;
    position: absolute;
    bottom: 42px;
    right: 4vw
}

.hero-dots {
    gap: 18px;
    display: flex;
    position: absolute;
    bottom: 38px;
    left: 4vw
}

.hero-dots span {
    opacity: .45;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 9px;
    height: 9px
}

.hero-dots .active {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan);
    opacity: 1
}

.hero-scroll {
    transform-origin: 100%;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 8px;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: rotate(90deg)translateY(-50%)
}

.section {
    padding: 130px 7vw
}

.chapter {
    letter-spacing: .22em;
    color: #6380a9;
    font-size: 10px
}

.chapter.light {
    color: #98b6d8
}

.stats {
    border-top: 1px solid #9eb0c2;
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

.stats article {
    border-right: 1px solid #9eb0c2;
    padding: 38px 5vw 10px 0
}

.stats article+article {
    padding-left: 5vw
}

.stats article:last-child {
    border-right: 0
}

.stats strong {
    color: #075fb0;
    font-size: clamp(60px, 7vw, 118px);
    font-weight: 300
}

.stats p {
    color: #576b82;
    max-width: 330px;
    line-height: 1.65
}

.capabilities {
    background: radial-gradient(circle at 100% 20%, #102c6d, #0000 35%), #020713
}

.capabilities h2,
.portfolio h2,
.impact h2,
.insights h2,
.contact h2 {
    letter-spacing: -.065em;
    margin: 60px 0 90px;
    font-size: clamp(57px, 7.6vw, 124px);
    font-weight: 300;
    line-height: .91
}

.capabilities h2 em,
.portfolio h2 em,
.insights h2 em,
.contact h2 em {
    color: #8bdcf9;
    font-family: Georgia, serif;
    font-weight: 400
}

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

.capability {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 70px 1.2fr 1fr 65px;
    align-items: center;
    gap: 30px;
    padding: 35px 0;
    transition: all .3s;
    display: grid
}

.capability:hover {
    background: linear-gradient(90deg, #23b4ff14, #0000);
    padding-left: 18px
}

.capability>span {
    color: #6e88aa;
    font-size: 10px
}

.capability h3 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 55px);
    font-weight: 300
}

.capability p {
    color: #8ea0b9;
    line-height: 1.65
}

.capability button {
    width: 52px;
    height: 52px;
    color: var(--cyan);
    background: 0 0;
    border: 1px solid #58cceb;
    border-radius: 50%;
    font-size: 22px
}

.portfolio-head {
    grid-template-columns: 1.45fr .55fr;
    align-items: end;
    gap: 8vw;
    display: grid
}

.portfolio-head p {
    color: #687b91;
    padding-bottom: 65px;
    line-height: 1.7
}

.tabs {
    border-bottom: 1px solid #9aabba;
    gap: 4vw;
    display: flex
}

.tabs button {
    color: #627388;
    text-transform: uppercase;
    letter-spacing: .13em;
    background: 0 0;
    border: 0;
    padding: 20px 0;
    font-size: 10px
}

.tabs button.active {
    color: #066cb4;
    border-bottom: 3px solid #0c8fd4
}

.portfolio-stage {
    border: 1px solid #a8b7c5;
    grid-template-columns: 1.55fr .45fr;
    min-height: 610px;
    margin-top: 45px;
    display: grid
}

.portfolio-art {
    background: #03102c;
    position: relative;
    overflow: hidden
}

.portfolio-art img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 1s
}

.portfolio-stage:hover img {
    transform: scale(1.04)
}

.art-glow {
    background: linear-gradient(#0000, #38208e8c);
    height: 40%;
    position: absolute;
    inset: auto 0 0
}

.portfolio-copy {
    color: #fff;
    background: #061b44;
    flex-direction: column;
    padding: 75px 45px;
    display: flex
}

.portfolio-copy>span {
    letter-spacing: .2em;
    color: #8dadcf;
    font-size: 8px
}

.portfolio-copy h3 {
    color: #a9e8ff;
    font-family: Georgia, serif;
    font-size: 44px;
    font-weight: 400
}

.portfolio-copy ul {
    margin: 30px 0;
    padding: 0;
    list-style: none
}

.portfolio-copy li {
    border-top: 1px solid var(--line);
    color: #a2b4ca;
    padding: 18px 0
}

.portfolio-copy a {
    border-bottom: 1px solid var(--cyan);
    text-transform: uppercase;
    letter-spacing: .13em;
    width: max-content;
    margin-top: auto;
    padding-bottom: 10px;
    font-size: 10px
}

.impact {
    background: linear-gradient(120deg, #061739, #020713)
}

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

.impact-grid article {
    min-height: 680px;
    padding: 60px;
    position: relative;
    overflow: hidden
}

.impact-grid article+article {
    border-left: 1px solid var(--line)
}

.impact-grid article>span {
    color: #6382a8;
    font-size: 10px
}

.impact-orb {
    height: 230px;
    margin: 60px 0 35px;
    position: relative
}

.impact-orb:before,
.impact-orb:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.impact-orb:before {
    border: 1px solid;
    width: 190px;
    height: 190px;
    box-shadow: 0 0 80px
}

.impact-orb:after {
    filter: blur(16px);
    background: currentColor;
    width: 90px;
    height: 90px
}

.impact-orb.cyan {
    color: #23d9eb
}

.impact-orb.violet {
    color: #9255ef
}

.impact h2 {
    margin: 0 0 25px;
    font-size: clamp(43px, 5vw, 78px)
}

.impact p {
    color: #8fa2bc;
    max-width: 520px;
    line-height: 1.7
}

.impact a {
    color: var(--cyan);
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-top: 35px;
    font-size: 10px;
    display: block
}

.insights-title {
    grid-template-columns: 1fr auto;
    align-items: end;
    display: grid
}

.insights-title .chapter {
    grid-column: 1/-1
}

.insights-title h2 {
    margin: 60px 0
}

.insights-title>a {
    text-transform: uppercase;
    letter-spacing: .12em;
    border-bottom: 1px solid #166fae;
    margin-bottom: 70px;
    padding-bottom: 8px;
    font-size: 10px
}

.news-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 25px;
    display: grid
}

.news-visual {
    color: #9defff;
    letter-spacing: .2em;
    background: #071b43;
    align-items: flex-end;
    height: 300px;
    padding: 20px;
    font-size: 9px;
    display: flex;
    position: relative;
    overflow: hidden
}

.feature-news .news-visual {
    height: 430px
}

.news-visual:before,
.news-visual:after {
    content: "";
    filter: blur(4px);
    border-radius: 50%;
    position: absolute
}

.v1:before {
    border: 55px solid #0bcfea;
    width: 430px;
    height: 430px;
    top: -70px;
    right: -90px;
    box-shadow: 0 0 80px #0a6cff
}

.v1:after {
    background: #8346ec;
    width: 240px;
    height: 240px;
    bottom: -130px;
    left: 20px
}

.v2:before {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(135deg, #05dcea, #1537a7);
    width: 240px;
    height: 240px;
    top: 35px;
    left: 40px
}

.v3:before {
    border: 40px solid #9b66ff;
    width: 200px;
    height: 200px;
    top: 35px;
    right: 20px
}

.news-grid small {
    color: #35709e;
    letter-spacing: .16em;
    margin-top: 24px;
    font-size: 8px;
    display: block
}

.news-grid h3 {
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25
}

.news-grid p {
    color: #6f8195;
    font-size: 11px
}

.contact {
    background: radial-gradient(circle at 22%, #173d8c, #0000 31%), #020713;
    grid-template-columns: .65fr 1.35fr;
    align-items: center;
    min-height: 690px;
    display: grid;
    position: relative
}

.contact-mark {
    letter-spacing: -.1em;
    color: #b4f4ff;
    border: 5px solid #fff;
    border-radius: 50%;
    place-items: center;
    width: 320px;
    height: 320px;
    font-size: 130px;
    display: grid;
    box-shadow: 0 0 80px #0756bc
}

.contact h2 {
    margin: 45px 0
}

.contact-copy p {
    color: #94a8c1
}

.contact-copy>a {
    color: var(--cyan);
    border-bottom: 1px solid var(--cyan);
    letter-spacing: .08em;
    padding: 15px 0;
    font-size: 14px;
    display: inline-block
}

footer {
    border-top: 1px solid var(--line);
    background: #01040c;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 40px;
    padding: 55px 5vw;
    display: grid
}

footer img {
    border: 1px solid var(--line);
    width: 230px
}

footer div {
    text-transform: uppercase;
    letter-spacing: .14em;
    gap: 12px;
    font-size: 10px;
    display: grid
}

footer p {
    color: #8b9ab0;
    line-height: 1.6
}

footer small {
    color: #3f536d;
    border-top: 1px solid #ffffff14;
    grid-column: 1/-1;
    padding-top: 25px
}

.concierge-launch {
    z-index: 70;
    border: 1px solid var(--cyan);
    width: 60px;
    height: 60px;
    color: var(--cyan);
    background: #061b45;
    border-radius: 50%;
    font-size: 20px;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 0 0 35px #0878b877
}

.concierge {
    z-index: 69;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #020c23f5;
    border: 1px solid #3fc6e7;
    width: min(390px, 100vw - 34px);
    padding: 32px;
    position: fixed;
    bottom: 100px;
    right: 25px
}

.concierge>button {
    background: 0 0;
    border: 0;
    font-size: 28px;
    position: absolute;
    top: 8px;
    right: 12px
}

.concierge small {
    color: var(--cyan);
    letter-spacing: .18em
}

.concierge h3 {
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400
}

.concierge p {
    color: #91a4be;
    line-height: 1.6
}

.concierge a {
    color: var(--cyan);
    border-bottom: 1px solid var(--cyan);
    padding-bottom: 7px;
    font-size: 11px
}

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

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

@keyframes heroZoom {
    to {
        transform: scale(1.18)
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -42%)
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@media (width<=1000px) {
    .site-nav nav {
        gap: 2.5vw
    }

    .nav-contact {
        display: none
    }

    .intro-lead {
        font-size: 7vw
    }

    .portfolio-stage,
    .contact {
        grid-template-columns: 1fr
    }

    .portfolio-copy {
        min-height: 380px
    }

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

    .feature-news {
        grid-column: 1/-1
    }

    .contact-mark {
        margin: 0 auto 70px
    }

    .contact-copy {
        text-align: center
    }

    .capability {
        grid-template-columns: 50px 1fr 60px
    }

    .capability p {
        grid-column: 2/3
    }

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

    .impact-grid article+article {
        border-left: 0;
        border-top: 1px solid var(--line)
    }
}

@media (width<=700px) {
    .site-nav {
        justify-content: space-between;
        height: 78px;
        padding: 0 18px
    }

    .nav-logo {
        width: 150px;
        height: 48px;
        display: block
    }

    .nav-logo img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .menu-button {
        background: 0 0;
        border: 0;
        gap: 6px;
        width: 36px;
        display: grid
    }

    .menu-button i {
        background: #fff;
        height: 1px;
        display: block
    }

    .site-nav nav {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        background: #020918ee;
        flex-direction: column;
        gap: 24px;
        padding: 35px;
        display: none;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0
    }

    .site-nav nav.open {
        display: flex
    }

    .cinema-hero {
        min-height: 650px
    }

    .hero-center {
        top: 46%
    }

    .hero-mark {
        border-width: 4px;
        width: 130px;
        height: 130px;
        font-size: 56px
    }

    .hero-center h1 {
        font-size: 12vw
    }

    .hero-center p {
        font-size: 9px
    }

    .hero-tagline {
        font-size: 20px;
        bottom: 85px
    }

    .hero-location,
    .hero-scroll {
        display: none
    }

    .hero-dots {
        left: 50%;
        transform: translate(-50%)
    }

    .section {
        padding: 85px 20px
    }

    .intro-lead {
        margin: 50px 0 70px;
        font-size: 12vw
    }

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

    .stats article,
    .stats article+article {
        border-bottom: 1px solid #9eb0c2;
        border-right: 0;
        padding: 30px 0
    }

    .capabilities h2,
    .portfolio h2,
    .insights h2,
    .contact h2 {
        font-size: 15vw
    }

    .capability {
        grid-template-columns: 35px 1fr 45px;
        gap: 15px
    }

    .capability p {
        grid-column: 2/-1
    }

    .capability button {
        width: 42px;
        height: 42px
    }

    .portfolio-head {
        grid-template-columns: 1fr
    }

    .portfolio-head p {
        padding-bottom: 30px
    }

    .tabs {
        gap: 30px;
        overflow: auto
    }

    .tabs button {
        white-space: nowrap
    }

    .portfolio-stage {
        min-height: 0
    }

    .portfolio-art {
        min-height: 330px
    }

    .portfolio-copy {
        padding: 45px 25px
    }

    .impact-grid article {
        min-height: 600px;
        padding: 35px 25px
    }

    .impact-orb {
        margin: 40px 0
    }

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

    .feature-news {
        grid-column: auto
    }

    .news-visual,
    .feature-news .news-visual {
        height: 310px
    }

    .insights-title {
        grid-template-columns: 1fr
    }

    .insights-title>a {
        margin-bottom: 40px
    }

    .contact-mark {
        width: 210px;
        height: 210px;
        font-size: 85px
    }

    .contact {
        min-height: 850px
    }

    footer {
        grid-template-columns: 1fr
    }

    .concierge-launch {
        bottom: 16px;
        right: 16px
    }

    .concierge {
        bottom: 90px;
        right: 17px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }

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

.intro-lead {
    letter-spacing: -.018em;
    max-width: 1080px;
    margin: 50px 0 75px;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.25
}

.capabilities h2,
.portfolio h2,
.insights h2,
.contact h2 {
    letter-spacing: -.045em;
    margin: 45px 0 65px;
    font-size: clamp(44px, 5.6vw, 82px);
    line-height: 1
}

.portfolio-head h2 {
    margin: 45px 0
}

.portfolio-head p {
    padding-bottom: 45px
}

.impact-grid article {
    min-height: 590px;
    padding: 48px
}

.impact h2 {
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02
}

.feature-news h3 {
    font-size: 30px
}

.news-grid h3 {
    font-size: 22px
}

.contact {
    min-height: 600px
}

.contact-mark {
    width: 245px;
    height: 245px;
    font-size: 96px
}

@media (width<=700px) {
    .section {
        padding: 70px 20px
    }

    .intro-lead {
        margin: 42px 0 58px;
        font-size: clamp(26px, 7.5vw, 36px)
    }

    .capabilities h2,
    .portfolio h2,
    .insights h2,
    .contact h2 {
        font-size: clamp(38px, 10.5vw, 52px)
    }

    .impact h2 {
        font-size: 38px
    }

    .impact-grid article {
        min-height: 520px
    }

    .contact-mark {
        width: 180px;
        height: 180px;
        font-size: 68px
    }
}

img {
    max-width: 100%;
    height: auto
}

main,
.section,
header,
footer {
    max-width: 100%
}

.portfolio-head>*,
.portfolio-stage>*,
.contact>*,
.news-grid>* {
    min-width: 0
}

@media (width<=700px) {
    html {
        scroll-padding-top: 72px
    }

    body.menu-open {
        overflow: hidden
    }

    .site-nav {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        background: #020713f0;
        border-bottom-color: #77b8ff38;
        height: 72px;
        padding: 8px 14px;
        position: fixed
    }

    .nav-logo {
        width: 138px;
        height: 48px;
        overflow: hidden
    }

    .nav-logo img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .menu-button {
        border: 1px solid #77b8ff3d;
        border-radius: 50%;
        flex-direction: column;
        order: 2;
        justify-content: center;
        align-items: center;
        gap: 7px;
        width: 46px;
        height: 46px;
        padding: 0;
        display: flex
    }

    .menu-button i {
        width: 20px;
        transition: transform .25s, opacity .25s
    }

    .menu-button.active i:first-child {
        transform: translateY(4px)rotate(45deg)
    }

    .menu-button.active i:last-child {
        transform: translateY(-4px)rotate(-45deg)
    }

    .site-nav nav {
        background: #020713fa;
        gap: 0;
        height: calc(100svh - 72px);
        padding: 30px 24px 44px;
        top: 72px;
        overflow-y: auto
    }

    .site-nav nav a {
        letter-spacing: .16em;
        border-bottom: 1px solid #77b8ff2e;
        align-items: center;
        min-height: 60px;
        font-size: 13px;
        display: flex
    }

    .cinema-hero {
        background: radial-gradient(circle at 50% 35%, #09255c, #020713 72%);
        height: 100svh;
        min-height: 580px;
        max-height: 820px;
        padding-top: 72px
    }

    .hero-bg {
        object-fit: contain;
        object-position: center 40%;
        width: 100%;
        height: calc(100% - 72px);
        animation: none;
        inset: 72px 0 0;
        transform: none
    }

    .hero-overlay {
        background: linear-gradient(#0207131f, #02071305 48%, #020713f0 86%)
    }

    .hero-scan {
        opacity: .6;
        background-size: 25% 100%
    }

    .hero-center {
        top: 43%
    }

    .hero-mark {
        background: #02071333;
        border-width: 3px;
        width: 104px;
        height: 104px;
        font-size: 42px
    }

    .hero-tagline {
        white-space: normal;
        width: calc(100% - 40px);
        margin: 0;
        font-size: clamp(21px, 6.3vw, 28px);
        line-height: 1.25;
        bottom: 74px
    }

    .hero-dots {
        gap: 13px;
        bottom: 28px
    }

    .hero-dots span {
        width: 8px;
        height: 8px
    }

    .section {
        padding: 64px 20px
    }

    .chapter {
        font-size: 9px;
        line-height: 1.6
    }

    .intro-lead {
        letter-spacing: -.015em;
        margin: 36px 0 50px;
        font-size: clamp(25px, 7vw, 34px);
        line-height: 1.28
    }

    .stats article,
    .stats article+article {
        padding: 26px 0
    }

    .stats strong {
        font-size: 52px
    }

    .stats p {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.6
    }

    .capabilities h2,
    .portfolio h2,
    .insights h2,
    .contact h2 {
        margin: 34px 0 48px;
        font-size: clamp(38px, 10vw, 50px);
        line-height: 1.03
    }

    .capability {
        grid-template-columns: 28px minmax(0, 1fr) 44px;
        gap: 12px;
        padding: 23px 0
    }

    .capability:hover {
        padding-left: 0
    }

    .capability h3 {
        font-size: 27px;
        line-height: 1.15
    }

    .capability p {
        grid-column: 2/-1;
        margin: 4px 0 0;
        font-size: 14px
    }

    .capability button {
        width: 44px;
        height: 44px
    }

    .portfolio-head {
        display: block
    }

    .portfolio-head p {
        padding: 0 0 24px;
        font-size: 15px;
        line-height: 1.65
    }

    .tabs {
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        gap: 24px;
        width: 100%;
        overflow-x: auto
    }

    .tabs button {
        flex: none;
        min-height: 48px;
        padding: 14px 0
    }

    .portfolio-stage {
        margin-top: 28px;
        display: block
    }

    .portfolio-art {
        aspect-ratio: 16/10;
        min-height: 0
    }

    .portfolio-art img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .portfolio-copy {
        min-height: 330px;
        padding: 36px 24px
    }

    .portfolio-copy h3 {
        margin: 20px 0;
        font-size: 35px
    }

    .portfolio-copy li {
        padding: 15px 0
    }

    .impact-grid {
        margin-top: 35px
    }

    .impact-grid article {
        min-height: 0;
        padding: 34px 24px 42px
    }

    .impact-orb {
        height: 165px;
        margin: 26px 0
    }

    .impact-orb:before {
        width: 138px;
        height: 138px
    }

    .impact-orb:after {
        width: 66px;
        height: 66px
    }

    .impact h2 {
        font-size: 38px
    }

    .impact p {
        font-size: 14px
    }

    .impact a {
        align-items: center;
        min-height: 44px;
        display: flex
    }

    .insights-title {
        display: block
    }

    .insights-title>a {
        align-items: center;
        min-height: 44px;
        margin: 0 0 34px;
        display: inline-flex
    }

    .news-grid {
        display: block
    }

    .news-grid article {
        margin-bottom: 42px
    }

    .news-visual,
    .feature-news .news-visual {
        aspect-ratio: 16/10;
        height: auto
    }

    .news-grid h3,
    .feature-news h3 {
        font-size: 24px
    }

    .news-grid small {
        margin-top: 18px
    }

    .contact {
        text-align: center;
        min-height: 0;
        display: block
    }

    .contact-mark {
        border-width: 3px;
        width: 150px;
        height: 150px;
        margin: 0 auto 46px;
        font-size: 56px
    }

    .contact-copy>a {
        overflow-wrap: anywhere;
        max-width: 100%;
        font-size: 12px
    }

    footer {
        gap: 30px;
        padding: 44px 20px
    }

    footer img {
        aspect-ratio: 16/9;
        object-fit: cover;
        width: 190px
    }

    footer a {
        align-items: center;
        min-height: 38px;
        display: flex
    }

    .concierge-launch {
        width: 54px;
        height: 54px
    }

    .concierge {
        width: auto;
        max-height: calc(100svh - 105px);
        padding: 26px;
        bottom: 82px;
        left: 16px;
        right: 16px;
        overflow-y: auto
    }

    .concierge h3 {
        font-size: 24px
    }
}

.service-platform {
    border-top: 1px solid var(--line);
    margin-top: 84px
}

.service-platform-head {
    color: #91a7c5;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    padding: 30px 0;
    display: flex
}

.service-platform-head>span {
    letter-spacing: .2em;
    color: var(--cyan);
    font-size: 9px
}

.service-platform-head p {
    color: #d7e6f7;
    margin: 0;
    font-family: Georgia, serif;
    font-size: 22px
}

.service-grid {
    border: 1px solid var(--line);
    border-bottom: 0;
    border-right: 0;
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

.service-grid article {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(145deg, #0b2b5b5c, #0207131a);
    min-height: 235px;
    padding: 30px;
    transition: background .3s, transform .3s
}

.service-grid article:hover {
    background: linear-gradient(145deg, #145ba357, #02071329);
    transform: translateY(-3px)
}

.service-grid small {
    letter-spacing: .18em;
    color: #55799f;
    font-size: 9px
}

.service-grid h3 {
    margin: 35px 0 15px;
    font-size: 24px;
    font-weight: 400
}

.service-grid p {
    color: #8ea0b9;
    margin: 0;
    font-size: 14px;
    line-height: 1.65
}

.partnership-intro {
    grid-template-columns: 1.3fr .7fr;
    align-items: end;
    gap: 8vw;
    display: grid
}

.partnership h2 {
    letter-spacing: -.045em;
    margin: 45px 0 65px;
    font-size: clamp(44px, 5.6vw, 82px);
    font-weight: 300;
    line-height: 1
}

.partnership h2 em {
    color: #246bac;
    font-family: Georgia, serif;
    font-weight: 400
}

.partnership-intro>p {
    color: #60748b;
    padding-bottom: 57px;
    line-height: 1.75
}

.partnership-steps {
    border-top: 1px solid #9eb0c2;
    border-left: 1px solid #9eb0c2;
    grid-template-columns: repeat(4, 1fr);
    display: grid
}

.partnership-steps article {
    border-bottom: 1px solid #9eb0c2;
    border-right: 1px solid #9eb0c2;
    min-height: 300px;
    padding: 28px
}

.partnership-steps span {
    color: #3183bf;
    letter-spacing: .15em;
    font-size: 9px
}

.partnership-steps h3 {
    margin: 42px 0 18px;
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: 400
}

.partnership-steps p {
    color: #63778e;
    font-size: 14px;
    line-height: 1.7
}

.partner-principles {
    border-top: 1px solid #9eb0c2;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 55px;
    display: grid
}

.partner-principles p {
    border-right: 1px solid #9eb0c2;
    gap: 10px;
    margin: 0;
    padding: 28px 35px 10px 0;
    display: grid
}

.partner-principles p+p {
    padding-left: 35px
}

.partner-principles p:last-child {
    border-right: 0
}

.partner-principles strong {
    font-size: 14px;
    font-weight: 500
}

.partner-principles span {
    color: #6a7e93;
    font-size: 13px;
    line-height: 1.55
}

@media (width<=1000px) {

    .service-grid,
    .partnership-steps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width<=700px) {
    .service-platform {
        margin-top: 58px
    }

    .service-platform-head {
        display: block
    }

    .service-platform-head p {
        margin-top: 12px;
        font-size: 19px
    }

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

    .service-grid article {
        min-height: 0;
        padding: 26px
    }

    .service-grid h3 {
        margin: 22px 0 12px;
        font-size: 23px
    }

    .partnership-intro {
        display: block
    }

    .partnership h2 {
        margin: 34px 0;
        font-size: clamp(38px, 10vw, 50px)
    }

    .partnership-intro>p {
        padding: 0 0 35px
    }

    .partnership-steps {
        grid-template-columns: 1fr
    }

    .partnership-steps article {
        min-height: 0;
        padding: 26px
    }

    .partnership-steps h3 {
        margin: 24px 0 13px
    }

    .partner-principles {
        grid-template-columns: 1fr
    }

    .partner-principles p,
    .partner-principles p+p {
        border-bottom: 1px solid #9eb0c2;
        border-right: 0;
        padding: 24px 0
    }
}

@media (width<=400px) {
    .section {
        padding-inline: 16px
    }

    .site-nav {
        padding-inline: 10px
    }

    .nav-logo {
        width: 126px
    }

    .cinema-hero {
        min-height: 540px
    }

    .hero-mark {
        width: 88px;
        height: 88px;
        font-size: 36px
    }

    .hero-tagline {
        font-size: 21px
    }

    .capability h3 {
        font-size: 23px
    }

    .capability p {
        font-size: 13px
    }

    .portfolio-copy {
        padding-inline: 20px
    }
}

.cinema-hero {
    --mx: 0;
    --my: 0;
    isolation: isolate
}

.webgl-backdrop {
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .84;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hero-bg {
    z-index: 0;
    transform: scale(1.08) translate(calc(var(--mx)*-7px), calc(var(--my)*-5px));
    transition: transform .35s ease-out
}

.hero-overlay {
    z-index: 2
}

.hero-scan {
    z-index: 3
}

.hero-scan:after {
    content: "";
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    height: 1px;
    box-shadow: 0 0 20px var(--cyan);
    opacity: .5;
    animation: 7s linear infinite scanDown;
    position: absolute;
    top: -2px;
    left: 0;
    right: 0
}

.hero-center,
.hero-tagline,
.hero-location,
.hero-dots,
.hero-scroll {
    z-index: 4
}

.hero-center {
    transform: translate(calc(-50% + var(--mx)*12px), calc(-50% + var(--my)*9px));
    transition: transform .35s ease-out
}

.hero-mark {
    animation: 4.8s ease-in-out infinite markPulse;
    position: relative
}

.hero-mark:after {
    content: "";
    border: 1px solid #56e0ff59;
    border-left-color: #0000;
    border-radius: 50%;
    animation: 10s linear infinite orbit;
    position: absolute;
    inset: -20px
}

.portfolio-stage {
    animation: .65s cubic-bezier(.2, .8, .2, 1) both stageIn
}

.impact-orb:before {
    animation: 4s ease-in-out infinite orbBreathe
}

.impact-orb:after {
    animation: 3s ease-in-out infinite alternate orbCore
}

.news-visual:before {
    animation: 8s ease-in-out infinite alternate shapeDrift
}

.news-visual:after {
    animation: 11s ease-in-out infinite alternate-reverse shapeDrift
}

.concierge-launch {
    animation: 2.8s ease-in-out infinite conciergeGlow
}

@keyframes scanDown {
    to {
        top: 100%
    }
}

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

@keyframes markPulse {
    50% {
        box-shadow: 0 0 70px #2dd2ff8c, inset 0 0 48px #875aff59
    }
}

@keyframes stageIn {
    0% {
        opacity: .35;
        transform: translateY(15px)
    }
}

@keyframes orbBreathe {
    50% {
        opacity: .72;
        transform: translate(-50%, -50%)scale(1.08)
    }
}

@keyframes orbCore {
    to {
        filter: blur(23px);
        transform: translate(-50%, -50%)scale(1.18)
    }
}

@keyframes shapeDrift {
    to {
        transform: translate(13px, -9px)rotate(4deg)
    }
}

@keyframes conciergeGlow {
    50% {
        transform: translateY(-3px);
        box-shadow: 0 0 48px #0878b8aa
    }
}

@supports (animation-timeline:view()) {

    .capability,
    .impact-grid article,
    .news-grid article {
        animation: linear both sectionRise;
        animation-timeline: view();
        animation-range: entry 5% cover 34%
    }

    .portfolio-art img {
        animation: linear both imageDepth;
        animation-timeline: view();
        animation-range: entry exit
    }
}

@keyframes sectionRise {
    0% {
        opacity: .25;
        transform: translateY(44px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes imageDepth {
    0% {
        transform: scale(1.1)translateY(-2%)
    }

    to {
        transform: scale(1.02)translateY(2%)
    }
}

@media (width<=700px) {
    .webgl-backdrop {
        opacity: .48
    }

    .hero-bg {
        transform: none
    }

    .hero-center {
        transform: translate(-50%, -50%)
    }

    .hero-mark:after {
        inset: -12px
    }

    .news-visual:before,
    .news-visual:after {
        animation-duration: 12s
    }
}

@media (prefers-reduced-motion:reduce) {
    .webgl-backdrop {
        opacity: .35
    }

    .hero-center {
        transform: translate(-50%, -50%) !important
    }

    .hero-bg {
        transform: none !important
    }
}

.motion-particles {
    opacity: .72;
    filter: saturate(1.3)
}

.hero-particles .hero-scan {
    background: radial-gradient(circle at 50% 45%, #0000 0 24%, #46bcff0d 65%, #0000)
}

.hero-particles .hero-bg {
    animation: 14s ease-in-out infinite alternate particleDepth
}

.hero-particles .hero-overlay {
    background: linear-gradient(#01051240, #0000 45%, #010512e0), radial-gradient(circle, #0000 22%, #01041285 92%)
}

.motion-prism {
    opacity: .67;
    filter: saturate(1.4)
}

.hero-prism .hero-scan {
    background: repeating-linear-gradient(120deg, #0000 0 90px, #60d6ff13 91px), repeating-linear-gradient(30deg, #0000 0 120px, #8f5cff0f 121px);
    animation: 12s linear infinite prismShift
}

.hero-prism .hero-bg {
    animation: 12s ease-in-out infinite alternate prismDepth
}

.hero-prism .hero-overlay {
    background: linear-gradient(#01051233, #0000 40%, #010512e6), linear-gradient(100deg, #16b9ff1f, #0000 35%, #8036ff21)
}

@keyframes particleDepth {
    to {
        transform: scale(1.14) translate(calc(var(--mx)*-10px), calc(var(--my)*-7px));
        filter: saturate(1.1)
    }
}

@keyframes prismDepth {
    to {
        transform: scale(1.16) translate(calc(var(--mx)*-8px), calc(var(--my)*-6px));
        filter: hue-rotate(8deg)saturate(1.12)
    }
}

@keyframes prismShift {
    to {
        background-position: 180px 0, -160px 0
    }
}

@media (width<=700px) {

    .motion-particles,
    .motion-prism {
        opacity: .42
    }

    .hero-particles .hero-bg,
    .hero-prism .hero-bg {
        animation: none
    }
}

.site-nav {
    background: linear-gradient(#010716f0, #01071657 72%, #0000);
    justify-content: center
}

.nav-logo {
    width: 106px;
    height: 76px;
    display: block;
    position: absolute;
    top: 12px;
    left: 3.5vw;
    overflow: hidden
}

.nav-logo img {
    object-fit: contain;
    filter: drop-shadow(0 0 12px #1b96ff7a);
    width: 100%;
    height: 100%
}

.cinema-hero {
    background: radial-gradient(circle at 50% 42%, #062a62 0, #020b20 44%, #01040d 86%)
}

.hero-bg {
    object-fit: contain;
    object-position: center 45%;
    transform: scale(.94) translate(calc(var(--mx)*-7px), calc(var(--my)*-5px));
    filter: saturate(1.08)contrast(1.04);
    animation: 12s ease-in-out infinite alternate cinemaLogoFloat
}

.hero-overlay {
    background: linear-gradient(#0105122e, #01061405 52%, #010512f0), linear-gradient(90deg, #00051259, #0000 45%, #00051240)
}

.hero-tagline {
    text-align: left;
    text-shadow: 0 3px 25px #000, 0 0 22px #0078ff59;
    bottom: 54px;
    left: 5vw;
    transform: none
}

.portfolio-art {
    background: radial-gradient(circle at 50% 42%, #073777, #010612 72%)
}

.portfolio-art img {
    object-fit: contain;
    filter: saturate(1.08)contrast(1.04)
}

.contact {
    background: radial-gradient(circle at 22%, #123d88 0, #0000 34%), #020713
}

.contact-logo {
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 0 34px #1988ff7a);
    width: min(360px, 28vw);
    margin-inline: auto;
    display: block
}

footer img {
    aspect-ratio: 1;
    object-fit: contain;
    background: #010817
}

@keyframes cinemaLogoFloat {
    to {
        transform: scale(.98) translate(calc(var(--mx)*-10px), calc(var(--my)*-7px - 8px));
        filter: saturate(1.14)contrast(1.07)drop-shadow(0 0 12px #007fff33)
    }
}

@media (width<=1000px) {
    .nav-logo {
        width: 86px;
        left: 2.4vw
    }

    .hero-tagline {
        left: 4vw
    }

    .contact-logo {
        width: min(300px, 56vw)
    }
}

@media (width<=700px) {
    .nav-logo {
        width: 112px;
        height: 54px;
        position: static
    }

    .nav-logo img {
        object-fit: contain
    }

    .hero-bg {
        object-fit: contain;
        object-position: center 34%;
        height: calc(100% - 72px);
        animation: none;
        inset: 72px 0 0;
        transform: none
    }

    .hero-overlay {
        background: linear-gradient(#0207130f, #02071305 52%, #020713f2 86%)
    }

    .hero-tagline {
        text-align: center;
        bottom: 70px;
        left: 50%;
        transform: translate(-50%)
    }

    .portfolio-art img {
        object-fit: contain
    }

    .contact-logo {
        width: 180px;
        margin: 0 auto 44px
    }

    footer img {
        aspect-ratio: 1;
        object-fit: contain;
        width: 170px
    }
}

.capability {
    grid-template-columns: minmax(260px, 1fr) minmax(300px, .8fr) 65px;
    gap: clamp(28px, 5vw, 90px)
}

.capability p {
    max-width: 520px;
    margin: 0
}

.service-grid article {
    min-height: 215px;
    padding: 34px 30px
}

.service-grid h3 {
    margin: 8px 0 18px
}

.service-grid p {
    max-width: 360px
}

.partnership-steps article {
    min-height: 250px;
    padding: 36px 30px
}

.partnership-steps h3 {
    margin: 8px 0 24px
}

.partnership-steps p {
    margin: 0
}

.impact-orb {
    margin-top: 28px
}

.chapter {
    align-items: center;
    gap: 18px;
    display: flex
}

.chapter:after {
    content: "";
    opacity: .45;
    background: currentColor;
    width: 54px;
    height: 1px
}

@media (width<=1000px) {
    .capability {
        grid-template-columns: 1fr 60px
    }

    .capability p {
        grid-column: 1/2
    }
}

@media (width<=700px) {
    .chapter {
        gap: 12px
    }

    .chapter:after {
        width: 32px
    }

    .capability {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 14px
    }

    .capability h3 {
        grid-column: 1/2
    }

    .capability p {
        grid-column: 1/-1
    }

    .service-grid article {
        padding: 28px 24px
    }

    .partnership-steps article {
        padding: 30px 24px
    }
}

.intro {
    color: #f4f8ff;
    background: radial-gradient(circle at 88% 12%, #147cff4d, #0000 35%), linear-gradient(135deg, #071d49 0%, #020b22 72%)
}

.intro .chapter {
    color: #77cfff
}

.intro-lead span {
    color: #7be8ff
}

.stats {
    border-color: #94caff57
}

.stats article {
    border-color: #94caff47
}

.stats strong {
    color: #dcecff;
    text-shadow: 0 0 28px #32a1ff5c
}

.stats p {
    color: #aebfd6
}

.portfolio {
    color: #f4f8ff;
    background: radial-gradient(circle at 8% 10%, #268bff38, #0000 32%), linear-gradient(155deg, #08255a 0%, #030d28 66%, #020713 100%)
}

.portfolio .chapter {
    color: #74d9ff
}

.portfolio-head h2 em {
    color: #8eeaff
}

.portfolio-head p {
    color: #aebfd6
}

.tabs {
    border-color: #94caff57
}

.tabs button {
    color: #9bb0ca
}

.tabs button.active {
    color: #a9efff;
    border-color: #35d7f0
}

.portfolio-stage {
    border-color: #94caff52;
    box-shadow: 0 30px 80px #00000040
}

.partnership {
    color: #f4f8ff;
    background: radial-gradient(circle at 90% 14%, #1c89ff45, #0000 34%), linear-gradient(145deg, #09275c, #030e2b 68%, #020713)
}

.partnership .chapter {
    color: #7ce6ff
}

.partnership h2 em {
    color: #8eeaff
}

.partnership-intro>p {
    color: #afc0d7
}

.partnership-steps {
    border-color: #94caff52
}

.partnership-steps article {
    background: linear-gradient(145deg, #0f3a776b, #030e2b2e);
    border-color: #94caff47
}

.partnership-steps h3 {
    color: #edf6ff
}

.partnership-steps p {
    color: #aebfd6
}

.partner-principles {
    border-color: #94caff52
}

.partner-principles p {
    border-color: #94caff42
}

.partner-principles strong {
    color: #eaf5ff
}

.partner-principles span {
    color: #9fb4ce
}

.insights {
    color: #f4f8ff;
    background: radial-gradient(circle at 10% 0, #2897ff38, #0000 30%), linear-gradient(160deg, #071f4c, #030d28 62%, #020713)
}

.insights .chapter {
    color: #75dfff
}

.insights-title h2 em {
    color: #8eeaff
}

.insights-title>a {
    color: #a7efff;
    border-color: #55dff1
}

.news-grid small {
    color: #65c8ef
}

.news-grid h3 {
    color: #edf6ff
}

.news-grid p {
    color: #9baec7
}

.news-visual {
    border: 1px solid #84c7ff33;
    box-shadow: 0 22px 55px #00000038
}

@media (width<=700px) {

    .stats article,
    .stats article+article {
        border-color: #94caff47
    }

    .partner-principles p,
    .partner-principles p+p {
        border-color: #94caff42
    }
}

:root {
    --page-progress: 0;
    --scroll-y: 0px
}

.cinema-progress {
    z-index: 100;
    width: calc(var(--page-progress)*100%);
    pointer-events: none;
    background: linear-gradient(90deg, #168fff, #82f4ff, #e8f5ff);
    height: 2px;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0 16px #38dfff
}

.cinematic-lightfield {
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.cinematic-lightfield i {
    transform-origin: 0;
    filter: blur(.2px);
    opacity: .24;
    background: linear-gradient(90deg, #0000, #73dfffb3, #4070ff4d, #0000);
    width: 150vw;
    height: 1px;
    animation: 9s ease-in-out infinite lightSweep;
    position: absolute;
    top: 45%;
    left: 50%
}

.cinematic-lightfield i:first-child {
    transform: rotate(-19deg)translate(-55%)
}

.cinematic-lightfield i:nth-child(2) {
    animation-delay: -3s;
    transform: rotate(13deg)translate(-58%)
}

.cinematic-lightfield i:nth-child(3) {
    animation-delay: -6s;
    transform: rotate(47deg)translate(-60%)
}

.cinema-frame {
    z-index: 3;
    pointer-events: none;
    border: 1px solid #7fcbff24;
    position: absolute;
    inset: clamp(112px, 10vw, 150px) clamp(20px, 4vw, 70px) clamp(28px, 4vw, 62px)
}

.cinema-frame:before,
.cinema-frame:after {
    content: "";
    opacity: .42;
    border-color: #74e8ff;
    width: 42px;
    height: 42px;
    position: absolute
}

.cinema-frame:before {
    border-top: 1px solid;
    border-left: 1px solid;
    top: -1px;
    left: -1px
}

.cinema-frame:after {
    border-bottom: 1px solid;
    border-right: 1px solid;
    bottom: -1px;
    right: -1px
}

.hero-tagline span,
.hero-tagline em {
    animation: 7s ease-in-out infinite alternate kineticType;
    display: inline-block
}

.hero-tagline em {
    text-shadow: 0 0 22px #52deff59;
    animation-delay: -2.4s
}

.section {
    isolation: isolate;
    position: relative
}

.section:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    transform: translateX(calc((var(--page-progress) - .5)*18%));
    background: linear-gradient(115deg, #0000 0 43%, #58baff06 50%, #0000 57%);
    position: absolute;
    inset: 0
}

.service-grid article,
.partnership-steps article,
.news-grid article {
    transform-style: preserve-3d;
    will-change: transform
}

.service-grid article:hover,
.partnership-steps article:hover {
    transform: perspective(900px)rotateX(1.8deg)rotateY(-1.8deg)translateY(-5px);
    box-shadow: 0 25px 55px #00000038, inset 0 0 45px #2796ff0d
}

.portfolio-stage {
    transform-style: preserve-3d
}

.portfolio-art:after {
    content: "";
    background: linear-gradient(110deg, #0000 35%, #acebff33 49%, #0000 62%);
    animation: 8s ease-in-out infinite portfolioScan;
    position: absolute;
    inset: 0;
    transform: translate(-110%)
}

@keyframes lightSweep {

    0%,
    to {
        opacity: .1;
        filter: blur(.4px)
    }

    50% {
        opacity: .42;
        filter: blur()
    }
}

@keyframes kineticType {
    to {
        letter-spacing: .018em;
        transform: translateY(-2px)
    }
}

@keyframes portfolioScan {

    45%,
    to {
        transform: translate(110%)
    }
}

@media (width<=700px) {
    .cinema-frame {
        inset: 92px 14px 24px
    }

    .cinematic-lightfield {
        opacity: .5
    }

    .service-grid article:hover,
    .partnership-steps article:hover,
    .section:before {
        transform: none
    }

    .hero-tagline span,
    .hero-tagline em {
        animation-duration: 9s
    }
}

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

    .cinematic-lightfield i,
    .hero-tagline span,
    .hero-tagline em,
    .portfolio-art:after {
        animation: none !important
    }

    .cinema-progress {
        display: none
    }

    .service-grid article:hover,
    .partnership-steps article:hover {
        transform: none
    }
}

.tabs {
    z-index: 5;
    position: relative
}

.tabs button {
    z-index: 1;
    cursor: pointer;
    touch-action: manipulation;
    position: relative
}

.tabs button:focus-visible {
    outline-offset: 6px;
    outline: 2px solid #8eeaff
}

.portfolio-stage {
    opacity: 1;
    transform: none
}

.portfolio-copy>p {
    color: #aec1d9;
    margin: 20px 0 6px;
    line-height: 1.65
}

.portfolio-copy>strong {
    color: #dff8ff;
    border-top: 1px solid var(--line);
    margin-bottom: 28px;
    padding-top: 22px;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    display: block
}

.portfolio-change {
    animation: .48s cubic-bezier(.2, .8, .2, 1) both tabContentIn
}

@keyframes tabContentIn {
    0% {
        opacity: 0;
        transform: translate(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (width<=700px) {
    .tabs {
        scroll-snap-type: x proximity
    }

    .tabs button {
        scroll-snap-align: start
    }

    .portfolio-copy>p {
        font-size: 14px
    }

    .portfolio-copy>strong {
        font-size: 16px
    }
}

@media (prefers-reduced-motion:reduce) {
    .portfolio-change {
        animation: none !important
    }
}

.contact {
    background: radial-gradient(circle at 24%, #1671e666, #0000 34%), radial-gradient(circle at 78% 36%, #19a4ff1f, #0000 32%), #020713;
    grid-template-columns: minmax(320px, .8fr) minmax(480px, 1.2fr);
    gap: clamp(70px, 9vw, 160px);
    padding-inline: clamp(34px, 7vw, 120px);
    overflow: hidden
}

.contact-identity {
    isolation: isolate;
    place-items: center;
    min-height: 460px;
    display: grid;
    position: relative
}

.contact-identity:before {
    content: "";
    z-index: -1;
    border: 1px solid #75d6ff29;
    position: absolute;
    inset: 8%;
    transform: rotate(45deg);
    box-shadow: 0 0 80px #1675ff29
}

.contact-identity:after {
    content: "";
    filter: blur(10px);
    z-index: -2;
    background: radial-gradient(circle, #1a9aff33, #0000 68%);
    border-radius: 50%;
    position: absolute;
    inset: 14%
}

.contact .contact-logo {
    aspect-ratio: 1;
    object-fit: contain;
    opacity: .68;
    mix-blend-mode: screen;
    filter: saturate(1.12)contrast(1.05)drop-shadow(0 0 42px #1988ff7a);
    width: min(560px, 40vw);
    max-width: none;
    margin: 0;
    animation: 9s ease-in-out infinite alternate contactMarkFloat;
    -webkit-mask-image: radial-gradient(circle, #000 48%, #000000b8 68%, #0000 86%);
    mask-image: radial-gradient(circle, #000 48%, #000000b8 68%, #0000 86%)
}

.contact-identity span {
    opacity: .55;
    background: linear-gradient(90deg, #0000, #7deaff, #0000);
    height: 1px;
    animation: 5.5s ease-in-out infinite contactScan;
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    box-shadow: 0 0 22px #2daaff
}

.contact-copy {
    z-index: 2;
    border-left: 1px solid #88cfff38;
    padding: clamp(38px, 5vw, 78px) 0 clamp(38px, 5vw, 78px) clamp(38px, 5vw, 82px);
    position: relative
}

.contact-copy:before {
    content: "";
    background: #7eeeff;
    width: 1px;
    height: 24%;
    position: absolute;
    top: 15%;
    left: -1px;
    box-shadow: 0 0 18px #2bbcff
}

.contact-copy p {
    max-width: 560px;
    line-height: 1.7
}

.contact-copy>a {
    margin-top: 18px
}

@keyframes contactMarkFloat {
    to {
        opacity: .78;
        transform: translateY(-10px)scale(1.025)
    }
}

@keyframes contactScan {

    0%,
    to {
        opacity: .12;
        transform: translateY(-155px)
    }

    50% {
        opacity: .68;
        transform: translateY(155px)
    }
}

@media (width<=1000px) {
    .contact {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .contact-identity {
        min-height: 340px
    }

    .contact .contact-logo {
        width: min(430px, 68vw)
    }

    .contact-copy {
        border-top: 1px solid #88cfff38;
        border-left: 0;
        padding: 48px 0 0
    }

    .contact-copy:before {
        width: 24%;
        height: 1px;
        top: -1px;
        left: 38%
    }
}

@media (width<=700px) {
    .contact {
        padding-block: 88px;
        position: relative
    }

    .contact-identity {
        opacity: .34;
        pointer-events: none;
        min-height: 0;
        position: absolute;
        inset: 0
    }

    .contact .contact-logo {
        width: 130vw;
        max-width: none
    }

    .contact-identity:before {
        opacity: .4;
        inset: 24%
    }

    .contact-copy {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        text-align: left;
        background: #020c23a3;
        border: 1px solid #88cfff38;
        padding: 38px 20px
    }

    .contact-copy:before {
        width: 36%;
        left: 32%
    }

    .contact-copy h2 {
        font-size: clamp(38px, 10vw, 50px)
    }

    .contact-copy p {
        font-size: 14px
    }

    .contact-copy>a {
        font-size: 11px
    }
}

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

    .contact .contact-logo,
    .contact-identity span {
        animation: none !important
    }
}

.portfolio-stage {
    grid-template-columns: minmax(230px, 3fr) minmax(0, 9fr);
    min-height: 520px
}

.portfolio-art {
    place-items: center;
    min-width: 0;
    padding: clamp(22px, 3vw, 48px);
    display: grid
}

.portfolio-art img {
    aspect-ratio: 1;
    object-fit: contain;
    z-index: 1;
    filter: saturate(1.08)contrast(1.04)drop-shadow(0 0 28px #1f8fff4d);
    width: min(260px, 82%);
    height: auto;
    position: relative
}

.portfolio-copy {
    min-width: 0;
    padding: clamp(48px, 5vw, 82px) clamp(38px, 6vw, 96px)
}

.portfolio-copy>p {
    max-width: 760px
}

.portfolio-copy ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
    margin: 34px 0;
    display: grid
}

.portfolio-copy li {
    padding-right: 20px
}

.portfolio-copy>strong {
    max-width: 760px
}

@media (width<=1000px) {
    .portfolio-stage {
        grid-template-columns: minmax(190px, 3fr) minmax(0, 9fr)
    }

    .portfolio-art img {
        width: min(220px, 84%)
    }

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

@media (width<=700px) {
    .portfolio-stage {
        grid-template-columns: 1fr;
        display: grid
    }

    .portfolio-art {
        aspect-ratio: auto;
        min-height: 220px;
        padding: 24px
    }

    .portfolio-art img {
        width: 150px;
        height: 150px
    }

    .portfolio-copy {
        padding: 38px 24px
    }

    .portfolio-copy ul {
        grid-template-columns: 1fr;
        margin: 26px 0
    }
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px))
}

body {
    -webkit-font-smoothing: antialiased;
    min-width: 320px
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

@media (width<=700px) {
    .site-nav {
        height: calc(72px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
        top: 0
    }

    .site-nav nav {
        top: calc(72px + env(safe-area-inset-top, 0px));
        height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
        padding-bottom: max(44px, env(safe-area-inset-bottom, 0px))
    }

    .site-nav nav a,
    .menu-button,
    .tabs button,
    .capability button,
    .concierge-launch {
        min-width: 44px;
        min-height: 44px
    }

    .menu-button {
        justify-content: center;
        padding: 10px 4px
    }

    .nav-logo {
        width: 104px;
        height: 52px
    }

    .nav-logo img {
        object-fit: contain
    }

    .cinema-hero {
        height: 100svh;
        min-height: 560px;
        max-height: none;
        padding-top: calc(72px + env(safe-area-inset-top, 0px))
    }

    .hero-bg {
        inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0;
        height: calc(100% - 72px - env(safe-area-inset-top, 0px));
        object-position: center 30%;
        transform: none
    }

    .hero-tagline {
        bottom: max(76px, calc(60px + env(safe-area-inset-bottom, 0px)));
        width: calc(100% - 32px);
        font-size: clamp(20px, 6vw, 27px);
        line-height: 1.22
    }

    .hero-dots {
        bottom: max(26px, calc(14px + env(safe-area-inset-bottom, 0px)))
    }

    .cinema-frame {
        inset: calc(88px + env(safe-area-inset-top, 0px)) 12px max(22px, env(safe-area-inset-bottom, 0px))
    }

    .webgl-backdrop {
        opacity: .4
    }

    .section {
        padding-left: max(18px, env(safe-area-inset-left, 0px));
        padding-right: max(18px, env(safe-area-inset-right, 0px))
    }

    .intro-lead {
        overflow-wrap: anywhere
    }

    .capability h3 {
        font-size: clamp(24px, 7.5vw, 34px)
    }

    .tabs {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        width: calc(100% + 36px);
        margin-inline: -18px;
        padding-inline: 18px
    }

    .tabs::-webkit-scrollbar {
        display: none
    }

    .tabs button {
        scroll-snap-align: start;
        padding: 14px 2px
    }

    .portfolio-art {
        min-height: 200px
    }

    .portfolio-art img {
        width: 140px;
        height: 140px
    }

    .portfolio-copy {
        min-height: 0;
        padding: 34px 22px
    }

    .portfolio-copy h3 {
        font-size: clamp(30px, 9vw, 38px)
    }

    .impact-grid article {
        min-height: 0;
        padding-block: 42px
    }

    .impact-orb {
        height: 180px
    }

    .impact-orb:before {
        width: 150px;
        height: 150px
    }

    .impact-orb:after {
        width: 72px;
        height: 72px
    }

    .contact {
        padding-left: max(18px, env(safe-area-inset-left, 0px));
        padding-right: max(18px, env(safe-area-inset-right, 0px))
    }

    .contact-copy {
        padding: 34px 20px
    }

    .contact-copy h2 {
        overflow-wrap: anywhere
    }

    footer {
        padding-left: max(20px, env(safe-area-inset-left, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
        padding-bottom: max(44px, env(safe-area-inset-bottom, 0px))
    }

    .concierge-launch {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: max(16px, env(safe-area-inset-bottom, 0px))
    }

    .concierge {
        left: max(16px, env(safe-area-inset-left, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: max(84px, calc(72px + env(safe-area-inset-bottom, 0px)));
        width: auto;
        max-height: calc(100dvh - 120px);
        overflow: auto
    }
}

@media (width<=430px) {
    .section {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .chapter {
        letter-spacing: .18em;
        font-size: 9px
    }

    .stats strong {
        font-size: 54px
    }

    .service-platform-head p {
        font-size: 17px
    }

    .news-visual,
    .feature-news .news-visual {
        height: 250px
    }
}

@media (height<=500px) and (orientation:landscape) {
    .cinema-hero {
        min-height: 500px
    }

    .hero-bg {
        object-position: center 42%
    }

    .hero-tagline {
        text-align: left;
        width: 55%;
        font-size: 20px;
        bottom: 30px;
        left: 24px;
        transform: none
    }

    .hero-dots {
        display: none
    }

    .site-nav nav {
        height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
        grid-template-columns: 1fr 1fr;
        display: none
    }

    .site-nav nav.open {
        display: grid
    }

    .site-nav nav a {
        min-height: 48px
    }
}

.property-card {
    background: #020c2273;
    grid-template-rows: auto 1fr;
    padding: 0;
    display: grid
}

.property-image {
    object-fit: cover;
    border-bottom: 1px solid var(--line);
    filter: saturate(.9)contrast(1.04);
    width: 100%;
    height: clamp(210px, 24vw, 330px);
    transition: transform .55s, filter .55s;
    display: block
}

.property-card:hover .property-image {
    filter: saturate()contrast(1.06);
    transform: scale(1.018)
}

.property-card-copy {
    z-index: 1;
    padding: 34px clamp(24px, 3vw, 46px) 40px;
    position: relative
}

.property-card-copy>span {
    color: #74dfff;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 9px;
    display: block
}

.property-card h3 {
    font-size: clamp(26px, 2.6vw, 42px)
}

.property-contact {
    row-gap: 14px
}

.contact-details {
    letter-spacing: .055em;
    color: #b9d7ed;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: -18px 0 30px;
    font-size: 12px;
    line-height: 1.5;
    display: flex
}

.contact-details a {
    color: #91ecff;
    border-bottom: 1px solid #91ecff73;
    padding-bottom: 3px
}

@media (width<=820px) {
    .property-image {
        height: clamp(210px, 56vw, 310px)
    }

    .property-card-copy {
        padding: 30px 22px 34px
    }

    .property-card-copy>span {
        margin-bottom: 24px
    }
}

@media (width<=430px) {
    .property-image {
        height: 220px
    }

    .property-contact {
        gap: 14px 18px
    }

    .contact-details {
        gap: 10px;
        margin-top: -12px;
        display: grid
    }
}

@media (width<=700px) and (prefers-reduced-motion:no-preference) {
    .hero-bg {
        animation: none
    }

    .portfolio-art:after {
        animation-duration: 12s
    }
}

@media (width<=820px) {

    html,
    body,
    main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden
    }

    body.menu-open {
        overflow: hidden
    }

    .site-nav {
        width: 100% !important;
        height: calc(72px + env(safe-area-inset-top, 0px)) !important;
        padding: env(safe-area-inset-top, 0px) 16px 0 !important;
        background: #020713f7 !important;
        border-bottom: 1px solid #77b8ff38 !important;
        display: block !important;
        position: fixed !important;
        inset: 0 0 auto !important
    }

    .nav-logo {
        left: 20% !important;
        right: auto !important;
        top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        width: 96px !important;
        height: 56px !important;
        margin: 0 !important;
        display: block !important;
        position: absolute !important;
        overflow: hidden !important;
        transform: translate(-50%) !important
    }

    .nav-logo img {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important
    }

    .menu-button {
        z-index: 3 !important;
        right: max(16px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
        align-content: center !important;
        gap: 7px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 12px 7px !important;
        display: grid !important;
        position: absolute !important
    }

    .menu-button i {
        background: #fff !important;
        width: 100% !important;
        height: 1px !important;
        transition: transform .25s !important
    }

    .menu-button.active i:first-child {
        transform: translateY(4px)rotate(45deg)
    }

    .menu-button.active i:last-child {
        transform: translateY(-4px)rotate(-45deg)
    }

    .site-nav .nav-contact {
        display: none !important
    }

    .site-nav nav {
        z-index: 2 !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        width: 100% !important;
        height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)) !important;
        padding: 20px max(22px, env(safe-area-inset-right, 0px)) max(30px, env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)) !important;
        background: #020713 !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0 !important;
        display: none !important;
        position: fixed !important;
        overflow-y: auto !important
    }

    .site-nav nav.open {
        display: flex !important
    }

    .site-nav nav a {
        letter-spacing: .14em !important;
        text-align: left !important;
        border-bottom: 1px solid #77b8ff2e !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        display: flex !important
    }

    .cinema-hero {
        width: 100% !important;
        height: 100svh !important;
        min-height: 600px !important;
        padding: 0 !important
    }

    .hero-bg {
        top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        width: 100% !important;
        height: calc(100% - 72px - env(safe-area-inset-top, 0px)) !important;
        object-fit: contain !important;
        object-position: center 30% !important;
        bottom: auto !important
    }

    .hero-tagline {
        left: 16px !important;
        right: 16px !important;
        bottom: max(78px, calc(62px + env(safe-area-inset-bottom, 0px))) !important;
        text-align: center !important;
        white-space: normal !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important
    }

    .hero-dots {
        left: 50% !important;
        right: auto !important;
        bottom: max(28px, calc(15px + env(safe-area-inset-bottom, 0px))) !important;
        transform: translate(-50%) !important
    }

    .section {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .chapter {
        text-align: left;
        justify-content: flex-start;
        width: 100%
    }

    .intro-lead,
    .capabilities h2,
    .portfolio h2,
    .insights h2,
    .contact h2,
    .partnership h2 {
        text-align: left !important;
        max-width: 100% !important
    }

    .stats,
    .service-grid,
    .partnership-steps,
    .partner-principles,
    .impact-grid,
    .news-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important
    }

    .stats article,
    .stats article+article {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .capability {
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 26px 0 !important
    }

    .capability h3 {
        grid-column: 1 !important;
        min-width: 0 !important
    }

    .capability p {
        grid-column: 1/-1 !important;
        width: 100% !important
    }

    .capability button {
        grid-area: 1/2 !important;
        justify-self: end !important
    }

    .service-platform,
    .portfolio-head,
    .portfolio-stage,
    .partnership-intro,
    .contact,
    .contact-copy {
        width: 100% !important;
        max-width: 100% !important
    }

    .service-platform-head,
    .portfolio-head,
    .partnership-intro {
        display: block !important
    }

    .tabs {
        gap: 26px !important;
        width: calc(100% + 40px) !important;
        max-width: none !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding: 0 20px !important;
        display: flex !important;
        overflow-x: auto !important
    }

    .tabs button {
        white-space: nowrap !important;
        text-align: center !important;
        flex: none !important;
        width: auto !important
    }

    .portfolio-stage {
        grid-template-columns: 1fr !important;
        margin-top: 26px !important;
        display: grid !important
    }

    .portfolio-art {
        width: 100% !important;
        min-height: 210px !important;
        padding: 24px !important
    }

    .portfolio-art img {
        object-fit: contain !important;
        width: 145px !important;
        height: 145px !important;
        margin: auto !important
    }

    .portfolio-copy {
        text-align: left !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 34px 22px !important
    }

    .portfolio-copy ul,
    .portfolio-copy li {
        width: 100% !important
    }

    .portfolio-copy a {
        margin-top: 12px !important
    }

    .impact-grid article {
        width: 100% !important;
        min-height: 0 !important;
        padding: 42px 24px !important
    }

    .impact-grid article+article {
        border-left: 0 !important
    }

    .news-grid article,
    .news-visual,
    .feature-news .news-visual {
        width: 100% !important
    }

    .contact {
        text-align: left !important;
        padding: 78px 20px !important;
        display: block !important
    }

    .contact-identity {
        position: absolute !important;
        inset: 0 !important
    }

    .contact-copy {
        text-align: left !important;
        padding: 34px 20px !important;
        position: relative !important
    }

    .contact-copy a {
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        display: inline-block !important
    }

    footer {
        text-align: center !important;
        width: 100% !important;
        padding: 44px 20px max(44px, env(safe-area-inset-bottom, 0px)) !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        display: grid !important
    }

    footer img {
        object-fit: contain !important;
        width: 150px !important;
        height: 150px !important
    }

    footer div {
        justify-items: center !important;
        width: 100% !important
    }

    footer div a {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important
    }

    footer p,
    footer small {
        text-align: center !important;
        width: 100% !important
    }
}

.contact {
    align-items: start
}

.contact-copy {
    padding-top: 42px;
    padding-bottom: 42px
}

.contact-copy h2 {
    margin: 26px 0 16px;
    font-size: clamp(34px, 4vw, 54px)
}

.contact-copy>p {
    margin-bottom: 30px
}

.contact-form {
    gap: 18px;
    max-width: 720px;
    display: grid
}

.form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    display: grid
}

.contact-form label {
    gap: 8px;
    display: grid
}

.contact-form label>span {
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #a9c1dd;
    font-size: 9px
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    color: #f4f8ff;
    background: #051636b8;
    border: 1px solid #88cfff47;
    border-radius: 0;
    outline: none;
    width: 100%;
    padding: 13px 14px;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
    transition: border-color .2s, background .2s, box-shadow .2s
}

.contact-form textarea {
    resize: vertical;
    min-height: 112px
}

.contact-form select {
    appearance: auto
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    background: #071e46e6;
    border-color: #7eeeff;
    box-shadow: 0 0 0 3px #34e4ee14
}

.form-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 4px;
    display: flex
}

.form-actions button {
    color: #a9f5ff;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid #68e8f4;
    padding: 13px 19px;
    font-size: 10px;
    transition: all .2s
}

.form-actions button:hover {
    color: #03112d;
    background: #68e8f4
}

.form-actions small {
    color: #8098b5;
    font-size: 11px;
    line-height: 1.5
}

.form-honey {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    position: absolute !important;
    left: -9999px !important
}

@media (width<=700px) {
    .form-row {
        grid-template-columns: 1fr
    }

    .contact-form {
        gap: 15px
    }

    .contact-copy h2 {
        font-size: 34px
    }

    .form-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .form-actions button {
        width: 100%
    }
}

@media (width<=390px) {
    .section {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

    .tabs {
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-inline: 16px !important
    }

    .hero-tagline {
        font-size: 20px !important;
        left: 12px !important;
        right: 12px !important
    }

    .portfolio-copy {
        padding: 30px 18px !important
    }
}

.properties {
    color: #eef4fb;
    background: radial-gradient(circle at 90% 12%, #2580ff33, #0000 28%), linear-gradient(155deg, #03112d, #020713 68%)
}

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

.properties-head {
    grid-template-columns: 1.35fr .65fr;
    align-items: end;
    gap: 8vw;
    display: grid
}

.properties-head h2 {
    letter-spacing: -.065em;
    margin: 60px 0 90px;
    font-size: clamp(57px, 7.6vw, 124px);
    font-weight: 300;
    line-height: .91
}

.properties-head h2 em {
    color: #8bdcf9;
    font-family: Georgia, serif;
    font-weight: 400
}

.properties-head>p {
    color: #9eb2cc;
    max-width: 510px;
    margin: 0 0 94px;
    line-height: 1.75
}

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

.property-card {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-height: 360px;
    padding: 48px clamp(30px, 4vw, 64px);
    transition: all .35s;
    position: relative;
    overflow: hidden
}

.property-card:after {
    content: "";
    border: 1px solid #46d3ff33;
    border-radius: 50%;
    width: 230px;
    height: 230px;
    transition: all .45s;
    position: absolute;
    bottom: -100px;
    right: -80px;
    box-shadow: 0 0 70px #1e72ff1f
}

.property-card:hover {
    background: linear-gradient(140deg, #1478ff1f, #34e4ee09);
    transform: translateY(-3px)
}

.property-card:hover:after {
    border-color: #46d3ff66;
    transform: scale(1.15)
}

.property-card>span {
    color: #74dfff;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 55px;
    font-size: 9px;
    display: block
}

.property-card h3 {
    z-index: 1;
    letter-spacing: -.035em;
    max-width: 650px;
    margin: 0 0 24px;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 300;
    line-height: 1.08;
    position: relative
}

.property-card p {
    z-index: 1;
    color: #9eb2cc;
    max-width: 590px;
    line-height: 1.65;
    position: relative
}

.property-card .property-location {
    color: #e6f6ff;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px
}

.property-contact {
    z-index: 1;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 28px;
    display: flex;
    position: relative
}

.property-contact a {
    color: #8eeaff;
    letter-spacing: .08em;
    border-bottom: 1px solid #8eeaff80;
    padding-bottom: 5px;
    font-size: 12px
}

@media (width<=820px) {
    .properties-head {
        display: block
    }

    .properties-head h2 {
        margin-bottom: 38px
    }

    .properties-head>p {
        margin-bottom: 58px
    }

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

    .property-card {
        min-height: 0;
        padding: 38px 24px
    }

    .property-card>span {
        margin-bottom: 38px
    }
}

.team {
    color: #07132e;
    background: #edf1f6
}

.team-head {
    grid-template-columns: 1.35fr .65fr;
    align-items: end;
    gap: 8vw;
    display: grid
}

.team-head h2 {
    letter-spacing: -.05em;
    margin: 48px 0 66px;
    font-size: clamp(42px, 5.4vw, 82px);
    font-weight: 300;
    line-height: .96
}

.team-head h2 em {
    color: #1672bd;
    font-family: Georgia, serif;
    font-weight: 400
}

.team-head>p {
    color: #65788f;
    max-width: 420px;
    margin: 0 0 66px;
    font-size: 15px;
    line-height: 1.65
}

.team-grid {
    border-top: 1px solid #aebdcd;
    border-left: 1px solid #aebdcd;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid
}

.team-card {
    background: linear-gradient(145deg, #ffffffb3, #e0eaf459);
    border-bottom: 1px solid #aebdcd;
    border-right: 1px solid #aebdcd;
    grid-template-rows: auto 1fr auto;
    min-height: 330px;
    padding: 26px clamp(20px, 2.4vw, 38px);
    transition: all .35s;
    display: grid;
    position: relative;
    overflow: hidden
}

.team-card:hover {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 28px 65px #041c3f1f
}

.team-number {
    letter-spacing: .22em;
    color: #6380a9;
    font-size: 9px
}

.team-mark {
    aspect-ratio: 1;
    color: #126fba;
    background: radial-gradient(circle at 35% 30%, #fff, #dceaf7 65%, #c7dceb);
    border: 1px solid #127cff4d;
    border-radius: 50%;
    place-self: center;
    place-items: center;
    width: clamp(94px, 9vw, 130px);
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 50px);
    font-style: italic;
    font-weight: 400;
    display: grid;
    box-shadow: inset 0 0 30px #127cff12, 0 14px 34px #043e791a
}

.team-copy {
    z-index: 1;
    border-top: 1px solid #b9c6d3;
    padding-top: 18px;
    position: relative
}

.team-copy>span {
    color: #1672bd;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-size: 9px;
    line-height: 1.5;
    display: block
}

.team-copy h3 {
    letter-spacing: -.025em;
    margin: 0 0 10px;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 300;
    line-height: 1.08
}

.team-copy p {
    color: #607287;
    max-width: 360px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5
}

.team-cta {
    color: #126fba;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid #126fba;
    margin-top: 42px;
    padding-bottom: 7px;
    font-size: 10px;
    display: inline-block
}

@media (width<=1000px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width<=820px) {
    .team-head {
        display: block
    }

    .team-head h2 {
        margin-bottom: 26px
    }

    .team-head>p {
        margin-bottom: 42px
    }

    .team-card {
        min-height: 310px;
        padding: 26px 22px
    }

    .team-mark {
        width: 104px
    }

    .team-copy h3 {
        font-size: 26px
    }
}

@media (width<=560px) {
    .team-grid {
        grid-template-columns: 1fr
    }

    .team-card {
        min-height: 290px
    }
}

.section {
    padding-top: 76px;
    padding-bottom: 76px
}

.intro-lead {
    letter-spacing: -.018em;
    max-width: 900px;
    margin: 38px 0 56px;
    font-family: Georgia, serif;
    font-size: clamp(27px, 2.7vw, 40px);
    line-height: 1.24
}

.stats article,
.stats article+article {
    padding-top: 26px;
    padding-bottom: 8px
}

.stats strong {
    font-size: clamp(38px, 4vw, 58px)
}

.stats p {
    font-size: 14px;
    line-height: 1.5
}

.properties-head h2,
.team-head h2,
.capabilities h2,
.portfolio h2,
.insights h2,
.contact h2 {
    letter-spacing: -.038em;
    margin: 34px 0 46px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02
}

.properties-head>p,
.team-head>p {
    margin-bottom: 48px;
    font-size: 14px;
    line-height: 1.6
}

.property-card {
    min-height: 300px;
    padding: 32px clamp(24px, 3vw, 46px)
}

.property-card>span {
    margin-bottom: 34px
}

.property-card h3 {
    margin-bottom: 16px;
    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1.12
}

.property-card p {
    font-size: 14px;
    line-height: 1.55
}

.team-card {
    min-height: 290px;
    padding: 24px clamp(18px, 2vw, 30px)
}

.team-mark {
    width: clamp(80px, 7.5vw, 108px);
    font-size: clamp(28px, 3vw, 42px)
}

.team-copy h3 {
    margin-bottom: 8px;
    font-size: clamp(19px, 1.7vw, 25px)
}

.team-copy p {
    font-size: 12px
}

.capability {
    padding: 22px 0
}

.capability h3 {
    font-size: clamp(22px, 2.3vw, 32px)
}

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

.service-platform-head p {
    font-size: 18px
}

@media (width<=820px) {
    .section {
        padding-top: 58px;
        padding-bottom: 58px
    }

    .intro-lead {
        margin: 30px 0 42px;
        font-size: clamp(24px, 6.4vw, 32px)
    }

    .stats strong {
        font-size: 42px
    }

    .properties-head h2,
    .team-head h2,
    .capabilities h2,
    .portfolio h2,
    .insights h2,
    .contact h2 {
        margin: 26px 0 32px;
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.08
    }

    .properties-head>p,
    .team-head>p {
        margin-bottom: 34px
    }

    .property-card {
        padding: 28px 22px
    }

    .property-card h3 {
        font-size: 25px
    }

    .team-card {
        min-height: 270px
    }

    .team-copy h3 {
        font-size: 23px
    }

    .capability h3 {
        font-size: 24px
    }
    
}
/* Fix mobile menu toggle position */
@media (max-width: 820px) {
  .site-nav {
    width: 100vw !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .menu-button {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 9px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(126, 238, 255, 0.55) !important;
    border-radius: 50% !important;
    background: #061632 !important;
    z-index: 9999 !important;
    transform: none !important;
  }

  .menu-button i {
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    background: #ffffff !important;
  }

  .site-nav nav {
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
  }
}