:root {

    --black: #0B0B0B;

    --white: #F5F5F5;

    --silver: #A7A7A7;

    --grey: #6B6B6B;

    --line-dark: rgba(245,245,245,.15);

    --line-light: rgba(11,11,11,.18);

    --font: "Montserrat","Helvetica Neue",Arial,sans-serif;

    --ease: cubic-bezier(.22,1,.36,1);

    --container: 1240px;

    --gutter: clamp(22px,5.2vw,84px);

}

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

    background: var(--black);

}

body {

    min-height: 100vh;

    overflow-x: hidden;

    background: var(--black);

    color: var(--white);

    font-family: var(--font);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

body.menu-open {

    overflow: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

}

button,a {

    -webkit-tap-highlight-color: transparent;

}

::selection {

    color: var(--black);

    background: var(--silver);

}

:focus-visible {

    outline: 1px solid var(--silver);

    outline-offset: 5px;

}

.section-pad {

    padding: clamp(100px,13vw,190px) 0;

}

.section-container,.header-container {

    width: min(var(--container),calc(100% - var(--gutter)*2));

    margin-inline: auto;

}

.site-header.scrolled {

    padding: 18px 0;

    background: rgba(11,11,11,.88);

    border-bottom-color: rgba(245,245,245,.08);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}

.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px;

}

.brand {

    display: inline-flex;

    flex-direction: row;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

}

.brand-mark {

    display: block;

    width: 34px;

    height: 38px;

    object-fit: contain;

    flex-shrink: 0;

}

.brand-wording {

    display: inline-flex;

    flex-direction: column;

    gap: 5px;

}

.brand-name {

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .19em;

}

.brand-country {

    color: var(--silver);

    font-size: 7px;

    line-height: 1;

    letter-spacing: .29em;

}

.main-navigation {

    display: flex;

    align-items: center;

    gap: clamp(18px,3vw,42px);

}

.main-navigation a,.menu-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    border: 0;

    background: none;

    color: var(--white);

    cursor: pointer;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .16em;

    white-space: nowrap;

}

.main-navigation a:hover:after,.menu-button:hover:after {

    width: 100%;

}

.menu-button span {

    color: var(--silver);

    font-size: 13px;

}

.menu-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}

.menu-close {

    position: absolute;

    top: 32px;

    right: var(--gutter);

    border: 0;

    background: transparent;

    color: var(--white);

    cursor: pointer;

    font-size: 9px;

    letter-spacing: .18em;

}

.menu-close span {

    margin-left: 10px;

    color: var(--silver);

    font-size: 17px;

}

.menu-navigation {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: clamp(10px,1.5vh,18px);

}

.menu-navigation a:hover {

    color: var(--silver);

    transform: translateX(8px);

}

.menu-navigation a:hover span {

    opacity: 1;

    transform: translate(0,0);

}

.menu-footer {

    position: absolute;

    bottom: 28px;

    left: var(--gutter);

    right: var(--gutter);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .17em;

}

.hero {

    position: relative;

    isolation: isolate;

    min-height: 760px;

    height: 100svh;

    max-height: 1100px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--black);

}

.hero-background:before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .18;

    background: linear-gradient(90deg,transparent 0 60%,rgba(245,245,245,.06) 60.1%,transparent 60.4%),linear-gradient(90deg,transparent 0 72%,rgba(245,245,245,.035) 72.1%,transparent 72.35%),linear-gradient(0deg,transparent 0 64%,rgba(245,245,245,.035) 64.1%,transparent 64.3%);

}

.hero-grid {

    position: absolute;

    z-index: -2;

    inset: 0;

    opacity: .16;

    background-image: linear-gradient(90deg,transparent calc(25% - .5px),rgba(245,245,245,.14) 25%,transparent calc(25% + .5px),transparent calc(50% - .5px),rgba(245,245,245,.1) 50%,transparent calc(50% + .5px),transparent calc(75% - .5px),rgba(245,245,245,.12) 75%,transparent calc(75% + .5px));

}

.hero-overlay {

    position: absolute;

    z-index: -1;

    inset: 0;

    background: linear-gradient(90deg,rgba(11,11,11,.97),rgba(11,11,11,.78) 44%,rgba(11,11,11,.24)),linear-gradient(0deg,rgba(11,11,11,.5),transparent 32%);

}

.hero-content {

    width: min(var(--container),calc(100% - var(--gutter)*2));

    margin: 0 auto;

    padding-top: 55px;

}

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: clamp(25px,4vh,45px);

    color: var(--silver);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .24em;

}

.eyebrow-line {

    width: 26px;

    height: 1px;

    background: var(--silver);

}

.hero-location {

    margin-left: 22px;

    color: rgba(167,167,167,.65);

}

.hero-title {

    display: flex;

    flex-direction: column;

    width: fit-content;

    max-width: min(100%, 900px);

    color: var(--white);

    font-size: clamp(44px,6.5vw,104px);

    font-weight: 600;

    line-height: .83;

    letter-spacing: -.065em;

}

.hero-title>span {

    display: block;

    max-width: 100%;

}

.hero-title>span:nth-child(2) {

    padding-left: clamp(0px,3.8vw,58px);

}

.hero-period {

    color: var(--silver);

}

.hero-bottom {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    max-width: 890px;

    margin-top: clamp(35px,6vh,64px);

}

.hero-supporting {

    color: rgba(245,245,245,.68);

    font-size: 13px;

    line-height: 1.6;

}

.text-cta {

    display: inline-flex;

    align-items: center;

    gap: 22px;

    width: fit-content;

    padding: 0 0 10px;

    border-bottom: 1px solid rgba(167,167,167,.7);

    color: var(--white);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .17em;

    transition: color .25s ease,border-color .25s ease;

}

.text-cta:hover {

    color: var(--silver);

    border-color: var(--white);

}

.cta-arrow {

    display: inline-block;

    color: var(--silver);

    font-size: 15px;

    transition: transform .3s var(--ease);

}

.text-cta:hover .cta-arrow {

    transform: translate(4px,-4px);

}

.hero-index {

    position: absolute;

    bottom: 35px;

    left: var(--gutter);

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(167,167,167,.72);

    font-size: 7px;

    letter-spacing: .17em;

}

.index-rule {

    width: 38px;

    height: 1px;

    background: var(--grey);

}

.hero-scroll {

    position: absolute;

    right: var(--gutter);

    bottom: 32px;

    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--silver);

    font-size: 7px;

    letter-spacing: .16em;

    writing-mode: vertical-rl;

}

.section-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid var(--line-dark);

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .18em;

}

.display-title {

    color: var(--white);

    font-size: clamp(44px,7.5vw,106px);

    line-height: .9;

    font-weight: 600;

    letter-spacing: -.07em;

}

.display-title>span {

    color: var(--silver);

}

.dark-title {

    color: var(--black);

}

.dark-title>span {

    color: var(--grey);

}

.capability-intro {

    background: var(--black);

}

.intro-layout {

    display: grid;

    grid-template-columns: 1.35fr .65fr;

    align-items: end;

    gap: clamp(35px,8vw,120px);

    padding-top: clamp(60px,9vw,120px);

}

.intro-copy {

    position: relative;

    max-width: 380px;

    padding-left: 25px;

    border-left: 1px solid var(--grey);

}

.vertical-marker {

    display: block;

    margin-bottom: 22px;

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .18em;

}

.intro-copy p {

    color: rgba(245,245,245,.72);

    font-size: 13px;

    line-height: 1.9;

}

.dark-cta {

    margin-top: 28px;

}

.intro-foot {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: clamp(65px,9vw,120px);

    padding-top: 18px;

    border-top: 1px solid var(--line-dark);

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .14em;

}

.enable-section {

    background: #101010;

}

.enable-grid {

    display: grid;

    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 1px;

    margin-top: 55px;

    background: var(--line-dark);

    border: 1px solid var(--line-dark);

}

.enable-card:hover {

    background: #181818;

}

.enable-card:hover:after {

    transform: scaleX(1);

}

.card-number,.card-index {

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .16em;

}

.card-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    margin: 55px 0 38px;

    border: 1px solid rgba(167,167,167,.32);

    border-radius: 50%;

    color: var(--silver);

    font-size: 19px;

}

.enable-card h3 {

    color: var(--white);

    font-size: clamp(19px,2vw,28px);

    line-height: .98;

    font-weight: 500;

    letter-spacing: -.045em;

}

.enable-card p {

    margin-top: 18px;

    max-width: 245px;

    color: var(--silver);

    font-size: 10px;

    line-height: 1.75;

}

.card-index {

    position: absolute;

    left: 22px;

    bottom: 22px;

}

.capabilities {

    background: var(--white);

    color: var(--black);

}

.capabilities .section-topline {

    border-color: var(--line-light);

    color: var(--grey);

}

.capabilities-heading {

    display: grid;

    grid-template-columns: 1fr .55fr;

    gap: 50px;

    align-items: end;

    padding-top: 65px;

}

.capabilities-heading>p {

    max-width: 350px;

    margin-bottom: 8px;

    color: var(--grey);

    font-size: 12px;

    line-height: 1.9;

}

.capability-list {

    margin-top: 85px;

    border-top: 1px solid var(--line-light);

}

.capability-item:hover {

    padding-inline: 12px;

}

.capability-number {

    color: var(--grey);

    font-size: 8px;

    letter-spacing: .12em;

}

.capability-name {

    color: var(--black);

    font-size: clamp(13px,1.4vw,19px);

    font-weight: 500;

    line-height: 1.35;

    letter-spacing: -.025em;

}

.capability-detail {

    color: var(--grey);

    font-size: 9px;

    line-height: 1.5;

}

.capability-item:hover .capability-arrow {

    color: var(--black);

    transform: translate(3px,-3px);

}

.system-section {

    background: var(--black);

}

.system-heading {

    display: grid;

    grid-template-columns: 1fr .55fr;

    align-items: end;

    gap: 60px;

    padding-top: 65px;

}

.system-heading>p {

    max-width: 380px;

    margin-bottom: 8px;

    color: var(--silver);

    font-size: 12px;

    line-height: 1.9;

}

.system-flow {

    display: grid;

    grid-template-columns: repeat(4,minmax(0,1fr));

    margin-top: 90px;

    border-top: 1px solid var(--line-dark);

    border-left: 1px solid var(--line-dark);

}

.system-stage:hover {

    background: #141414;

}

.stage-number {

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .16em;

}

.stage-node {

    width: 6px;

    height: 6px;

    margin: 30px 0 22px;

    border-radius: 50%;

    background: var(--silver);

    box-shadow: 0 0 0 5px rgba(167,167,167,.08);

}

.system-stage h3 {

    color: var(--white);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .02em;

    line-height: 1.35;

}

.system-stage p {

    margin-top: 9px;

    color: var(--grey);

    font-size: 9px;

    line-height: 1.6;

}

.system-stage-final {

    background: linear-gradient(145deg,#1b1b1b,#0B0B0B);

}

.system-stage-final h3 {

    color: var(--silver);

}

.sectors-section {

    background: #111;

}

.sectors-title {

    padding-top: 65px;

    font-size: clamp(40px,6.5vw,92px);

}

.sectors-title>span {

    color: var(--silver);

}

.sector-list {

    margin-top: 85px;

    border-top: 1px solid var(--line-dark);

}

.sector-item:hover {

    padding-inline: 12px;

}

.sector-number {

    color: var(--grey);

    font-size: 8px;

}

.sector-name {

    font-size: clamp(18px,2.3vw,32px);

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -.045em;

}

.sector-description {

    max-width: 310px;

    color: var(--silver);

    font-size: 10px;

    line-height: 1.7;

}

.sector-arrow {

    color: var(--silver);

    font-size: 17px;

    transition: transform .3s var(--ease);

}

.sector-item:hover .sector-arrow {

    transform: translate(4px,-4px);

}

.proof-section {

    background: var(--white);

    color: var(--black);

}

.proof-section .section-topline {

    border-color: var(--line-light);

}

.proof-layout {

    display: grid;

    grid-template-columns: 1fr .65fr;

    gap: 80px;

    align-items: end;

}

.proof-layout .display-title {

    padding-top: 65px;

}

.proof-copy {

    max-width: 420px;

    padding-bottom: 8px;

}

.proof-copy p {

    color: #424242;

    font-size: 13px;

    line-height: 1.9;

}

.proof-copy .proof-note {

    margin-top: 24px;

    padding-top: 18px;

    border-top: 1px solid var(--line-light);

    color: var(--grey);

    font-size: 10px;

}

.proof-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    width: min(var(--container),calc(100% - var(--gutter)*2));

    margin: 95px auto 0;

    padding-top: 18px;

    border-top: 1px solid var(--line-light);

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .15em;

}

.vision-section {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background: #0d0e0e;

}

.vision-backdrop {

    position: absolute;

    z-index: -1;

    inset: 0;

    opacity: .6;

    background: radial-gradient(ellipse at 82% 36%,rgba(167,167,167,.18),transparent 30%),linear-gradient(110deg,#0B0B0B,#171919);

}

.vision-content .section-topline {

    border-color: var(--line-dark);

}

.vision-kicker {

    margin-top: 75px;

    margin-bottom: 24px;

    color: var(--silver);

    font-size: 8px;

    letter-spacing: .22em;

}

.vision-content h2 {

    max-width: 1100px;

    font-size: clamp(43px,7.6vw,112px);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.07em;

}

.vision-content h2 span {

    color: var(--silver);

}

.vision-copy {

    max-width: 490px;

    margin-top: 40px;

    color: var(--silver);

    font-size: 12px;

    line-height: 1.9;

}

.about-section {

    background: #111;

}

.about-layout {

    display: grid;

    grid-template-columns: 1.15fr .65fr;

    align-items: end;

    gap: 80px;

}

.about-layout .display-title {

    padding-top: 65px;

}

.about-copy {

    max-width: 420px;

}

.about-copy p {

    color: rgba(245,245,245,.75);

    font-size: 12px;

    line-height: 1.95;

}

.about-copy p+p {

    margin-top: 20px;

}

.about-manifesto {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px;

    margin-top: 100px;

    padding-top: 20px;

    border-top: 1px solid var(--line-dark);

    color: var(--silver);

    font-size: 8px;

    letter-spacing: .17em;

}

.about-manifesto span:nth-child(even) {

    color: var(--grey);

}

.contact-section {

    background: var(--white);

    color: var(--black);

}

.contact-section .section-topline {

    border-color: var(--line-light);

}

.contact-kicker {

    margin-top: 75px;

    margin-bottom: 25px;

    color: var(--grey);

    font-size: 8px;

    letter-spacing: .2em;

}

.contact-inner h2 {

    font-size: clamp(65px,11vw,160px);

    font-weight: 600;

    line-height: .82;

    letter-spacing: -.08em;

}

.contact-inner h2 span {

    color: var(--grey);

}

.contact-description {

    margin-top: 35px;

    color: #4f4f4f;

    font-size: 12px;

}

.contact-cta {

    margin-top: 32px;

    color: var(--black);

    border-color: var(--black);

}

.contact-cta .cta-arrow {

    color: var(--grey);

}

.contact-cta:hover {

    color: var(--grey);

    border-color: var(--grey);

}

.contact-email-note {

    margin-top: 18px;

    color: var(--grey);

    font-size: 9px;

}

.site-footer {

    padding: 75px 0 25px;

    background: var(--black);

}

.footer-main,.footer-bottom {

    width: min(var(--container),calc(100% - var(--gutter)*2));

    margin-inline: auto;

}

.footer-main {

    display: grid;

    grid-template-columns: .8fr 1.2fr .8fr;

    gap: 50px;

    align-items: start;

    padding-bottom: 80px;

}

.footer-statement {

    color: var(--white);

    font-size: clamp(25px,3.5vw,48px);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.055em;

}

.footer-statement span {

    color: var(--silver);

}

.footer-links {

    display: grid;

    justify-items: start;

    gap: 13px;

}

.footer-links a {

    color: var(--silver);

    font-size: 8px;

    letter-spacing: .12em;

    transition: color .2s ease;

}

.footer-links a:hover {

    color: var(--white);

}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--line-dark);

    color: var(--grey);

    font-size: 7px;

    letter-spacing: .13em;

}

@media (max-width:1000px) {

    :root {

        --gutter: 34px;

    }

    .enable-grid {

        grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .enable-card {

        min-height: 320px;

    }

    .system-flow {

        grid-template-columns: repeat(3,minmax(0,1fr));

    }

    .capability-item {

        grid-template-columns: 35px minmax(200px,1.2fr) minmax(120px,.8fr) 20px;

        gap: 14px;

    }

    .footer-main {

        grid-template-columns: .8fr 1.2fr .7fr;

        gap: 28px;

    }

}

@media (max-width:720px) {

    :root {

        --gutter: 22px;

    }

    .site-header {

        padding: 22px 0;

    }

    .site-header.scrolled {

        padding: 15px 0;

    }

    .brand-name {

        font-size: 13px;

    }

    .brand-country {

        font-size: 6px;

    }

    .main-navigation {

        gap: 17px;

    }

    .main-navigation a {

        display: none;

    }

    .hero {

        min-height: 720px;

        height: 100svh;

        max-height: 920px;

    }

    .hero-content {

        padding-top: 40px;

    }

    .hero-eyebrow {

        flex-wrap: wrap;

        gap: 9px;

        margin-bottom: 32px;

        font-size: 7px;

    }

    .hero-location {

        width: 100%;

        margin: 8px 0 0 35px;

        font-size: 6px;

    }

    .hero-title {

        font-size: clamp(48px,12vw,82px);

        line-height: .88;

        letter-spacing: -.07em;

    }

    .hero-title>span:nth-child(2) {

        padding-left: 0;

    }

    .hero-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 23px;

        margin-top: 32px;

    }

    .hero-supporting {

        font-size: 12px;

    }

    .hero-index {

        bottom: 22px;

        font-size: 6px;

    }

    .hero-scroll {

        right: 22px;

        bottom: 20px;

        font-size: 6px;

    }

    .section-pad {

        padding: 100px 0;

    }

    .section-topline {

        align-items: flex-start;

        font-size: 6px;

        line-height: 1.5;

    }

    .section-topline span:last-child {

        text-align: right;

    }

    .intro-layout,.capabilities-heading,.system-heading,.proof-layout,.about-layout {

        grid-template-columns: 1fr;

        gap: 38px;

    }

    .intro-layout {

        padding-top: 60px;

    }

    .display-title {

        font-size: clamp(43px,11vw,74px);

    }

    .intro-copy {

        max-width: 100%;

    }

    .intro-foot {

        flex-direction: column;

        gap: 12px;

        margin-top: 65px;

    }

    .enable-grid {

        grid-template-columns: 1fr;

    }

    .enable-card {

        min-height: 280px;

        padding: 25px;

    }

    .card-symbol {

        margin: 36px 0 27px;

    }

    .enable-card p {

        max-width: 300px;

    }

    .capabilities-heading {

        padding-top: 55px;

    }

    .capability-list {

        margin-top: 55px;

    }

    .capability-item {

        grid-template-columns: 27px minmax(0,1fr) 18px;

        gap: 12px;

        padding: 22px 0;

    }

    .capability-name {

        font-size: 13px;

    }

    .capability-detail {

        display: none;

    }

    .system-heading {

        padding-top: 55px;

    }

    .system-flow {

        grid-template-columns: repeat(2,minmax(0,1fr));

        margin-top: 55px;

    }

    .system-stage {

        min-height: 170px;

        padding: 17px 13px;

    }

    .system-stage h3 {

        font-size: 10px;

    }

    .system-stage p {

        font-size: 8px;

    }

    .sectors-title {

        padding-top: 55px;

        font-size: clamp(37px,10vw,65px);

    }

    .sector-list {

        margin-top: 55px;

    }

    .sector-item {

        grid-template-columns: 26px minmax(0,1fr) 18px;

        gap: 12px;

        padding: 25px 0;

    }

    .sector-name {

        font-size: 18px;

    }

    .sector-description {

        grid-column: 2;

        grid-row: 2;

        font-size: 9px;

    }

    .sector-arrow {

        grid-column: 3;

        grid-row: 1;

    }

    .proof-layout .display-title,.about-layout .display-title {

        padding-top: 55px;

    }

    .proof-bottom {

        flex-direction: column;

        gap: 12px;

        margin-top: 55px;

    }

    .vision-kicker {

        margin-top: 55px;

    }

    .vision-content h2 {

        font-size: clamp(38px,10vw,66px);

    }

    .about-manifesto {

        gap: 11px;

        margin-top: 65px;

        font-size: 7px;

    }

    .contact-kicker {

        margin-top: 55px;

    }

    .contact-inner h2 {

        font-size: clamp(62px,15vw,100px);

    }

    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 40px 22px;

        padding-bottom: 55px;

    }

    .footer-brand {

        grid-column: 1/-1;

    }

    .footer-statement {

        grid-column: 1/-1;

        grid-row: 2;

    }

    .footer-links {

        grid-column: 1/-1;

        grid-template-columns: repeat(2,1fr);

    }

    .footer-bottom {

        flex-wrap: wrap;

        line-height: 1.7;

    }

    .footer-bottom span:nth-child(2) {

        display: none;

    }

    .menu-overlay {

        padding: 80px var(--gutter) 65px;

    }

    .menu-navigation {

        gap: 15px;

    }

    .menu-navigation a {

        font-size: clamp(27px,7.5vw,43px);

    }

    .menu-footer {

        left: var(--gutter);

        right: var(--gutter);

        font-size: 6px;

    }

}

@media (max-width:390px) {

    .hero-title {

        font-size: 46px;

    }

    .hero-eyebrow {

        letter-spacing: .15em;

    }

    .system-stage {

        min-height: 155px;

    }

    .footer-bottom {

        font-size: 6px;

    }

}

@media (max-width: 600px) {

    .brand {
        gap: 9px;
    }

    .brand-mark {
        width: 27px;
        height: 31px;
    }

    .brand-name {
        font-size: 12px;
        letter-spacing: .15em;
    }

    .brand-country {
        font-size: 6px;
        letter-spacing: .22em;
    }

}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 54px;
}

.capability-card {
  position: relative;
  display: flex;
  min-height: 190px;
  overflow: hidden;
  align-items: flex-end;
  padding: 20px 18px;
  color: #F5F5F5;
  background: #0B0B0B;
  isolation: isolate;
  text-decoration: none;
}

.capability-card-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,.08) 0%, rgba(5,8,10,.28) 34%, rgba(5,8,10,.92) 100%);
}

.capability-card:hover > img, .capability-card:focus-visible > img {
  transform: scale(1.06);
  filter: grayscale(.2);
}

.capability-card-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 92%;
}

.capability-card .capability-number {
  color: #D0D4D8;
  font-size: 10px;
  letter-spacing: .12em;
}

.capability-card .capability-name {
  color: #F5F5F5;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .015em;
}

.capability-card .capability-detail {
  color: rgba(245,245,245,.72);
  font-size: 10px;
  line-height: 1.5;
}

.capability-card .capability-arrow {
  position: absolute;
  right: 16px;
  bottom: 17px;
  color: #F5F5F5;
}

@media (max-width: 1050px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .capability-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .capability-card { min-height: 210px; padding: 22px; }
}

.enquiry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr);
    gap: clamp(32px, 7vw, 100px);
    align-items: start;
    margin-top: 58px;
}

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

.form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.enquiry-privacy {
    grid-column: 1 / -1;
}

.enquiry-aside-label {
    color: #666;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

.form-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid #c9c9c9;
    border-radius: 0;
    background: #fff;
    color: #0b0b0b;
    font: inherit;
    font-size: 13px;
    outline-offset: 3px;
}

.form-field textarea {
    min-height: 140px;
    resize: vertical;
}

.form-field textarea:focus {
    border-color: #0b0b0b;
    outline: 2px solid #a7a7a7;
}

.form-field textarea::placeholder {
    color: #777;
    opacity: 1;
}

.enquiry-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 54px;
    padding: 0 17px;
    border: 1px solid #0b0b0b;
    background: #0b0b0b;
    color: #f5f5f5;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.enquiry-submit:hover {
    background: #f5f5f5;
    color: #0b0b0b;
}

.enquiry-submit:focus-visible {
    outline: 3px solid #a7a7a7;
    outline-offset: 4px;
}

.contact-email-note {
    color: #666;
    font-size: 10px;
    line-height: 1.7;
}

.enquiry-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    background: #efefef;
}

.enquiry-aside a {
    color: #0b0b0b;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.enquiry-aside p {
    color: #555;
    font-size: 12px;
    line-height: 1.8;
}

.enquiry-aside-rule {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    background: #c9c9c9;
}

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-email-note {
    margin-top: 28px;
}

@media (max-width: 720px) {
    .enquiry-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-top: 38px;
    }

    .enquiry-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .form-field-full,
    .enquiry-submit,
    .enquiry-privacy {
        grid-column: auto;
    }

    .enquiry-aside {
        padding: 22px;
    }
}

.option-index {
    color: #a7a7a7;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.option-check {
    color: #a7a7a7;
    opacity: 0;
    transform: translate(-3px,3px);
    transition: opacity .25s ease, transform .25s ease;
}

@media (max-width: 720px) {
    .cinema-select-panel { max-height: 52vh; }
    .cinema-select-option { min-height: 46px; }
}




/* =========================================================
   OBLIQUE DOSSIER — restrained, unconventional art direction
   Keeps the established charcoal / pearl / steel identity.
   Accent is used sparingly as a signal, never as decoration.
   ========================================================= */
:root {
  --signal-oxide: #9D4337;
  --signal-oxide-soft: rgba(157, 67, 55, 0.16);
  --dossier-line: rgba(167, 167, 167, 0.24);
  --dossier-grid: rgba(245, 245, 245, 0.045);
  --dossier-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* An almost invisible technical grid: infrastructure, not sci-fi wallpaper. */
.hero-grid {
  background-image:
    linear-gradient(to right, var(--dossier-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dossier-grid) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.55) 64%, transparent 100%);
}

/* Add a discreet field-note stamp to the hero, like an editorial dossier. */
.hero::after {
  content: "JCL / FIELD NOTE 001";
  position: absolute;
  z-index: 2;
  top: 142px;
  right: clamp(24px, 5.2vw, 86px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(245, 245, 245, 0.54);
  font: 10px/1.4 var(--dossier-mono);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  border-left: 1px solid rgba(157, 67, 55, 0.9);
  padding: 12px 0 12px 10px;
  pointer-events: none;
}

.hero-eyebrow,
.section-topline,
.hero-index,
.hero-scroll,
.card-index,
.card-number,
.vertical-marker,
.form-field label {
  font-family: var(--dossier-mono);
  letter-spacing: 0.12em;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow-line {
  background: var(--signal-oxide);
  width: 42px;
  box-shadow: 0 0 18px rgba(157, 67, 55, 0.25);
}

/* Editorial typography: tightly controlled, not louder for its own sake. */
.hero-title {
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.hero-title > span:nth-child(2) {
  color: #D0D0D0;
}

.hero-period,
.silver-dot {
  color: var(--signal-oxide);
}

.hero-index {
  gap: 12px;
}

.hero-index-note {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 1px solid var(--signal-oxide);
  color: rgba(245,245,245,.5);
  font-size: 9px;
}

/* Section dividers behave like a dossier's registration marks. */
.section-topline {
  position: relative;
  border-bottom: 1px solid var(--dossier-line);
  padding-bottom: 16px;
}

.section-topline::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--signal-oxide);
}

.display-title {
  letter-spacing: -0.065em;
}

.vertical-marker {
  color: var(--signal-oxide);
}

.enable-card,
.capability-item,
.system-stage,
.sector-item {
  position: relative;
  isolation: isolate;
}

.enable-card::before,
.capability-item::before,
.system-stage::before,
.sector-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--signal-oxide);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.enable-card:hover::before,
.capability-item:hover::before,
.system-stage:hover::before,
.sector-item:hover::before {
  width: 100%;
}

.card-number,
.card-index {
  color: var(--signal-oxide);
}

/* The menu should feel like entering a private archive, not a standard drawer. */
.menu-overlay {
  background-image:
    linear-gradient(rgba(245,245,245,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,245,.025) 1px, transparent 1px);
  background-size: 56px 56px;
}

.menu-overlay::after {
  content: "ACCESS / NAVIGATION";
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: 32px;
  color: rgba(245,245,245,.38);
  font: 9px/1.4 var(--dossier-mono);
  letter-spacing: .18em;
  pointer-events: none;
}

.menu-navigation a span {
  color: var(--signal-oxide);
}

/* Slightly more considered form: formal, clear, quietly distinctive. */
.enquiry-form {
  border-top: 1px solid var(--signal-oxide);
}

.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  border-radius: 0;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus,
.enquiry-form select:focus {
  border-color: var(--signal-oxide);
  box-shadow: 0 0 0 3px var(--signal-oxide-soft);
}

#requirementSelect .cinema-select-panel {
  border-top: 2px solid var(--signal-oxide);
}

/* Keep the art direction deliberate on narrow screens. */
@media (max-width: 700px) {
  .hero::after {
    top: 106px;
    right: 16px;
    font-size: 8px;
    opacity: 0.8;
  }

  .hero-index-note {
    display: none;
  }

  .hero-grid {
    background-size: 48px 48px;
  }

  .menu-overlay::after {
    right: 20px;
    bottom: 18px;
    font-size: 8px;
  }
}


/* Operating principles — credibility without invented testimonials */
.proof-layout .display-title span { color: var(--oxide, #9D4337); }
.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 76px;
    background: #d9d9d6;
    border: 1px solid #d9d9d6;
}
.principle-item {
    position: relative;
    isolation: isolate;
    min-height: 300px;
    overflow: hidden;
    padding: 28px 25px 34px;
    background: #f5f5f5;
    transition: background .35s ease, color .35s ease;
}
.principle-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    right: -48px;
    bottom: -58px;
    border: 1px solid rgba(157,67,55,.24);
    transform: rotate(45deg);
    transition: transform .5s ease, border-color .35s ease;
}
.principle-item:hover { background: #0b0b0b; color: #f5f5f5; }
.principle-item:hover::after { transform: rotate(65deg) scale(1.25); border-color: rgba(157,67,55,.6); }
.principle-top { display:flex; justify-content:space-between; gap:16px; color:#777; font-size:8px; letter-spacing:.16em; }
.principle-item h3 { margin:54px 0 18px; font-size:clamp(20px,2.2vw,31px); font-weight:600; line-height:.98; letter-spacing:-.055em; }
.principle-item p { max-width:310px; color:#565656; font-size:11px; line-height:1.85; }
.principle-item:hover .principle-top, .principle-item:hover p { color:#b9b9b9; }
.principle-index { position:absolute; right:20px; bottom:12px; color:rgba(157,67,55,.16); font-size:68px; font-weight:600; line-height:1; letter-spacing:-.08em; }
@media (max-width: 760px) {
  .principle-grid { grid-template-columns:1fr; margin-top:48px; }
  .principle-item { min-height:250px; padding:24px 20px 34px; }
  .principle-item h3 { margin-top:42px; }
  .proof-bottom { flex-wrap:wrap; margin-top:48px; }
}
@media (prefers-reduced-motion: reduce) {
  .principle-item, .principle-item::after { transition:none; }
}