/*! Narendra Gravure Prints Ltd — site stylesheet. */
@font-face{font-family:'Neue Corp';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/PPNeueCorp-CompactRegular.woff2) format("woff2")}
@font-face{font-family:'Neue Corp';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/PPNeueCorp-CompactRegular.woff2) format("woff2")}
@font-face{font-family:'Neue Corp';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/PPNeueCorp-CompactRegular.woff2) format("woff2")}
@font-face{font-family:'Neue Corp';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/PPNeueCorp-CompactSemibold.woff2) format("woff2")}
@font-face{font-family:'Neue Corp';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/PPNeueCorp-CompactSemibold.woff2) format("woff2")}
@charset "UTF-8";

:root {
    --grid-gutter: 1.25rem;
    --grid-margin: 1.25rem;
    --grid-margin-negative: -1.25rem;
    --grid-columns: 12;
    /* Brand theme: Porcelain (cool white) + accent #a81111 (AAA on white, 7.6:1) */
    --color-orange: 168, 17, 17;
    --color-white: 253, 253, 253;
    --color-grey-50: 244, 245, 247;
    --color-grey-100: 224, 227, 231;
    --color-grey-200: 158, 163, 170;
    --color-grey-300: 108, 114, 122;
    --color-grey-400: 72, 77, 84;
    --color-grey-500: 46, 41, 48;
    --color-grey-600: 42, 37, 44;
    --color-grey-700: 33, 29, 34;
    --color-grey-800: 25, 23, 26;
    --color-grey-900: 19, 17, 20;
    --color-black: 22, 24, 27;
    --border-radius: .1875rem;
    --body-letter-spacing: -.015em;
    --ease: cubic-bezier(.53, 0, 0, 1);
    --menu-handle: cubic-bezier(.53, 0, 0, 1);
    --link-handle: cubic-bezier(.4, 0, .25, 1);
    --filter-blur: blur(5rem);
    --context: 1440
}

@media(max-width:980px)and (min-width:681px) {
    :root {
        --grid-margin: 1rem;
        --grid-gutter: 1rem;
        --grid-margin-negative: -1rem;
        --grid-columns: 8;
        --context: 820
    }
}

@media(max-width:680px) {
    :root {
        --grid-margin: 1rem;
        --grid-gutter: 1rem;
        --grid-margin-negative: -1rem;
        --grid-columns: 4;
        --context: 402
    }
}

:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: calc(100vw / var(--context) * 16)
}

body {
    box-sizing: border-box;
    cursor: default;
    line-height: 0;
    margin: 0;
    min-height: 100%;
    padding: 0;
    overflow-x: hidden;
    overflow-x: clip
}

svg,
canvas {
    height: 100%;
    width: 100%
}

canvas {
    height: auto;
    width: 100%
}

p {
    line-height: inherit
}

ul,
ol,
li {
    list-style: none
}

a {
    cursor: pointer
}

sup {
    vertical-align: super;
    font-size: 64%;
    line-height: 1
}

b,
strong {
    font-weight: 600
}

.visually--hidden {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal !important
}

.mask {
    position: relative;
    overflow: hidden
}

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

.fit--height {
    height: 100%;
    width: auto
}

.tt--ab {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.h--full {
    height: 100%
}

.parallax__container,
.hero__parallax__container {
    position: relative;
    overflow: hidden
}

.image--parallax,
.hero--parallax {
    height: 120%
}

.image__container {
    line-height: 0
}

.relative {
    position: relative
}

.text--center {
    text-align: center
}

.hidden {
    color: transparent;
    user-select: none
}

.page--out {
    cursor: progress !important
}

.none {
    display: none
}

.no--scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

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

.flex {
    display: flex
}

.flex--column {
    flex-direction: column
}

.wrp {
    box-sizing: border-box;
    padding: 0 var(--grid-margin);
    width: 100%
}

.wrp--left {
    box-sizing: border-box;
    padding-left: var(--grid-margin);
    width: 100%
}

.block__inner {
    box-sizing: border-box;
    padding-bottom: var(--grid-margin);
    padding-top: var(--grid-margin)
}

.grid__layout {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-auto-rows: min-content;
    column-gap: var(--grid-gutter)
}

.subgrid {
    display: grid;
    column-gap: var(--grid-gutter);
    grid-template-columns: subgrid;
    grid-auto-rows: min-content
}

.grid {
    display: grid;
    column-gap: var(--grid-gutter)
}

.grid__column--full {
    grid-column: 1/-1
}

.grid__column--half {
    grid-column: span calc(var(--grid-columns) / 2)
}

.grid__column--third {
    grid-column: span calc(var(--grid-columns) / 3)
}

.grid__column--two-thirds {
    grid-column: span calc(var(--grid-columns) / 3 * 2)
}

.grid__column--three-fourths {
    grid-column: span calc(var(--grid-columns) / 4 * 3)
}

.grid__column--fourth {
    grid-column: span calc(var(--grid-columns) / 4)
}

.grid__column--four-fifths {
    grid-column: span calc(var(--grid-columns) * 4 / 5)
}

.grid__column--fifth {
    grid-column: span calc(var(--grid-columns) / 5)
}

.pt--xxlarge {
    padding-top: 12.5rem
}

.pt--xlarge {
    padding-top: 7.5rem
}

.pt--large {
    padding-top: 5rem
}

.pt--medium {
    padding-top: 3.5rem
}

.pt--small {
    padding-top: 2.5rem
}

.pt--xsmall {
    padding-top: 2rem
}

.pt--xxsmall {
    padding-top: 1.5rem
}

.pt--margin {
    padding-top: var(--grid-margin)
}

.pb--xxlarge {
    padding-bottom: 12.5rem
}

.pb--xlarge {
    padding-bottom: 7.5rem
}

.pb--large {
    padding-bottom: 5rem
}

.pb--medium {
    padding-bottom: 3.5rem
}

.pb--small {
    padding-bottom: 2.5rem
}

.pb--xsmall {
    padding-bottom: 2rem
}

.pb--xxsmall {
    padding-bottom: 1.5rem
}

.pb--margin {
    padding-bottom: var(--grid-margin)
}

@media(max-width:980px)and (min-width:681px) {

    .grid__column--third,
    .grid__column--two-thirds {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .grid__column--three-fourths,
    .grid__column--four-fifths {
        grid-column: span calc(var(--grid-columns) / 8 * 6)
    }

    .grid__column--fourth,
    .grid__column--fifth {
        grid-column: span calc(var(--grid-columns) / 8 * 2)
    }

    .grid__column--three-fourths {
        grid-column: span calc(var(--grid-columns) / 4 * 3)
    }

    .pt--xxlarge {
        padding-top: 10rem
    }

    .pt--xlarge {
        padding-top: 6rem
    }

    .pt--large {
        padding-top: 4rem
    }

    .pt--medium {
        padding-top: 3rem
    }

    .pt--small {
        padding-top: 2.25rem
    }

    .pt--xsmall {
        padding-top: 1.75rem
    }

    .pt--xxsmall {
        padding-top: 1.25rem
    }

    .pb--xxlarge {
        padding-bottom: 10rem
    }

    .pb--xlarge {
        padding-bottom: 6rem
    }

    .pb--large {
        padding-bottom: 4rem
    }

    .pb--medium {
        padding-bottom: 3rem
    }

    .pb--small {
        padding-bottom: 2.25rem
    }

    .pb--xsmall {
        padding-bottom: 1.75rem
    }

    .pb--xxsmall {
        padding-bottom: 1.25rem
    }
}

@media(min-width:681px) {
    .grid__column.no-padding--left {
        margin-left: var(--grid-margin-negative)
    }

    .grid__column.no-padding--right {
        margin-right: var(--grid-margin-negative)
    }

    .grid__column--sticky {
        height: fit-content;
        position: sticky;
        top: var(--header-height)
    }
}

@media(max-width:680px) {

    .grid__column--half,
    .grid__column--third,
    .grid__column--two-thirds,
    .grid__column--three-fourths,
    .grid__column--fourth,
    .grid__column--fifth,
    .grid__column--four-fifths {
        grid-column: 1/-1
    }

    .pt--xxlarge {
        padding-top: 7.5rem
    }

    .pt--xlarge {
        padding-top: 5rem
    }

    .pt--large {
        padding-top: 3.5rem
    }

    .pt--medium {
        padding-top: 2.5rem
    }

    .pt--small {
        padding-top: 2rem
    }

    .pt--xsmall {
        padding-top: 1.5rem
    }

    .pt--xxsmall {
        padding-top: 1rem
    }

    .pb--xxlarge {
        padding-bottom: 7.5rem
    }

    .pb--xlarge {
        padding-bottom: 5rem
    }

    .pb--large {
        padding-bottom: 3.5rem
    }

    .pb--medium {
        padding-bottom: 2.5rem
    }

    .pb--small {
        padding-bottom: 2rem
    }

    .pb--xsmall {
        padding-bottom: 1.5rem
    }

    .pb--xxsmall {
        padding-bottom: 1rem
    }

    .wrp {
        padding: 0
    }

    .wrp--left {
        padding-left: 0
    }

    .block__inner {
        padding: var(--grid-margin)
    }
}

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

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

.btn--transparent {
    border: 1px solid rgb(var(--color-black));
    padding: .2rem .5rem;
    color: rgb(var(--color-black))
}

.btn--black {
    border: 1px solid rgb(var(--color-black));
    padding: .2rem .5rem;
    background-color: rgb(var(--color-black))
}

.btn--black a,
.btn--black a,
.btn--black span {
    color: rgb(var(--color-white))
}

.btn--inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between
}

.icon--menu {
    width: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.icon--menu span {
    width: 100%;
    height: 2px;
    background: rgb(var(--color-black));
    display: block
}

.icon--menu span:first-child {
    margin-bottom: 4px
}

body {
    background-color: rgb(var(--color-orange));
    box-sizing: border-box;
    color: rgb(var(--color-black));
    cursor: default;
    font-family: Neue Corp, sans-serif;
    font-weight: 500;
    letter-spacing: var(--body-letter-spacing);
    line-height: 0;
    margin: 0;
    padding: 0
}

::-moz-selection {
    color: rgb(var(--color-orange));
    background: rgb(var(--color-black));
    text-shadow: none
}

::selection {
    color: rgb(var(--color-orange));
    background: rgb(var(--color-black));
    text-shadow: none
}

section {
    position: relative
}

.bg--black,
.body--black {
    background-color: rgb(var(--color-black));
    color: rgb(var(--color-orange))
}

.bg--black .text__description,
.body--black .text__description {
    color: rgb(var(--color-grey-200))
}

.bg--grey-50,
.body--grey-50 {
    background-color: rgb(var(--color-grey-50))
}

.bg--grey-100,
.body--grey-100 {
    background-color: rgb(var(--color-grey-100))
}

.bg--orange,
.body--orange {
    background-color: rgb(var(--color-orange));
    color: rgb(var(--color-black))
}

/* NGPL: hero fill — follows the global paper token so the section-bg wheel covers it */
.home__hero.bg--orange {
    background-color: rgb(var(--color-grey-50))
}

.bg--orange .text__description,
.body--orange .text__description {
    color: rgb(var(--color-black))
}

.bg--no-scroll,
.body--no-scroll {
    overflow: hidden
}

.body--grey-50 {
    background-color: rgb(var(--color-grey-50))
}

.link--underline {
    display: inline-flex;
    position: relative
}

.link--underline:before {
    background: currentcolor;
    bottom: 0;
    content: "";
    height: 1.5px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease;
    position: absolute;
    width: 100%
}

.button__link {
    display: inline-block
}

.button__link--full {
    width: 100%
}

a {
    display: inline-flex
}

.plus__icon {
    height: 1.5rem;
    position: relative;
    transition: transform .6s var(--link-handle);
    width: 1.5rem
}

.plus__icon:after,
.plus__icon:before {
    background: currentcolor;
    content: "";
    position: absolute;
    transition: background-color .3s ease, transform .6s var(--link-handle)
}

.plus__icon:after {
    height: .125rem;
    left: 0;
    top: calc(50% - .0625rem);
    transform-origin: left;
    width: 100%
}

.plus__icon:before {
    height: 100%;
    left: calc(50% - .0625rem);
    top: 0;
    transform-origin: top;
    width: .125rem
}

.pretitle+.title {
    margin-top: 1.25rem
}

.text__description a {
    text-decoration: underline;
    text-underline-offset: .125rem;
    text-decoration-thickness: 1px
}

.text__description+a {
    display: inline-block
}

.text__description p+p,
.text__description p+ul {
    padding-top: 1em
}

.text__description ul {
    padding-left: 1.375rem
}

.text__description ul li {
    display: list-item;
    list-style: square
}

.text__description ul+p,
.text__description ul+ul {
    padding-bottom: 1em
}

.title+.button,
.title+.button__link,
.text__description+.button,
.text__description+a,
.text__description+a {
    margin-top: 2rem
}

.section__title+.text__description {
    margin-top: .875rem
}

.background__video {
    object-fit: cover
}

@media(hover:hover) {
    .text__description a {
        transition: color .25s ease
    }

    .text__description a:hover,
    .bg--black .text__description a:hover {
        color: rgb(var(--color-orange))
    }
}

@media(max-width:980px) {

    .text__description h2,
    .text__description h3 {
        font-size: clamp(36px, 2.5rem, 54px);
        line-height: 1
    }
}

@media(max-width:680px) {

    .text__description h2,
    .text__description h3 {
        font-size: 2.5rem;
        line-height: 1
    }
}

.c__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

.c__header .c__square {
    background: currentcolor;
    display: block;
    width: .5rem;
    height: .5rem;
    margin-top: .3125rem;
    transition: opacity 0s .6s
}

/* ====================== NGPL: register-mark variants for .c__square ======================
   Circular concepts, simple to complex. Switched globally via html[data-mark]. */
html[data-mark] .c__header .c__square,
html[data-mark] .project-cross-info__header .c__square {
    position: relative;
    box-sizing: border-box;
    border-radius: 50%
}

/* 1 · Dot — plain solid circle */
html[data-mark="1"] .c__header .c__square,
html[data-mark="1"] .project-cross-info__header .c__square {
    width: .5rem;
    height: .5rem
}

/* 2 · Ring — hollow register target */
html[data-mark="2"] .c__header .c__square,
html[data-mark="2"] .project-cross-info__header .c__square {
    width: .625rem;
    height: .625rem;
    background: none;
    border: 1.5px solid currentcolor
}

/* 3 · Bullseye — ring with centre dot */
html[data-mark="3"] .c__header .c__square,
html[data-mark="3"] .project-cross-info__header .c__square {
    width: .75rem;
    height: .75rem;
    background: none;
    border: 1px solid currentcolor
}
html[data-mark="3"] .c__square:before,
html[data-mark="3"] .project-cross-info__header .c__square:before {
    content: "";
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    background: currentcolor
}

/* 4 · Crosshair — ring crossed by hairlines, the classic register mark */
html[data-mark="4"] .c__header .c__square,
html[data-mark="4"] .project-cross-info__header .c__square {
    width: .875rem;
    height: .875rem;
    background: none;
    border: 1px solid currentcolor
}
html[data-mark="4"] .c__square:before,
html[data-mark="4"] .c__square:after,
html[data-mark="4"] .project-cross-info__header .c__square:before,
html[data-mark="4"] .project-cross-info__header .c__square:after {
    content: "";
    position: absolute;
    background: currentcolor
}
html[data-mark="4"] .c__square:before,
html[data-mark="4"] .project-cross-info__header .c__square:before {
    left: 50%;
    top: -25%;
    bottom: -25%;
    width: 1px;
    transform: translateX(-.5px)
}
html[data-mark="4"] .c__square:after,
html[data-mark="4"] .project-cross-info__header .c__square:after {
    top: 50%;
    left: -25%;
    right: -25%;
    height: 1px;
    transform: translateY(-.5px)
}

/* 5 · Quadrant target — alternating quarters inside a ring (colour-registration target) */
html[data-mark="5"] .c__header .c__square,
html[data-mark="5"] .project-cross-info__header .c__square {
    width: .875rem;
    height: .875rem;
    background: none;
    border: 1px solid currentcolor
}
html[data-mark="5"] .c__square:before,
html[data-mark="5"] .project-cross-info__header .c__square:before {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 50%;
    background: conic-gradient(currentcolor 0 25%, transparent 25% 50%, currentcolor 50% 75%, transparent 75%)
}

.c__header.hide .c__square {
    opacity: 0
}

.c__header+.section__title {
    margin-top: 2rem
}

.c__header--dark {
    color: rgb(var(--color-dark))
}

.c__header--orange {
    color: rgb(var(--color-orange))
}

.video__block {
    width: 100vw;
    height: 100vh;
    position: relative
}

.background__video:before {
    content: "";
    background: rgba(var(--color-black), .1);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.hero__back__image {
    background: rgb(var(--color-black))
}

.hero__back__image.back--overlay:before {
    background: rgba(var(--color-black), .08);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.hero__back__image.header--gradient:after {
    background: linear-gradient(0deg, rgba(var(--color-black), 0), rgba(var(--color-black), .35));
    content: "";
    height: 20vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.hero__back__image>div {
    height: 100%;
    width: 100%
}

.separator.bg--grey-50 {
    border-top: 1px solid rgb(var(--color-grey-200))
}

.separator.bg--grey-100 {
    border-top: 1px solid rgb(var(--color-grey-300))
}

.separator.bg--orange {
    border-top: 1px solid rgb(var(--color-black))
}

@media(hover:hover) {
    .link--underline:hover:before {
        transform-origin: left;
        transform: scaleX(1)
    }
}

.bg--transparent {
    background: transparent
}

@media(min-width:981px) {
    .grid__separator .grid__column {
        height: 4rem
    }
}

@media(min-width:681px) {
    .video__block {
        max-height: 66.67vw
    }

    .bg--grey-50 .grid__column+.grid__column {
        border-left: solid 1px rgb(var(--color-grey-200))
    }

    .bg--grey-100 .grid__column+.grid__column {
        border-left: solid 1px rgb(var(--color-grey-300))
    }

    .bg--orange .grid__column+.grid__column {
        border-left: solid 1px rgb(var(--color-black))
    }

    .bg--black .grid__column+.grid__column {
        border-left: solid 1px rgba(var(--color-orange), .6)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .grid__separator .grid__column {
        height: 3rem
    }
}

@media(max-width:680px) {
    .video__block {
        max-height: 100vw
    }

    .bg--grey-50 .grid__column+.grid__column {
        border-top: solid 1px rgb(var(--color-grey-200))
    }

    .bg--grey-100 .grid__column+.grid__column {
        border-top: solid 1px rgb(var(--color-grey-300))
    }

    .bg--orange .grid__column+.grid__column {
        border-top: solid 1px rgb(var(--color-black))
    }

    .bg--black .grid__column+.grid__column {
        border-top: solid 1px rgba(var(--color-orange), .6)
    }

    .grid__column:empty,
    .cross-hair__column {
        display: none
    }

    .grid__separator .grid__column {
        display: block
    }

    .grid__separator .grid__column+.grid__column {
        display: none
    }

    .grid__separator .grid__column {
        height: 2rem
    }
}

.w--400 {
    font-weight: 400
}

.w--500 {
    font-weight: 500
}

.w--600 {
    font-weight: 600
}

.w--700 {
    font-weight: 700
}

.pretitle {
    font-weight: 600;
    font-size: clamp(16px, 1.125rem, 24px);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase
}

.button {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em
}

.title {
    letter-spacing: -.01em
}

.title--xxxl {
    font-size: clamp(176px, 12.5rem, 268px);
    line-height: .8
}

.title--xxl {
    font-size: clamp(144px, 10rem, 200px);
    line-height: .8667
}

.title--xxl {
    font-size: clamp(120px, 10rem, 200px);
    line-height: .8667
}

.title--xl {
    font-size: clamp(108px, 7.5rem, 160px);
    line-height: .8667
}

.title--xl .line+.line {
    margin-top: -.9375rem
}

.title--xl .line--inner {
    padding-bottom: .9375rem
}

.title--l {
    font-size: clamp(72px, 5rem, 108px);
    line-height: .9
}

.title--l .line+.line {
    margin-top: -.625rem
}

.title--l .line--inner {
    padding-bottom: .625rem
}

.title--m {
    font-size: clamp(46px, 3.25rem, 70px);
    line-height: .925
}

.title--m .line+.line {
    margin-top: -.375rem
}

.title--m .line--inner {
    padding-bottom: .375rem
}

.title--s {
    font-size: clamp(36px, 2.5rem, 54px);
    line-height: 1
}

.title--s .line+.line {
    margin-top: -.25rem
}

.title--s .line--inner {
    padding-bottom: .25rem
}

.title--xs {
    font-size: clamp(28px, 2rem, 44px);
    line-height: 1.1
}

.title--xs .line+.line {
    margin-top: -.15rem
}

.text--xl {
    font-size: clamp(21px, 1.5rem, 32px);
    line-height: 1.2
}

.text--l {
    font-size: clamp(16px, 1.125rem, 24px);
    line-height: 1.25
}

.text--m {
    font-size: clamp(10px, .9375rem, 20px);
    line-height: 1.3334
}

.text--s {
    font-size: clamp(11px, .8125rem, 16px);
    line-height: 1.3334;
    letter-spacing: .01em
}

@media(max-width:980px) {
    .title--xxxl {
        font-size: clamp(144px, 10rem, 200px);
        line-height: .8667
    }

    .title--xxl {
        font-size: clamp(108px, 7.5rem, 160px);
        line-height: .8667
    }

    .title--xl {
        font-size: clamp(72px, 5rem, 108px);
        line-height: .9
    }

    .title--l {
        font-size: clamp(58px, 4rem, 86px);
        line-height: .9
    }

    .title--m {
        font-size: clamp(36px, 2.5rem, 54px);
        line-height: 1
    }

    .title--s {
        font-size: clamp(28px, 2rem, 44px);
        line-height: 1.1
    }

    .title--xs {
        font-size: clamp(24px, 1.75rem, 36px);
        line-height: 1.2
    }
}

@media(max-width:680px) {
    .title--xxxl {
        font-size: clamp(144px, 10rem, 200px);
        line-height: .8667
    }

    .title--xxl {
        font-size: clamp(108px, 7.5rem, 160px);
        line-height: .8667
    }

    .title--xl {
        font-size: clamp(72px, 5rem, 108px);
        line-height: .9
    }

    .title--l {
        font-size: 3.5rem;
        line-height: .9
    }

    .title--m {
        font-size: 2.5rem;
        line-height: 1
    }

    .title--s {
        font-size: 1.6875rem;
        line-height: 1
    }

    .title--xs {
        font-size: 1.5rem;
        line-height: 1.2
    }

    .text--xl {
        font-size: clamp(17px, 1.25rem, 26px);
        line-height: 1.2
    }
}











.transition__layer {
    align-items: center;
    display: flex;
    justify-content: center;
    background: rgb(var(--color-black));
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    transition: opacity .25s ease;
    z-index: 9
}

.loading__dot {
    background-color: rgb(var(--color-white));
    opacity: 0;
    height: .75rem;
    width: .75rem
}

@keyframes loading {

    0%,
    to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.page--in .transition__layer {
    opacity: 0
}

.fade--out .header__logo__link svg {
    fill: rgb(var(--color-white))
}

.fade--out .menu__trigger {
    background-color: transparent !important;
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-white))
}

.fade--out .menu__trigger .menu__icon {
    border-color: rgb(var(--color-white))
}

.fade--out .menu__trigger .menu__icon .menu__icon--line:before,
.fade--out .menu__trigger .menu__icon .menu__icon--line:after {
    background: rgb(var(--color-white))
}

.fade--out .contact__trigger {
    background: rgb(var(--color-white));
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-black))
}

.fade--out .contact__trigger .button__icon .button__icon__inner--1 .button__arrow {
    fill: rgb(var(--color-black))
}

.fade--out .loading__dot {
    animation: loading .8s step-end infinite;
    animation-delay: 2s
}

.page__header {
    position: fixed;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    top: 0;
    transition: transform .6s var(--menu-handle);
    width: 100%;
    z-index: 10
}

.footer--in .page__header {
    transform: translate3d(0, -100%, 0)
}

.scroll--top .menu__trigger {
    background-color: transparent
}

.page__header__inner {
    box-sizing: border-box
}

.header__logo {
    height: 100%;
    pointer-events: all
}

.header__logo__link {
    align-items: center;
    display: flex;
    gap: .3125rem;
    height: 100%;
    margin: -1rem var(--grid-margin-negative);
    padding: 1rem var(--grid-margin);
    width: fit-content
}

.header__logo__link span {
    display: inline-flex;
    height: 1.25rem;
    width: fit-content
}

.header__logo__link span svg {
    fill: rgb(var(--color-black));
    transition: fill .25s ease;
    width: auto
}

.header__nav {
    pointer-events: all
}

.header__nav__item {
    width: 100%
}

.menu__icon {
    border-left: solid 1px rgb(var(--color-black));
    height: 100%;
    transition: background-color .3s ease, border-color .3s ease;
    position: relative
}

.menu__icon .menu__icon__inner {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    height: .75rem;
    padding: .8125rem 1.125rem
}

.menu__icon .menu__icon--line {
    height: .09375rem;
    position: relative;
    overflow: hidden;
    width: 1.75rem
}

.menu__icon .menu__icon--line:before,
.menu__icon .menu__icon--line:after {
    background: rgb(var(--color-black));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.menu__icon .menu__icon--line:before {
    transform-origin: left;
    transition: background-color .3s ease, transform .6s var(--menu-handle) .2s
}

.menu__icon .menu__icon--line:after {
    transform-origin: right;
    transform: translate3d(-100%, 0, 0);
    transition: background-color .3s ease, transform .6s var(--menu-handle)
}

.menu__trigger {
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem)
}

.menu__trigger,
.contact__trigger {
    min-width: initial !important
}

.body--black .header__logo__link svg,
.header--white .header__logo__link svg,
.header--graph .header__logo__link svg {
    fill: rgb(var(--color-white))
}

.body--black .menu__trigger,
.header--white .menu__trigger,
.header--graph .menu__trigger {
    background-color: transparent;
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-white))
}

.body--black .menu__trigger .menu__icon,
.header--white .menu__trigger .menu__icon,
.header--graph .menu__trigger .menu__icon {
    border-color: rgb(var(--color-white))
}

.body--black .menu__trigger .menu__icon .menu__icon--line:before,
.body--black .menu__trigger .menu__icon .menu__icon--line:after,
.header--white .menu__trigger .menu__icon .menu__icon--line:before,
.header--white .menu__trigger .menu__icon .menu__icon--line:after,
.header--graph .menu__trigger .menu__icon .menu__icon--line:before,
.header--graph .menu__trigger .menu__icon .menu__icon--line:after {
    background: rgb(var(--color-white))
}

.body--black .contact__trigger,
.header--white .contact__trigger,
.header--graph .contact__trigger {
    background: rgb(var(--color-white));
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-black))
}

.body--black .contact__trigger .button__icon .button__icon__inner--1 .button__arrow,
.header--white .contact__trigger .button__icon .button__icon__inner--1 .button__arrow,
.header--graph .contact__trigger .button__icon .button__icon__inner--1 .button__arrow {
    fill: rgb(var(--color-black))
}

body:not(.scroll--top):not(.header--graph).body--grey-50 .menu__trigger {
    background-color: rgba(var(--color-grey-50), .8)
}

body:not(.scroll--top):not(.header--graph).body--black .menu__trigger {
    background-color: rgba(var(--color-black), .8)
}

body:not(.scroll--top):not(.header--graph).body--orange .menu__trigger {
    background-color: rgba(var(--color-orange), .8)
}

body:not(.scroll--top):not(.header--graph) .header--white .menu__trigger {
    background-color: transparent
}

@media(hover:hover) {

    .menu__trigger:before,
    .menu__icon:before {
        background-color: rgb(var(--color-orange));
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: opacity .25s ease;
        width: 100%;
        z-index: 0
    }

    .menu__trigger:before {
        background-color: rgb(var(--color-orange))
    }

    .menu__icon:before {
        background-color: rgb(var(--color-black))
    }

    body:not(.scroll--top).body--grey-50 .menu__trigger:hover:before,
    .scroll--top.body--grey-50 .menu__trigger:hover:before {
        opacity: 1
    }

    body:not(.scroll--top).body--grey-50 .menu__trigger:hover .menu__icon:before,
    .scroll--top.body--grey-50 .menu__trigger:hover .menu__icon:before {
        opacity: 1
    }

    body:not(.scroll--top).body--grey-50 .menu__trigger:hover .menu__icon--line:before,
    .scroll--top.body--grey-50 .menu__trigger:hover .menu__icon--line:before {
        background-color: rgb(var(--color-white));
        transform-origin: right;
        transform: translate3d(100%, 0, 0);
        transition: background-color .3s ease, transform .6s var(--menu-handle)
    }

    body:not(.scroll--top).body--grey-50 .menu__trigger:hover .menu__icon--line:after,
    .scroll--top.body--grey-50 .menu__trigger:hover .menu__icon--line:after {
        background-color: rgb(var(--color-white));
        transform-origin: left;
        transform: translateZ(0);
        transition: background-color .3s ease, transform .6s var(--menu-handle) .2s
    }

    body:not(.scroll--top).body--black .menu__trigger:hover:before,
    .scroll--top.body--black .menu__trigger:hover:before {
        opacity: 1
    }

    body:not(.scroll--top).body--black .menu__trigger:hover .menu__icon:before,
    .scroll--top.body--black .menu__trigger:hover .menu__icon:before {
        opacity: 1
    }

    body:not(.scroll--top).body--black .menu__trigger:hover .menu__icon--line:before,
    .scroll--top.body--black .menu__trigger:hover .menu__icon--line:before {
        background-color: rgb(var(--color-white));
        transform-origin: right;
        transform: translate3d(100%, 0, 0);
        transition: background-color .3s ease, transform .6s var(--menu-handle)
    }

    body:not(.scroll--top).body--black .menu__trigger:hover .menu__icon--line:after,
    .scroll--top.body--black .menu__trigger:hover .menu__icon--line:after {
        background-color: rgb(var(--color-white));
        transform-origin: left;
        transform: translateZ(0);
        transition: background-color .3s ease, transform .6s var(--menu-handle) .2s
    }

    .menu__trigger:hover {
        color: rgb(var(--color-black)) !important
    }
}

@media(min-width:681px) {
    .page__header__inner {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        column-gap: var(--grid-gutter);
        padding: .75rem 0
    }

    .header__logo {
        grid-column: span 2
    }

    .header__nav {
        display: flex;
        grid-column: 9/13;
        gap: .75rem;
        padding-left: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .header__logo {
        grid-column: span 2
    }

    .header__nav {
        grid-column: 5/9
    }
}

@media(max-width:680px) {
    .page__header__inner {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: .75rem var(--grid-margin)
    }

    .header__logo__link .header__logo__text {
        display: none
    }

    .header__logo__link .header__logo__symbol {
        height: 1.75rem
    }

    .header__nav {
        width: calc(50% - var(--grid-gutter))
    }

    .header__nav__item--contact {
        display: none !important
    }
}

.prefooter {
    position: relative;
    overflow: hidden
}

.prefooter .prefooter__back:before {
    content: "";
    background: rgba(var(--color-black), .3);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.prefooter .prefooter__back video {
    clip-path: none;
    object-fit: cover;
    width: 100%;
    max-height: 120%;
    height: 100%
}

.prefooter .prefooter__back scroll-frames {
    display: flex;
    justify-content: center
}

.prefooter .prefooter__back scroll-frames canvas {
    height: 100%;
    width: auto
}

.prefooter .prefooter__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 1
}

.prefooter .prefooter__top {
    border-bottom: solid 1px rgba(var(--color-white), 1)
}

.prefooter .prefooter__top .text__description {
    color: rgb(var(--color-white))
}

.prefooter .prefooter__top .grid__layout {
    grid-auto-rows: auto
}

.prefooter .title {
    color: rgb(var(--color-white))
}

.page__footer {
    display: flex;
    flex-direction: column
}

.footer__container {
    position: relative;
    overflow: hidden
}

.footer__menu.primary__menu--footer {
    columns: 2;
    column-gap: 0
}

.footer__menu__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gutter)
}

.footer__menu__item+.footer__menu__item {
    margin-top: .25rem
}

.footer__menu__item .current {
    font-weight: 600;
    pointer-events: none
}

.footer__menu__column .menu__langs {
    margin-top: clamp(40.002px, 3.7501875rem, 80.004px)
}

.footer__window {
    position: relative;
    overflow: hidden;
    border-top: solid 1px rgb(var(--color-black))
}

.footer__window .footer__logo {
    aspect-ratio: 4.42/1
}

.footer__window .footer__logo__inner {
    box-sizing: border-box
}

.footer__window .footer__over {
    pointer-events: none
}

.subfooter {
    border-top: solid 1px rgb(var(--color-black))
}

.subfooter .legal__link {
    text-transform: uppercase
}

.subfooter .legal__link:before {
    height: 1px
}

.subfooter .legal__link.current {
    font-weight: 600;
    pointer-events: none
}

.footer__over {
    width: 100%
}

.footer__parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media(min-width:981px) {
    .footer__container .grid__column:not(:first-child) .block__inner {
        padding-left: var(--grid-margin)
    }

    .prefooter {
        height: 100vh
    }

    .prefooter .prefooter__inner,
    .prefooter .prefooter__top,
    .prefooter .prefooter__top div {
        height: 100%
    }

    .footer__window .footer__logo__inner {
        padding: 3rem 0 3rem var(--grid-margin)
    }

    .subfooter__column {
        grid-column: span calc(var(--grid-columns) / 3)
    }

    .subfooter__column:not(:first-child) {
        box-sizing: border-box;
        padding-left: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .footer__container .grid__column:nth-child(2) .block__inner {
        padding-left: var(--grid-margin)
    }

    .footer__container .grid__column:nth-child(3) {
        border-left: 0 !important;
        position: relative
    }

    .footer__container .grid__column:nth-child(3):before {
        background: currentcolor;
        content: "";
        height: 1px;
        left: var(--grid-margin-negative);
        position: absolute;
        top: 0;
        width: calc(100vw + var(--grid-margin) * 2)
    }

    .footer__container .grid__column:nth-child(3):after {
        background: currentcolor;
        content: "";
        height: 100%;
        right: calc(var(--grid-margin-negative) - 1px);
        position: absolute;
        top: 0;
        width: 1px
    }

    .footer__window .footer__logo__inner {
        padding: 2.5rem 0 2.5rem calc(var(--grid-margin) / 2)
    }

    .subfooter__column {
        grid-column: span calc(var(--grid-columns) / 4);
        box-sizing: border-box;
        padding-left: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .footer__container {
        border-top: solid 1px rgb(var(--color-black))
    }

    .prefooter .grid__column+.grid__column {
        border-left: solid 1px rgb(var(--color-white))
    }

    .prefooter .prefooter__top .text__description {
        max-width: 87.5%
    }

    .subfooter .grid__layout {
        position: relative
    }

    .subfooter__author {
        top: 0;
        position: absolute;
        right: 0;
        text-transform: uppercase
    }
}

/* NGPL: at tablet widths the absolute author line collides with the legal links — stack it on its own row */
@media(min-width:681px) and (max-width:1180px) {
    .subfooter__author {
        position: static;
        grid-column: 1/-1;
        padding-top: .375rem
    }
}

@media(max-width:680px) {
    .prefooter .grid__column+.grid__column {
        border-top: none
    }

    .prefooter .prefooter__top .text__description {
        max-width: 80%
    }

    .page__footer .grid__separator {
        display: none
    }

    .footer__window .footer__logo__inner {
        padding: 1.25rem var(--grid-margin)
    }

    .subfooter {
        box-sizing: border-box;
        padding: 0 var(--grid-margin)
    }

    .subfooter .grid__layout {
        gap: .25rem
    }

    .subfooter__column {
        grid-column: 1/-1
    }

    .subfooter__column:first-child {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .subfooter__column:not(:first-child) {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .subfooter__author {
        grid-column: span calc(var(--grid-columns) / 2);
        text-transform: uppercase
    }

    .footer__menu__item:nth-child(5),
    .footer__menu__item:nth-child(6),
    .footer__menu__item:nth-child(7),
    .footer__menu__item:nth-child(8) {
        padding-left: var(--grid-gutter)
    }
}

.page__menu {
    position: fixed;
    height: 100dvh;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    z-index: 100
}

.menu__container {
    clip-path: inset(0 0 0 100%);
    background: rgb(var(--color-white));
    bottom: .75rem;
    color: rgb(var(--color-black));
    display: flex;
    flex-direction: column;
    position: absolute;
    transition: clip-path .6s var(--menu-handle);
    right: .75rem;
    top: .75rem;
    z-index: 11
}

.menu__back {
    background: rgba(var(--color-black), .5);
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem);
    height: 100%;
    opacity: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .6s ease;
    width: 100%;
    z-index: 10
}

.menu__header {
    display: flex;
    justify-content: space-between;
    padding: .5rem
}

.menu__logo__link {
    display: block;
    height: 1.25rem;
    padding: .75rem;
    width: fit-content
}

.menu__logo__link svg {
    transition: fill .25s ease;
    width: auto
}

.menu__close {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    transition: background-color .25s ease
}

.menu__close .menu__close__inner {
    height: 1.375rem;
    width: 1.375rem
}

.menu__main {
    flex: 1;
    height: 100%;
    overflow: scroll
}

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

.menu__main .menu__main__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.menu__primary .main__menu__item {
    position: relative
}

.menu__primary .main__menu__item .menu__item__link {
    display: block;
    padding: 1rem var(--grid-margin)
}

.menu__primary .main__menu__item .menu__item__link .mask>span {
    padding-bottom: .1875rem
}

.menu__primary .main__menu__item .menu__item__link.current {
    opacity: .3;
    pointer-events: none
}

.menu__primary .main__menu__item+.main__menu__item:before {
    background: rgb(var(--color-black));
    content: "";
    left: 0;
    height: 1px;
    position: absolute;
    top: 0;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0s .6s;
    width: 100%
}

.menu__primary .main__menu__item.has__submenu ul {
    overflow: hidden;
    transition: height .6s var(--link-handle)
}

.menu__primary .main__menu__item.has__submenu li:last-child {
    margin-bottom: 1.25rem
}

.menu__primary .main__menu__item.has__submenu .menu__item__submenu {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1rem var(--grid-margin)
}

.menu__primary .main__menu__item.has__submenu .submenu__icon:before {
    transform: scaleY(0)
}

.menu__primary .main__menu__item.has__submenu .submenu__icon:after {
    transform: scaleX(0)
}

.menu__primary .main__menu__item.has__submenu.item--open .submenu__icon {
    transform: rotate(180deg)
}

.menu__primary .main__menu__item.has__submenu.item--open .submenu__icon:before {
    transform: scaleY(0) !important
}

.menu__primary .main__menu__subitem>.menu__item__link {
    display: block;
    padding: 0 var(--grid-margin)
}

.menu__primary .main__menu__subitem+.main__menu__subitem {
    margin-top: .25rem
}

.menu__secondary {
    display: flex;
    position: relative;
    width: 100%
}

.menu__secondary:before {
    background: rgb(var(--color-black));
    content: "";
    left: 0;
    height: 1px;
    position: absolute;
    top: 0;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0s .6s;
    width: 100%
}

.menu__secondary .menu__secondary__column {
    padding: var(--grid-margin);
    width: 50%
}

.menu__secondary .menu__secondary__column:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

.menu__secondary .menu__secondary__column:last-child:before {
    background: rgb(var(--color-black));
    content: "";
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0s .6s;
    width: 1px
}

.menu__secondary .menu__secondary__column .current {
    font-weight: 600;
    pointer-events: none
}

.menu__secondary .secondary__menu__item:first-child {
    margin-top: -.125rem
}

.menu__secondary .secondary__menu__item .menu__item__link {
    display: inline-flex;
    padding: .125rem 0
}

.menu__langs {
    display: flex;
    gap: .375rem
}

.lang--active {
    pointer-events: none
}

.menu__item__link>.mask,
.menu__item__submenu>.mask {
    display: block
}

.menu__item__link>.mask>span,
.menu__item__submenu>.mask>span {
    display: block;
    transform: translate3d(0, -100%, 0);
    transition: transform 0s .6s
}

.menu--opened .page__menu {
    pointer-events: auto
}

.menu--opened .menu__container {
    clip-path: inset(0 0 0 0)
}

.menu--opened .menu__back {
    opacity: 1;
    pointer-events: auto
}

.menu--opened .main__menu__item+.main__menu__item:before {
    transform: scaleX(1);
    transition: transform 1s var(--menu-handle)
}

.menu--opened .menu__secondary:before {
    transform: scaleX(1);
    transition: transform 1s var(--menu-handle)
}

.menu--opened .menu__secondary .menu__secondary__column:last-child:before {
    transform: scaleY(1);
    transition: transform 1s var(--menu-handle)
}

.menu--opened .menu__primary .main__menu__item.has__submenu .menu__item__submenu .submenu__icon:after {
    transform: scaleX(1)
}

.menu--opened .menu__primary .main__menu__item.has__submenu .menu__item__submenu .submenu__icon:before {
    transform: scaleY(1)
}

.menu--opened .menu__item__link>.mask>span,
.menu--opened .menu__item__submenu>.mask>span {
    transform: translateZ(0);
    transition: transform 1s var(--menu-handle)
}

body:not(.menu--opened) .submenu__icon:after,
body:not(.menu--opened) .submenu__icon:before {
    transition-delay: .6s
}

@media(hover:hover) {
    .menu__close:hover {
        background: rgb(var(--color-orange))
    }

    .menu__logo__link:hover svg {
        fill: rgb(var(--color-orange))
    }

    .menu__main .menu__item__link,
    .menu__main .menu__item__submenu,
    .menu__main .menu__langs a {
        cursor: pointer;
        transition: color .25s ease
    }

    .menu__main .menu__item__link:hover,
    .menu__main .menu__item__submenu:hover,
    .menu__main .menu__langs a:hover {
        color: rgb(var(--color-orange))
    }
}

@media(min-width:681px) {
    .menu__container {
        width: calc((100vw - (var(--grid-margin)) * 2 - (var(--grid-gutter)) * (var(--grid-columns) - 1)) / var(--grid-columns) * 4 + var(--grid-gutter) * 3)
    }

    .menu__main {
        padding-top: clamp(2.5rem, 12.5vh, 7.5rem)
    }
}

@media(min-width:981px)and (min-aspect-ratio:2/1) {
    .menu__main {
        padding-top: 2.5rem
    }
}

@media(min-width:981px)and (min-aspect-ratio:3/1) {
    .menu__main {
        padding-top: 0
    }
}

@media(max-width:680px) {
    .menu__container {
        left: .75rem
    }

    .menu__main {
        padding-top: 4rem
    }
}

animated-number {
    overflow: hidden;
    display: block
}

animated-number .number {
    display: inline-block
}

animated-title {
    display: block
}

animated-title .char {
    position: relative;
    --opa: 0
}

animated-title .char:after {
    background: currentColor;
    height: 100%;
    content: "";
    width: 1ch;
    top: 0;
    left: 0;
    position: absolute;
    opacity: var(--opa)
}

animated-title+.section__title {
    margin-top: 2rem
}

.line {
    overflow: hidden;
    position: relative
}

.line--inner {
    display: block
}

line-text .line {
    position: relative;
    width: fit-content !important
}

line-text .line--inner {
    display: inline-block;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: none
}

line-text .line--mask {
    background: currentcolor;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform-origin: left center
}

line-text .animated--line .line--mask {
    height: 100%;
    animation: growAndSlide 1.2s ease-in-out forwards
}

line-text .animated--line .line--inner {
    animation: appear 1.2s ease-in-out forwards
}

line-text+.button,
line-text+a {
    margin-top: 1.25rem
}

hero-title .line {
    position: relative;
    width: fit-content !important
}

hero-title .line--inner {
    display: inline-block;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: none;
    will-change: opacity;
    transform: translateZ(0)
}

hero-title .line--mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: currentcolor;
    z-index: 2;
    pointer-events: none;
    transform-origin: left center
}

hero-title .animated--line .line--mask {
    height: 100%;
    animation: growAndSlide 1.2s ease-in-out forwards
}

hero-title .animated--line .line--inner {
    animation: appear 1.2s ease-in-out forwards
}

hero-title+.text__description {
    margin-top: .75rem
}

animated-herotitle {
    display: block;
    margin-bottom: 2rem;
    opacity: 0
}

@media(max-width:680px) {
    animated-herotitle {
        margin-bottom: 1.25rem
    }
}

.page--in animated-herotitle {
    opacity: 1
}

@keyframes growAndSlide {
    0% {
        width: 0;
        transform: translate(0)
    }

    45% {
        width: 100%;
        transform: translate(0)
    }

    55% {
        width: 100%;
        transform: translate(0)
    }

    to {
        width: 100%;
        transform: translate(101%)
    }
}

@keyframes appear {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.button {
    align-items: center;
    border: solid 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    min-width: 15rem;
    transition: background .25s ease, color .25s ease
}

.button.filter--btn {
    padding: .71875rem 0;
    min-width: auto;
    width: fit-content
}

.button.filter--btn.active {
    background: rgb(var(--color-black));
    border-color: rgb(var(--color-black));
    color: rgb(var(--color-white))
}

.button.filter--btn.active .button__icon {
    border-color: transparent
}

.button.filter--btn.active .button__icon .button__icon__inner--1 .button__arrow {
    fill: rgb(var(--color-white))
}

.button.filter--btn.active .button__icon .button__icon__inner--2 .button__arrow {
    fill: rgb(var(--color-black))
}

.button .button__text {
    display: block;
    flex: 1;
    margin: .125rem .75rem 0;
    position: relative;
    overflow: hidden;
    width: 100%
}

.button .button__text .button__text--sp {
    display: block;
    padding-bottom: .125rem;
    transition: transform .6s var(--menu-handle)
}

.button .button__text .button__text--sp--2 {
    position: absolute;
    left: 0;
    top: -100%
}

.button .button__icon {
    display: block;
    border-left: solid 1px;
    position: relative;
    overflow: hidden
}

.button .button__icon__inner {
    padding: .8125rem;
    position: relative;
    overflow: hidden;
    height: .75rem;
    width: .75rem;
    transition: transform .6s var(--menu-handle)
}

.button .button__icon__inner--2 {
    background: rgb(var(--color-orange));
    left: calc(-100% - 1px);
    position: absolute;
    top: 0;
    width: calc(.75rem + 1px)
}

.button .button__arrow {
    fill: currentcolor;
    height: 100%;
    width: 100%
}

.button--full {
    width: 100%
}

.button--black {
    background: rgb(var(--color-black));
    border-color: rgb(var(--color-black));
    color: rgb(var(--color-white))
}

.button--black .button__icon {
    border-color: transparent
}

.button--black .button__icon .button__icon__inner--1 .button__arrow {
    fill: rgb(var(--color-white))
}

.button--black .button__icon .button__icon__inner--2 .button__arrow {
    fill: rgb(var(--color-black))
}

.button--ghost-black {
    border-color: rgb(var(--color-black))
}

.button--ghost-black .button__icon {
    border-color: rgb(var(--color-black));
    color: rgb(var(--color-black))
}

.button--ghost-black .button__arrow {
    fill: rgb(var(--color-black))
}

.button--ghost-white {
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-white))
}

.button--ghost-white .button__icon {
    border-color: rgb(var(--color-white))
}

.button--ghost-white .button__icon .button__icon__inner--1 .button__arrow {
    fill: rgb(var(--color-white))
}

.button--ghost-white .button__icon .button__icon__inner--2 {
    background: rgb(var(--color-orange))
}

.button--ghost-white .button__icon .button__icon__inner--2 .button__arrow {
    fill: rgb(var(--color-black))
}

.button--small {
    font-size: .9375rem;
    line-height: 1
}

.button.download--modal .button__icon__inner--2 {
    left: 0;
    top: -100%
}

.button--icon-only {
    min-width: fit-content
}

.button--icon-only .button__icon {
    border: none;
    border-left: none;
    padding: 0
}

.button--icon-only:hover {
    cursor: pointer
}

.button.disabled {
    opacity: .4;
    pointer-events: none
}

@media(hover:hover) {
    .button__link:hover .button {
        transition: background .6s var(--menu-handle), color .6s var(--menu-handle)
    }

    .button__link:hover .button--ghost-black,
    .button__link:hover .button--black {
        background: rgb(var(--color-black));
        border-color: rgb(var(--color-black));
        color: rgb(var(--color-white))
    }

    .button__link:hover .button--black .button__icon__inner--2 {
        fill: rgb(var(--color-black))
    }

    .button__link:hover .button--ghost-white {
        background: rgb(var(--color-white));
        border-color: rgb(var(--color-white));
        color: rgb(var(--color-black))
    }

    .button__link:hover .button .button__text--sp {
        transform: translate3d(0, 100%, 0)
    }

    .button__link:hover .button .button__icon__inner {
        transform: translate3d(100%, 0, 0)
    }

    a:hover .button--ghost-black,
    a:hover .button--black {
        background: rgb(var(--color-black));
        border-color: rgb(var(--color-black));
        color: rgb(var(--color-white))
    }

    a:hover .button--black .button__icon__inner--2 {
        fill: rgb(var(--color-black))
    }

    a:hover .button--ghost-white {
        background: rgb(var(--color-white));
        border-color: rgb(var(--color-white));
        color: rgb(var(--color-black))
    }

    a:hover .button .button__text--sp {
        transform: translate3d(0, 100%, 0)
    }

    a:hover .button .button__icon__inner {
        transform: translate3d(100%, 0, 0)
    }

    button--ghost-black:hover,
    .button--ghost-black:hover {
        background: rgb(var(--color-black));
        border-color: rgb(var(--color-black));
        color: rgb(var(--color-white))
    }

    button--black:hover,
    .button--black:hover {
        background: rgb(var(--color-black));
        border-color: rgb(var(--color-black));
        color: rgb(var(--color-white))
    }

    button--black:hover .button__icon__inner--2,
    .button--black:hover .button__icon__inner--2 {
        fill: rgb(var(--color-black))
    }

    button--ghost-white:hover,
    .button--ghost-white:hover {
        background: rgb(var(--color-white));
        border-color: rgb(var(--color-white));
        color: rgb(var(--color-black))
    }

    button.filter--btn:hover,
    .button.filter--btn:hover {
        background: rgb(var(--color-black));
        border-color: rgb(var(--color-black));
        color: rgb(var(--color-white))
    }

    button:hover .button__text--sp,
    .button:hover .button__text--sp {
        transform: translate3d(0, 100%, 0)
    }

    button:hover .button__icon__inner,
    .button:hover .button__icon__inner {
        transform: translate3d(100%, 0, 0)
    }

    button:hover.download--modal .button__icon__inner,
    .button:hover.download--modal .button__icon__inner {
        transform: translate3d(0, 100%, 0)
    }
}

.carousel__body .swiper {
    background: rgb(var(--color-black))
}

.carousel__body .swiper-wrapper {
    transition: ease
}

.carousel__body .swiper-wrapper .slide__card {
    background: rgb(var(--color-grey-500));
    overflow: hidden
}

.carousel__body .swiper-wrapper .slide__card:not(:last-child):after {
    content: "";
    background: rgb(var(--color-white));
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1
}

.carousel__body .swiper-wrapper .slide__card .slide__card__inner {
    width: 100%;
    height: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__card__inner:before {
    content: "";
    background: rgba(var(--color-black), .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.carousel__body .swiper-wrapper .slide__card .slide__image {
    width: 100%;
    height: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__image>img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__link {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    z-index: 1
}

.carousel__body .swiper-wrapper .slide__card .slide__tags {
    display: flex;
    gap: .75rem
}

.carousel__body .swiper-wrapper .slide__card .slide__info {
    box-sizing: border-box;
    color: rgb(var(--color-white));
    padding: var(--grid-margin);
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    width: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__main {
    align-items: flex-end;
    display: flex;
    gap: var(--grid-gutter);
    justify-content: space-between;
    width: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__title__content {
    flex: 1;
    position: relative;
    overflow: hidden
}

.carousel__body .swiper-wrapper .slide__card .slide__title__content--1,
.carousel__body .swiper-wrapper .slide__card .slide__title__content--2 {
    transition: transform .6s var(--menu-handle)
}

.carousel__body .swiper-wrapper .slide__card .slide__title__content--2 {
    left: 0;
    position: absolute;
    top: -100%;
    width: 100%
}

.carousel__body .swiper-wrapper .slide__card .slide__title__content .slide__title {
    padding-bottom: .25rem
}

.carousel__body .swiper-wrapper .slide__card .slide__button {
    backdrop-filter: blur(.25rem);
    -webkit-backdrop-filter: blur(.25rem);
    background: rgba(var(--color-black), .1);
    border: solid 1px rgb(var(--color-white));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, border-color .25s ease;
    height: 2.5rem;
    width: 2.5rem
}

.carousel__body .swiper-wrapper .slide__card .slide__button .slide__button__inner {
    height: .9375rem;
    position: relative;
    width: .9375rem
}

.carousel__body .swiper-wrapper .slide__card .slide__button .slide__button__inner:after,
.carousel__body .swiper-wrapper .slide__card .slide__button .slide__button__inner:before {
    background: rgb(var(--color-white));
    content: "";
    left: 0;
    position: absolute;
    transition: background-color .25s ease;
    top: 0
}

.carousel__body .swiper-wrapper .slide__card .slide__button .slide__button__inner:before {
    left: calc(50% - .046875rem);
    height: 100%;
    top: 0;
    width: .09375rem
}

.carousel__body .swiper-wrapper .slide__card .slide__button .slide__button__inner:after {
    left: 0;
    height: .09375rem;
    top: calc(50% - .046875rem);
    width: 100%
}

.carousel__body .carousel__control {
    display: flex;
    gap: .75rem
}

.carousel__body .carousel__arrow {
    border: solid 1px rgb(var(--color-black));
    height: auto;
    margin: 0;
    position: relative;
    overflow: hidden;
    top: 0;
    transition: opacity .25s ease;
    width: auto;
    z-index: 1
}

.carousel__body .carousel__arrow .carousel__arrow__icon {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 2.375rem;
    width: 2.375rem;
    transition: transform .6s var(--menu-handle)
}

.carousel__body .carousel__arrow .carousel__arrow__icon svg {
    height: .75rem;
    width: .75rem
}

.carousel__body .carousel__arrow .carousel__arrow__icon--1 {
    background: rgb(var(--color-black));
    position: absolute;
    left: -100%;
    top: 0
}

.carousel__body .carousel__arrow .carousel__arrow__icon--1 svg {
    fill: rgb(var(--color-white))
}

.carousel__body .carousel__arrow .carousel__arrow__icon--2 svg {
    fill: rgb(var(--color-black))
}

.carousel__body .carousel__arrow--prev {
    left: 0;
    transform: rotate(180deg)
}

.carousel__body .carousel__arrow--next {
    right: 0
}

.carousel__body .carousel__arrow:after {
    content: none
}

@media(hover:hover) {

    .carousel__arrow--prev:hover .carousel__arrow__icon,
    .carousel__arrow--next:hover .carousel__arrow__icon {
        transform: translate3d(100%, 0, 0)
    }

    .carousel__body .swiper-wrapper .slide__card .slide__image {
        transition: transform .25s ease
    }

    .carousel__body .swiper-wrapper .slide__card .slide__link:hover .slide__title__content--1,
    .carousel__body .swiper-wrapper .slide__card .slide__link:hover .slide__title__content--2 {
        transform: translate3d(0, calc(100% + .25rem), 0)
    }

    .carousel__body .swiper-wrapper .slide__card .slide__link:hover .slide__button {
        background: rgb(var(--color-orange));
        border-color: rgb(var(--color-orange))
    }

    .carousel__body .swiper-wrapper .slide__card .slide__link:hover .slide__button .slide__button__inner:after,
    .carousel__body .swiper-wrapper .slide__card .slide__link:hover .slide__button .slide__button__inner:before {
        background: rgb(var(--color-white))
    }
}

@media(min-width:981px) {
    .carousel__body .slide__card {
        aspect-ratio: 6/4
    }
}

@media(max-width:980px) {
    .carousel__body .slide__card {
        aspect-ratio: 5/4
    }
}

@media(min-width:681px) {
    .carousel__control {
        padding: 2rem var(--grid-margin)
    }
}

@media(max-width:680px) {
    .carousel__control {
        padding: var(--grid-margin)
    }
}

cross-hair {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

cross-hair .container {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5
}

cross-hair .container .line {
    position: absolute
}

cross-hair .container .line.vertical {
    width: 1px;
    height: 100%;
    top: 0
}

cross-hair .container .line.horizontal {
    height: 1px;
    width: 100%;
    left: 0
}

cross-hair .number-right {
    top: -1.5rem;
    left: 1rem;
    position: absolute
}

cross-hair .number-bottom {
    left: -3rem;
    top: 1rem;
    position: absolute
}

cross-hair .cross-point {
    width: .3125rem;
    height: .3125rem;
    top: -.125rem;
    left: -.125rem;
    position: absolute;
    z-index: 3
}

.bg--grey-50 cross-hair .line {
    background-color: rgb(var(--color-grey-200))
}

.bg--grey-50 cross-hair .number-right,
.bg--grey-50 cross-hair .number-bottom {
    color: rgb(var(--color-grey-500))
}

.bg--grey-50 cross-hair .cross-point {
    background: rgb(var(--color-black))
}

.bg--grey-100 cross-hair .line {
    background-color: rgb(var(--color-grey-300))
}

.bg--grey-100 cross-hair .number-right,
.bg--grey-100 cross-hair .number-bottom {
    color: rgb(var(--color-grey-600))
}

.bg--grey-100 cross-hair .cross-point {
    background: rgb(var(--color-black))
}

.bg--orange cross-hair .line {
    background-color: rgba(var(--color-black), .4)
}

.bg--orange cross-hair .number-right,
.bg--orange cross-hair .number-bottom {
    color: rgba(var(--color-black), .6)
}

.bg--orange cross-hair .cross-point {
    background: rgb(var(--color-black))
}

.bg--black cross-hair .line {
    background-color: rgba(var(--color-orange), .6)
}

.bg--black cross-hair .number-right,
.bg--black cross-hair .number-bottom {
    color: rgba(var(--color-orange), .8)
}

.bg--black cross-hair .cross-point {
    background: rgb(var(--color-orange))
}

.bg--transparent cross-hair .line {
    background-color: rgba(var(--color-white), .6)
}

.bg--transparent cross-hair .number-right,
.bg--transparent cross-hair .number-bottom {
    color: rgba(var(--color-white), .8)
}

.bg--transparent cross-hair .cross-point {
    background: rgb(var(--color-white))
}

cross-image {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden
}

cross-image .crossimg {
    clip-path: inset(0 90% 90% 0);
    width: 100%;
    height: 100%
}

cross-image img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

cross-image .cross {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1
}

cross-image .line {
    position: absolute;
    z-index: 2
}

cross-image .vertical {
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0
}

cross-image .horizontal {
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 0 0
}

cross-image .vertical-fixed {
    height: 100%;
    width: var(--grid-margin);
    left: 0;
    top: 0;
    z-index: 1
}

cross-image .horizontal-fixed {
    width: 100%;
    height: var(--grid-margin);
    left: 0;
    top: 0;
    z-index: 1
}

cross-image .horizontal-fixed:after {
    content: "";
    height: 100%;
    left: var(--grid-margin);
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1
}

cross-image .number-right {
    top: -1.5rem;
    position: absolute;
    left: 1rem
}

cross-image .number-bottom {
    top: 1rem;
    position: absolute;
    left: -3rem
}

cross-image .cross-point {
    width: .3125rem;
    height: .3125rem;
    top: -.125rem;
    left: -.125rem;
    position: absolute;
    z-index: 3
}

.bg--grey-50 cross-image .cross {
    color: rgb(var(--color-grey-300))
}

.bg--grey-50 cross-image .line {
    background: rgb(var(--color-grey-200))
}

.bg--grey-50 cross-image .vertical-fixed {
    background: rgb(var(--color-grey-50));
    border-right: 1px solid rgb(var(--color-grey-200))
}

.bg--grey-50 cross-image .horizontal-fixed {
    background: rgb(var(--color-grey-50));
    border-bottom: 1px solid rgb(var(--color-grey-200))
}

.bg--grey-50 cross-image .horizontal-fixed:after {
    background: rgb(var(--color-grey-200))
}

.bg--grey-50 cross-image .cross-point {
    background: rgb(var(--color-black))
}

.bg--black cross-image .cross {
    color: rgb(var(--color-orange))
}

.bg--black cross-image .line {
    background: rgba(var(--color-orange), .6)
}

.bg--black cross-image .vertical-fixed {
    background: rgb(var(--color-black));
    border-right: 1px solid rgba(var(--color-orange), .6)
}

.bg--black cross-image .horizontal-fixed {
    background: rgb(var(--color-black));
    border-bottom: 1px solid rgba(var(--color-orange), .6)
}

.bg--black cross-image .horizontal-fixed:after {
    background: rgba(var(--color-orange), .6)
}

.bg--black cross-image .cross-point {
    background: rgb(var(--color-orange))
}

.contact__modal {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
    height: auto;
    width: 100%;
    height: 100dvh
}

.contact__modal .field__input {
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-white)) inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important
}

.contact__modal .modal__container {
    clip-path: inset(0 0 100% 0);
    background: rgb(var(--color-white));
    color: rgb(var(--color-black));
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    transition: clip-path .6s var(--menu-handle);
    right: .75rem;
    top: .75rem;
    z-index: 11
}

.contact__modal .modal__container .block__inner {
    padding-top: 0;
    padding-bottom: var(--grid-margin) !important
}

.contact__modal .modal__container .text__description {
    color: rgb(var(--color-black)) !important;
    box-sizing: border-box;
    padding-right: var(--grid-margin);
    width: 100% !important
}

.contact__modal .modal__container .text__description:not(.rgpd__message) {
    margin-bottom: 2rem
}

.contact__modal .modal__back {
    background: rgba(var(--color-black), .1);
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem);
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .6s ease;
    width: 100%;
    z-index: 10
}

.contact__modal .modal__container__header {
    align-items: center;
    display: flex;
    padding: .5rem;
    justify-content: space-between
}

.contact__modal .modal__container__header .title {
    padding-left: .75rem
}

.open--modal .contact__modal {
    pointer-events: auto
}

.open--modal .modal__container {
    clip-path: inset(0 0 0 0)
}

.open--modal .modal__back {
    opacity: 1;
    pointer-events: auto
}

@media(min-width:681px) {
    .contact__modal .modal__container {
        width: calc((100vw - (var(--grid-margin)) * 2 - (var(--grid-gutter)) * (var(--grid-columns) - 1)) / var(--grid-columns) * 4 + var(--grid-gutter) * 3)
    }
}

@media(max-width:680px) {
    .contact__modal .modal__container {
        left: .75rem
    }

    .contact__modal .modal__container .modal__container__header .title {
        padding-left: .5rem
    }

    .contact__modal .modal__container .block__inner {
        padding: 0 0 var(--grid-margin)
    }

    .contact__modal .modal__container .block__inner .modal__request {
        padding: 0 var(--grid-margin)
    }
}

dialog-modal {
    display: contents
}

.dialog__inner {
    border: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    background: transparent;
    overflow: visible
}

.dialog__inner[data-backdrop]::backdrop {
    background-color: #0006;
    backdrop-filter: blur(.75rem);
    -webkit-backdrop-filter: blur(.75rem);
    opacity: 0;
    transition: opacity .6s ease
}

.dialog__panel {
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    overflow: auto
}

.dialog__topbar {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    align-items: center;
    padding: var(--grid-margin);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .25s ease
}

@media(max-width:680px) {
    .dialog__topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

.dialog__button-close {
    background: rgb(var(--color-black));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: .8125rem;
    line-height: 0;
    color: inherit;
    transition: background-color .3s ease
}

.dialog__button-close svg {
    fill: rgb(var(--color-white));
    width: 1.375rem;
    height: 1.375rem;
    display: block;
    transition: fill .3s ease
}

.dialog__button-close:hover {
    background: rgb(var(--color-orange))
}

.dialog__button-close:hover svg {
    fill: rgb(var(--color-black))
}

.dialog__content {
    align-items: center;
    display: flex;
    flex: 1;
    overflow: auto
}

@media(min-width:681px) {
    .dialog__content {
        padding: 1rem var(--grid-margin) 2rem
    }
}

.dialog__header {
    margin-bottom: 1.5rem
}

.dialog__title {
    margin: 0
}

.dialog--open .video__player__native {
    clip-path: inset(0 0 0 0)
}

.dialog--open .dialog__inner[data-backdrop]::backdrop {
    opacity: 1
}

.dialog--open .dialog__topbar {
    opacity: 1
}

.video__player__native {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--menu-handle)
}

@keyframes dialogIn {
    0% {
        opacity: 0;
        transform: translateY(30dvh)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

video-player {
    display: block;
    width: 100%
}

.video__player {
    position: relative;
    width: 100%
}

.video__player__trigger {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--color-black);
    display: block
}

@media(min-width:681px) {
    .video__player__trigger {
        height: 100vh;
        max-height: 66.67vw
    }
}

@media(max-width:680px) {
    .video__player__trigger {
        aspect-ratio: 3/2
    }
}

.video__player__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.video__player__thumbnail--placeholder {
    background-color: #111
}

.video__player__embed-wrapper {
    position: relative;
    padding-top: 56.25%;
    width: 100%
}

.video__player__embed-wrapper .video__player__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none
}

.video__player__native {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    max-height: 80vh;
    display: block
}

.video__player__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center
}

.video__player__play .button__icon__inner {
    padding: 1.5rem;
    height: 2rem;
    width: 2rem
}

.video__player__play .button__icon__inner.button__icon__inner--1 {
    backdrop-filter: blur(.25rem);
    -webkit-backdrop-filter: blur(.25rem);
    background: rgba(var(--color-black), .1)
}

@media(max-width:680px) {
    .video__player__play .button__icon__inner {
        padding: 1rem;
        height: 1.5rem;
        width: 1.5rem
    }
}

.tag {
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem);
    display: inline-flex;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1;
    letter-spacing: .01em;
    padding: .375rem .625rem;
    text-transform: uppercase
}

.tag--white {
    background: rgba(var(--color-white), .2);
    color: rgb(var(--color-white))
}

toggle-box {
    border-bottom: solid 1px;
    display: grid;
    column-gap: var(--grid-gutter);
    grid-template-columns: repeat(calc(var(--grid-columns) / 2), 1fr)
}

toggle-box.is-open .plus__icon {
    transform: rotate(90deg)
}

toggle-box.is-open .plus__icon:after {
    transform: scaleX(0)
}

.bg--grey-50 toggle-box {
    border-color: rgb(var(--color-grey-200))
}

.bg--grey-50.has--border toggle-box:last-child {
    border-bottom: solid 1px rgb(var(--color-grey-200))
}

.bg--grey-100 toggle-box {
    border-color: rgb(var(--color-grey-300))
}

.bg--grey-100.has--border toggle-box:last-child {
    border-bottom: solid 1px rgb(var(--color-grey-300))
}

.bg--black toggle-box {
    border-color: rgba(var(--color-orange), .6)
}

.bg--black.has--border toggle-box:last-child {
    border-bottom: solid 1px rgba(var(--color-orange), .6)
}

.toggle__inner {
    grid-column: 1/-1
}

.toggle__inner .toogle__content__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--grid-gutter);
    position: relative
}

.toggle__header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    gap: var(--grid-gutter);
    padding: var(--grid-margin)
}

.toggle__header .title {
    flex: 1;
    transition: color .3s ease
}

.toggle__content {
    transition: height .6s var(--menu-handle)
}

.toggle__content .block__inner {
    padding-top: 0
}

.toggle__image {
    aspect-ratio: 1/1;
    line-height: 0;
    width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 2 - var(--grid-gutter))
}

@media(hover:hover) {
    .bg--grey-50 .toggle__header:hover .title {
        color: rgb(var(--color-orange))
    }

    .bg--grey-50 .toggle__header:hover .plus__icon:before,
    .bg--grey-50 .toggle__header:hover .plus__icon:after {
        background: rgb(var(--color-orange))
    }

    .bg--black .toggle__header:hover .title {
        color: rgb(var(--color-white))
    }

    .bg--black .toggle__header:hover .plus__icon:before,
    .bg--black .toggle__header:hover .plus__icon:after {
        background: rgb(var(--color-white))
    }
}

@media(min-width:981px) {
    .toggle__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 3 - var(--grid-gutter))
    }
}

@media(max-width:980px) {
    .toggle__inner .toogle__content__inner {
        flex-direction: column
    }

    .toggle__image {
        box-sizing: border-box;
        padding-top: var(--grid-margin);
        width: 100%
    }
}

float-subtitle {
    color: rgb(var(--color-white));
    position: absolute;
    left: 0;
    display: inline-block;
    z-index: 1;
    width: 100%
}

float-subtitle .wrp {
    width: 100%
}

float-subtitle .text__float--wrp {
    width: 100%
}

float-subtitle .float__inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    white-space: pre-line
}

float-subtitle .float__inner__logo {
    top: 0;
    transition: opacity 0s 1s;
    position: absolute;
    right: 0;
    width: 2.5rem
}

float-subtitle .float__inner__logo.hide {
    opacity: 0
}

float-subtitle .float__inner__logo svg {
    fill: rgb(var(--color-white))
}

@media(min-width:981px) {
    .float__inner--half {
        box-sizing: border-box;
        padding-right: calc(var(--grid-margin) * 2);
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns)) * var(--grid-columns) / 2 - var(--grid-gutter))
    }

    .float__inner--third {
        box-sizing: border-box;
        padding-right: calc(var(--grid-margin) * 2);
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns)) * var(--grid-columns) / 3 - var(--grid-gutter))
    }
}

@media(max-width:980px)and (min-width:681px) {
    .float__inner--half {
        box-sizing: border-box;
        padding-right: calc(var(--grid-margin) * 2);
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns)) * var(--grid-columns) / 4 * 3 - var(--grid-gutter))
    }

    .float__inner--third {
        box-sizing: border-box;
        padding-right: calc(var(--grid-margin) * 2);
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns)) * var(--grid-columns) / 2 - var(--grid-gutter))
    }
}

@media(min-width:681px) {
    float-subtitle {
        position: sticky;
        top: 100%;
        padding-bottom: var(--grid-margin)
    }

    float-subtitle .text__float--wrp {
        display: flex;
        justify-content: space-between
    }

    float-subtitle .text__float--mobile {
        display: none
    }

    .float__inner:not(:first-child) {
        padding-left: var(--grid-margin)
    }
}

@media(max-width:680px) {
    float-subtitle {
        box-sizing: border-box;
        bottom: var(--grid-margin);
        padding: 0 var(--grid-margin)
    }

    float-subtitle .text__float {
        display: flex
    }

    float-subtitle .text__float--desktop {
        display: none
    }

    float-subtitle .text__float--mobile {
        box-sizing: border-box;
        text-align: justify;
        text-wrap: balance
    }
}

.project-cross-info {
    --color: var(--text-color);
    --color-contrast: var(--color-contrast);
    padding: 1.25rem;
    color: var(--color);
    background-color: var(--color-contrast)
}

.project-cross-info--dark {
    --color-contrast: rgb(var(--color-orange));
    --color: rgb(var(--color-black))
}

.project-cross-info--orange {
    --color-contrast: rgb(var(--color-black));
    --color: rgb(var(--color-orange))
}

.project-cross-info__header .title {
    text-transform: uppercase
}

.project-cross-info__header .c__square {
    background: var(--color);
    display: block;
    width: .5rem;
    height: .5rem;
    margin-top: .3125rem;
    transition: opacity 0s .6s
}

.project-cross-info__content .value {
    border-top: .0625rem solid var(--color);
    padding-top: 2rem
}

.project-cross-info__content .description {
    margin-top: .75rem
}

.schema__section .grid__column+.grid__column {
    border: none !important
}

.schema--panel .grid__column+.grid__column {
    border: none
}

.schema--panel .text__description {
    opacity: 0;
    transition: opacity .25s ease
}

.schema--panel.text--in .text__description {
    opacity: 1
}

.panel-morph {
    position: relative;
    height: 200vh
}

.panel-morph__sticky,
.graph-morph__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center
}

.panel-morph__inner {
    aspect-ratio: 1;
    display: grid;
    height: calc(100% - var(--grid-margin) * 2);
    place-items: center;
    position: relative
}

.panel-graphic {
    width: auto;
    height: 100%;
    overflow: visible
}

.pnlg--1 {
    fill: rgb(var(--color-black));
    vector-effect: non-scaling-stroke;
    stroke-width: 1px;
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10
}

.pnlg--2 {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-width: 1px;
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10
}

.schema__label {
    color: rgb(var(--color-orange));
    display: block;
    text-transform: uppercase
}

@media(orientation:landscape) {
    .schema__label {
        transform-origin: top left;
        transform: rotate(-90deg);
        white-space: nowrap
    }
}

@media(orientation:portrait) {
    .panel-morph__inner {
        height: auto;
        width: 100%
    }

    .panel-graphic {
        width: 100%;
        height: auto;
        overflow: visible
    }
}

@media(min-width:981px) {
    .schema__section .grid__column--sticky {
        height: calc(100vh - var(--header-height))
    }

    .panel__description {
        bottom: calc(18.75vh + .75rem);
        position: absolute
    }

    .panel__description--1 {
        left: calc(20% - (9.2% - .75rem))
    }

    .panel__description--2 {
        left: calc(50% - (8.5% - .75rem))
    }

    .panel__description--3 {
        left: calc(80% - (4.65% - .75rem))
    }
}

@media(max-width:980px)and (min-width:681px) {
    .schema--panel .grid__column {
        grid-column: 1/-1
    }

    .schema--panel .grid__column:first-child {
        top: 0;
        position: relative
    }

    .schema--panel .grid__column:first-child .schema__main {
        padding-bottom: 2rem;
        width: 50%
    }

    .panel__description {
        bottom: calc(18.75vh + .75rem);
        position: absolute
    }

    .panel__description--1 {
        left: calc(20% - (9.2% - .75rem))
    }

    .panel__description--2 {
        left: calc(50% - (8.5% - .75rem))
    }

    .panel__description--3 {
        left: calc(80% - (4.65% - .75rem))
    }
}

@media(max-width:680px) {
    .panel__description {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        bottom: var(--grid-margin-negative);
        padding: 0 var(--grid-margin);
        position: absolute;
        text-align: center
    }

    .panel__description--1 {
        left: 0;
        width: 8rem
    }

    .panel__description--2 {
        left: 50%;
        transform: translate(-50%);
        width: 5rem
    }

    .panel__description--3 {
        right: 0;
        width: 8rem
    }
}

.graph-morph {
    position: relative;
    height: 300vh
}

.robot-morph__inner {
    display: grid;
    height: 100%;
    place-items: center;
    position: relative;
    width: 100%
}

.robot__container {
    position: absolute;
    height: 100vh;
    width: auto;
    top: 0;
    left: 0%
}

.robot__container svg .st0 {
    fill: rgb(var(--color-black));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st1 {
    fill: rgb(var(--color-black));
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st2 {
    fill: none;
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st3 {
    stroke: rgb(var(--color-orange));
    fill: rgb(var(--color-black));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st4 {
    fill: none;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st5 {
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

.robot__container svg .st6 {
    fill: rgb(var(--color-orange));
    vector-effect: non-scaling-stroke
}

.robot__container svg .st7 {
    fill: rgb(var(--color-orange));
    vector-effect: non-scaling-stroke
}

.robot__container svg .st8 {
    opacity: .3;
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke
}

@keyframes rotateStart {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(90deg)
    }
}

@keyframes rotateInfinite {
    0% {
        transform: rotate(90deg)
    }

    to {
        transform: rotate(450deg)
    }
}

#Sierra {
    transform-origin: center;
    transform-box: fill-box
}

.rotation {
    animation: rotateStart 1.2s ease-in forwards
}

.rotation2 {
    animation: rotateInfinite 2.4s linear infinite
}

.robot__panel {
    position: absolute;
    right: 0;
    top: 80%;
    width: 70%;
    height: 6.5%;
    background: rgb(var(--color-black));
    border-left: 1px solid rgb(var(--color-orange));
    border-top: 1px solid rgb(var(--color-orange));
    border-bottom: 1px solid rgb(var(--color-orange))
}

.robot__panel__inner {
    width: 100%;
    height: 60%;
    top: 20%;
    position: relative;
    border-bottom: 1px solid rgb(var(--color-orange));
    border-top: 1px solid rgb(var(--color-orange))
}

.robot__panel__line {
    background: rgba(var(--color-orange), 1);
    height: 100%;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 10
}

.robot__panel__line--1 {
    left: 33.334%
}

.robot__panel__line--2 {
    left: 66.667%
}

.robot__panel__separator {
    border-top: 1px solid rgba(var(--color-orange), .6);
    bottom: 0;
    height: calc(13.5% - 2px);
    position: absolute;
    width: 100%
}

.robot__panel__separator:before {
    background: rgba(var(--color-orange), .6);
    content: "";
    height: 100%;
    left: calc(30% - 1px);
    position: absolute;
    width: 1px
}

.morph__text--desktop {
    position: absolute;
    top: 0;
    right: 0
}

.morph__text--desktop .morph__text--column {
    padding-top: var(--header-height);
    position: relative
}

.morph__text--desktop .morph__text--column .schema__main {
    box-sizing: border-box;
    padding-right: calc(var(--grid-margin) * 2)
}

.morph__text--desktop .morph__text--column .schema__main .text__description {
    transition: opacity .25s ease 1.2s
}

.morph__text--desktop .morph__text--column .schema__main.hide .text__description {
    opacity: 0
}

.morph__text--mobile {
    display: none
}

@media(min-width:981px) {
    .morph__text--desktop .morph__text--column {
        left: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 8 - var(--grid-gutter));
        width: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 4 - var(--grid-gutter))
    }

    .robot__container svg {
        height: 100%;
        width: auto
    }
}

@media(max-width:980px)and (min-width:681px) {
    .morph__text--desktop .morph__text--column {
        left: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 5 - var(--grid-gutter));
        width: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 3 - var(--grid-gutter))
    }
}

@media(max-width:680px) {
    .morph__text--desktop {
        display: none
    }

    .morph__text--mobile {
        display: block
    }

    .robot__container {
        height: 50%
    }

    .robot__panel {
        top: 83%;
        height: 3.5%
    }

    .robot__over--mobile {
        position: absolute;
        top: 0;
        background: rgb(var(--color-black));
        border-bottom: 1px solid rgba(var(--color-orange), .6);
        width: 100%;
        height: 40vh;
        z-index: 1
    }
}

.schema--system {
    border-bottom: solid 1px rgba(var(--color-orange), .6)
}

.schema--system .system-morph {
    position: relative;
    height: 400vh
}

.schema--system .graph-morph__inner {
    aspect-ratio: 1/1
}

.schema--system .stmlg--1 {
    fill: rgb(var(--color-black));
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10
}

.schema--system .stmlg--2 {
    fill: none;
    stroke: rgb(var(--color-orange));
    stroke-miterlimit: 10
}

@media(min-width:981px) {
    .graph-morph__inner {
        height: 100%;
        margin: 0 auto;
        width: auto
    }
}

@media(max-width:980px) {
    .graph-morph__inner {
        height: auto;
        width: 100%
    }
}

@media(max-width:980px)and (min-width:681px) {
    .schema--system .grid__column {
        grid-column: 1/-1
    }

    .schema--system .grid__column:first-child {
        top: 0;
        position: relative
    }

    .schema--system .grid__column:first-child .schema__main {
        padding-bottom: 2rem;
        width: 50%
    }

    .schema--system .section__title {
        width: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 7 - var(--grid-gutter) * 2)
    }
}

.frame--morph {
    height: 300vh
}

.frame--morph__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center
}

.frame-morph__inner {
    width: 80%;
    aspect-ratio: 1/1
}

.draw-line {
    stroke: #ff0c00;
    stroke-width: 1;
    fill: none
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, #00000080, #0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #FDFDFD
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    inset: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.cky-consent-container.cky-box-bottom-left {
    bottom: var(--grid-margin) !important;
    left: auto !important;
    right: var(--grid-margin) !important
}

.cky-consent-container .cky-consent-bar {
    background-color: rgb(var(--color-white)) !important;
    border: none !important;
    border-radius: 0 !important
}

.cky-consent-container .cky-notice-content-wrapper {
    padding: var(--grid-margin) !important
}

.cky-consent-container .cky-notice-btn-wrapper {
    gap: .75rem !important
}

.cky-consent-container .cky-title {
    font-weight: 600 !important;
    font-size: clamp(16px, 1.125rem, 24px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important
}

.cky-consent-container .cky-consent-bar>div:last-child {
    display: none !important
}

.cky-btn {
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    border-width: 1px !important;
    border-color: rgb(var(--color-black)) !important;
    color: rgb(var(--color-black)) !important;
    padding: .6875rem !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    transition: background .25s ease, color .25s ease !important
}

.cky-btn.cky-btn-reject {
    background: transparent !important;
    color: rgb(var(--color-black)) !important;
    border-color: rgb(var(--color-black)) !important
}

.cky-btn.cky-btn-accept {
    background: rgb(var(--color-black)) !important;
    color: rgb(var(--color-white)) !important;
    border-color: rgb(var(--color-black)) !important
}

.cky-btn:hover {
    background: rgb(var(--color-black)) !important;
    color: rgb(var(--color-white)) !important;
    border-color: rgb(var(--color-black)) !important;
    opacity: 1 !important
}

.cky-notice-des *,
.cky-preference-content-wrapper *,
.cky-dma-content-wrapper *,
.cky-accordion-header-des *,
.cky-gpc-wrapper .cky-gpc-desc * {
    font-size: clamp(10px, .9375rem, 20px) !important;
    font-weight: 500 !important;
    line-height: 1.3334 !important
}

.cky-preference-center {
    background-color: rgb(var(--color-white)) !important;
    border: none !important;
    border-radius: 0 !important
}

.cky-preference-center .cky-preference-header {
    padding: var(--grid-margin) !important
}

.cky-preference-center .cky-preference-body-wrapper {
    padding: 0 var(--grid-margin) !important
}

.cky-preference-center .cky-footer-shadow {
    background: linear-gradient(180deg, #fff0, rgb(var(--color-white))) !important
}

.cky-preference-center .cky-prefrence-btn-wrapper {
    gap: .75rem !important;
    padding: var(--grid-margin) !important
}

.cky-preference-center .cky-footer-wrapper>div:last-child {
    display: none !important
}

@media(max-width:440px) {
    .cky-consent-container {
        left: var(--grid-margin) !important;
        width: calc(100% - var(--grid-margin) * 2) !important
    }

    .cky-notice-des,
    .cky-notice .cky-title,
    .cky-notice-btn-wrapper {
        padding: 0 !important
    }
}

.hero__background__main {
    color: rgb(var(--color-white));
    position: relative;
    z-index: 2
}

.hero__background__main .wrp {
    height: 100%
}

.hero__background__main .grid__layout {
    height: 100%;
    grid-auto-rows: 1fr
}

.hero__background__top {
    min-height: auto;
    height: calc(100vh - var(--hero-height));
    position: relative;
    overflow: hidden
}

.hero__background__top .background__hero__column--left {
    place-content: flex-end
}

.hero__background__bottom {
    border-top: solid 1px currentcolor;
    height: calc(var(--hero-height) + 10rem);
    position: relative;
    overflow: hidden
}

.hero__background__bottom .hero__description {
    padding-top: var(--grid-margin);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin)
}

@media(min-width:981px)and (min-aspect-ratio:16/9) {
    .hero__background__top .pt--xxlarge {
        padding-top: var(--header-height) !important
    }
}

@media(min-width:981px)and (min-aspect-ratio:2/1) {
    .hero__background__top .hero__title {
        font-size: clamp(56px, 4rem, 88px);
        line-height: .925
    }
}

@media(hover:none) {
    .hero__background__top {
        height: calc(100svh - var(--hero-height))
    }
}

@media(min-width:981px) {
    .hero__background__bottom .hero__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }
}

@media(min-width:681px) {
    .hero__background__main .grid__column+.grid__column {
        border-left: solid 1px currentcolor
    }

    .hero__background__bottom .hero__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }
}

.hero__default__main {
    position: relative;
    z-index: 2
}

.hero__default__bottom .hero__description {
    padding-top: var(--grid-margin);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin)
}

.hero__default__media {
    position: relative
}

.hero__default__media.back--overlay:before {
    background: rgba(var(--color-black), .2);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.hero__default__media float-subtitle .float__inner__logo {
    transition-delay: 3.5s
}

.hero__media {
    width: 100vw;
    height: 100vh;
    position: relative
}

@media(min-width:981px)and (min-aspect-ratio:16/9) {
    .hero__default__top .pt--xlarge {
        padding-top: var(--header-height) !important
    }
}

@media(min-width:981px)and (min-aspect-ratio:2/1) {
    .hero__default__top .hero__title {
        font-size: clamp(56px, 4rem, 88px);
        line-height: .925
    }
}

@media(min-width:981px) {
    .hero__default__bottom .hero__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }
}

@media(min-width:681px) {
    .hero__default__bottom {
        border-top: solid 1px
    }

    .hero__default__main .grid__column+.grid__column {
        border-left: solid 1px
    }

    .hero__default__bottom .hero__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }

    .hero__media {
        max-height: 66.67vw
    }

    .bg--grey-50 .hero__default__bottom {
        border-color: rgb(var(--color-grey-200))
    }

    .bg--grey-50 .hero__default__main .grid__column+.grid__column {
        border-color: rgb(var(--color-grey-200))
    }

    .bg--grey-100 .hero__default__bottom {
        border-color: rgb(var(--color-grey-300))
    }

    .bg--grey-100 .hero__default__main .grid__column+.grid__column {
        border-color: rgb(var(--color-grey-300))
    }

    .bg--orange .hero__default__bottom {
        border-color: rgb(var(--color-black))
    }

    .bg--orange .hero__default__main .grid__column+.grid__column {
        border-color: rgb(var(--color-black))
    }

    .bg--black .hero__default__bottom {
        border-color: rgba(var(--color-orange), .6)
    }

    .bg--black .hero__default__main .grid__column+.grid__column {
        border-color: rgba(var(--color-orange), .6)
    }
}

@media(max-width:680px) {
    .hero__media {
        max-height: 100vw
    }
}

.hero__project-background__main {
    color: rgb(var(--color-white));
    position: relative;
    z-index: 2
}

.hero__project-background__main .wrp {
    height: 100%
}

.hero__project-background__main .grid__layout {
    height: 100%;
    grid-auto-rows: 1fr
}

.hero__project-background__top {
    min-height: auto;
    height: calc(100dvh - var(--hero-height));
    position: relative;
    overflow: hidden
}

.hero__project-background__top .background__hero__column--left {
    place-content: flex-end
}

.hero__project-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: calc(var(--grid-gutter) * 2)
}

.hero__project-details__item {
    display: flex;
    flex-direction: column
}

.hero__project-details__item .pretitle {
    margin-bottom: .75rem
}

.hero__project-details__label {
    margin-bottom: .083rem
}

.hero__project-background__bottom {
    border-top: solid 1px currentcolor;
    height: calc(var(--hero-height) + 10rem);
    position: relative;
    overflow: hidden
}

.hero__project-background__bottom .hero__description {
    box-sizing: border-box;
    padding-top: var(--grid-margin);
    padding-left: var(--grid-margin);
    padding-right: 0;
    width: 100% !important
}

@media(min-width:981px) {
    .hero__project-background__top hero-title {
        box-sizing: border-box;
        display: block;
        padding-right: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .hero__project-background__bottom .grid__column:first-child {
        display: none
    }

    .hero__project-background__bottom .grid__column:last-child {
        border-left: none;
        margin-left: var(--grid-margin-negative);
        grid-column: span calc(var(--grid-columns) / 8 * 6)
    }
}

@media(min-width:681px) {
    .hero__project-background__main .grid__column+.grid__column {
        border-left: solid 1px currentcolor
    }

    .hero__project-details {
        grid-column-gap: var(--grid-gutter)
    }

    .hero__project-details__item:nth-child(2),
    .hero__project-details__item:nth-child(3),
    .hero__project-details__item:nth-child(5),
    .hero__project-details__item:nth-child(6) {
        padding-left: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .hero__project-details {
        grid-template-columns: repeat(2, 1fr)
    }

    .hero__project-details.hero__description {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }

    .hero__project-details__item:nth-child(2n) {
        padding-left: var(--grid-margin)
    }
}

.application__image.image__container {
    display: flex;
    overflow: hidden
}

.application__image.image__container .application__col:first-child,
.application__image.image__container .application__col:last-child {
    transform: translateY(0)
}

.application__image.image__container.inactive .application__col:first-child {
    transform: translateY(50%)
}

.application__image.image__container.inactive .application__col:last-child {
    transform: translateY(-50%)
}

.application__image.image__container .application__col {
    width: 50%;
    position: relative;
    transition: transform .5s ease
}

.application__card {
    width: 100%;
    box-sizing: border-box;
    padding: var(--grid-margin)
}

.double__image__section.bg--grey-50+.chart__section {
    border-top: solid 1px rgb(var(--color-grey-200))
}

.double__image__section.bg--black+.chart__section {
    border-top: solid 1px rgb(var(--color-orange))
}

.chart__section .grid__column+.grid__column {
    border: none
}

.chart__container {
    background: rgb(var(--color-orange));
    color: rgb(var(--color-white));
    padding: var(--grid-margin)
}

.chart__item {
    border-top: solid 1px rgb(var(--color-white));
    padding-top: var(--grid-margin)
}

.chart__item__inner {
    display: flex;
    gap: var(--grid-gutter)
}

.chart__item__title,
.chart__item__description {
    width: 100%
}

.chart__item__text,
.chart__item__text h4,
.chart__item__text p {
    color: rgb(var(--color-white)) !important
}

.chart__item__text+.button {
    margin-top: 2rem
}

.chart__section .block__inner {
    padding-bottom: 0
}

.chart__section.bg--grey-50 .section__title,
.chart__section.bg--grey-50 .text__description {
    color: rgb(var(--color-black))
}

.chart__section.bg--black .section__title {
    color: rgb(var(--color-orange))
}

.chart__section.bg--black .text__description {
    color: rgb(var(--color-grey-200))
}

@media(min-width:981px) {

    .chart__section .text__description,
    .chart__section .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .chart__item__title>.title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4)
    }

    .chart__item__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5)
    }
}

@media(max-width:980px) {
    .chart__item__text {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .chart__item__text h4 {
        font-size: clamp(21px, 1.5rem, 32px);
        font-weight: 600;
        line-height: 1.2
    }
}

@media(max-width:680px) {
    .chart__section .section__header {
        box-sizing: border-box;
        padding-right: var(--grid-margin);
        margin-bottom: .875rem
    }

    .chart__item__inner {
        flex-direction: column;
        gap: 2rem
    }

    .chart__item__text h4 {
        font-size: clamp(17px, 1.25rem, 26px);
        font-weight: 600;
        line-height: 1.2
    }
}

.default__double__column .default__column--left {
    border-right: 1px solid rgb(var(--color-black))
}

.default__double__column .row--1 {
    border-bottom: 1px solid rgb(var(--color-black))
}

.only__image__section {
    border-bottom: solid 1px;
    border-top: solid 1px
}

.only__image__section.bg--grey-50 {
    border-color: rgb(var(--color-grey-200))
}

.only__image__section.bg--black {
    border-color: rgba(var(--color-orange), .6)
}

.only__image__img {
    position: relative
}

@media(min-width:681px) {
    .only__image__img {
        aspect-ratio: 16/9
    }
}

@media(max-width:680px) {
    .only__image__img {
        aspect-ratio: 1/1
    }
}

.double__image__section {
    border-top: solid 1px
}

.double__image__section .grid__layout .grid__column {
    height: fit-content
}

.double__image__section.bg--grey-50 {
    border-color: rgb(var(--color-grey-200))
}

.double__image__section.bg--black {
    border-color: rgb(var(--orange))
}

.double__image__img {
    position: relative
}

.double__image__img--1 {
    aspect-ratio: 1/1
}

.double__image__img--2 {
    aspect-ratio: 1/1.3334
}

@media(min-width:981px) {
    .double__image__img--1 {
        grid-column: 1/5;
        margin-right: calc(-1px - var(--grid-gutter))
    }

    .double__image__img--2 {
        grid-column: 1/-1
    }

    .reverse .double__image__img--1 {
        grid-column: 3/7;
        margin-right: calc(-1px - var(--grid-gutter))
    }
}

@media(max-width:980px)and (min-width:681px) {
    .double__image__img {
        position: relative
    }

    .double__image__img--1 {
        grid-column: 1/4
    }

    .double__image__img--2 {
        grid-column: 1/-1
    }

    .reverse .double__image__img--1 {
        grid-column: 2/5
    }
}

@media(min-width:681px) {
    .double__image__section:not(.reverse).bg--grey-50 .grid__column:first-child {
        border-bottom: solid 1px rgb(var(--color-grey-200))
    }

    .double__image__section:not(.reverse).bg--grey-50 .double__image__img--1 {
        border-right: solid 1px rgb(var(--color-grey-200))
    }

    .double__image__section:not(.reverse).bg--black .grid__column:first-child {
        border-bottom: solid 1px rgb(var(--color-orange))
    }

    .double__image__section:not(.reverse).bg--black .double__image__img--1 {
        border-right: solid 1px rgb(var(--color-orange))
    }

    .double__image__section.reverse.bg--grey-50 .grid__column+.grid__column {
        border-left: none !important;
        border-bottom: solid 1px rgb(var(--color-grey-200))
    }

    .double__image__section.reverse.bg--grey-50 .double__image__img--1 {
        border-left: solid 1px rgb(var(--color-grey-200))
    }

    .double__image__section.reverse.bg--grey-50 .double__image__img--2:before {
        background: rgb(var(--color-grey-200));
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        right: -1px;
        width: 1px
    }

    .double__image__section.reverse.bg--black .grid__column:last-child {
        border-bottom: solid 1px rgb(var(--color-orange))
    }

    .double__image__section.reverse.bg--black .double__image__img--1 {
        border-left: solid 1px rgb(var(--color-orange))
    }
}

@media(max-width:680px) {
    .double__image__img {
        position: relative;
        grid-column: 1/-1
    }
}

.double__images--method {
    border-bottom: solid 1px rgb(var(--color-grey-200))
}

.section__faqs {
    border-top: solid 1px
}

.section__faqs.bg--grey-50 {
    border-color: rgb(var(--color-grey-200))
}

.section__faqs.bg--black {
    border-color: rgba(var(--color-orange), .6)
}

.section__faqs.bg--orange {
    border-color: rgb(var(--color-black))
}

.section__faqs .toggle__icon {
    margin-top: .1875rem
}

.faqs__image {
    aspect-ratio: 1/1;
    min-height: 100%
}

@media(min-width:981px) {
    .faq__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .faqs__image {
        aspect-ratio: 1/1.5
    }
}

@media(max-width:980px) {
    .faq__text {
        padding-right: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .section__faqs .grid__column:first-child {
        order: 1
    }

    .section__faqs .grid__column:last-child {
        border-top: none;
        order: 0
    }

    .section__faqs.bg--grey-50 .grid__column:first-child {
        border-top: solid 1px rgb(var(--color-grey-200))
    }

    .section__faqs.bg--black .grid__column:first-child {
        border-top: solid 1px rgba(var(--color-orange), .6)
    }

    .section__faqs.bg--orange .grid__column:first-child {
        border-top: solid 1px rgb(var(--color-black))
    }

    .section__faqs.faqs--faqs:nth-child(odd) .grid__column:first-child {
        border-top: none;
        order: 0
    }

    .section__faqs.faqs--faqs:nth-child(odd) .grid__column:last-child {
        order: 1
    }

    .section__faqs.faqs--faqs:nth-child(2n) .grid__column:first-child {
        border-top: none
    }
}

.figures__container {
    background: rgb(var(--color-black));
    color: rgb(var(--color-white))
}
/* dark stats panel: white type must outrank theme body-text rules */
.figures__container .title,
.figures__container .pretitle,
.figures__container .line--inner,
.figures__container .figures__item__title,
.figures__container .figures__item__subtitle,
.figures__container .figures__item__text,
.figures__container .text__description,
.figures__container p {
    color: rgb(var(--color-white))
}

.figures__header {
    padding: var(--grid-margin) var(--grid-margin) 0
}

.figures__list {
    padding: var(--grid-margin)
}

.figures__list .grid__layout {
    border: solid 1px rgba(var(--color-orange), .6)
}

.figures__item {
    border-color: rgba(var(--color-orange), .6) !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--grid-margin);
    position: relative;
    width: 100%
}

.figures__item__subtitle {
    margin-top: .75rem
}

.figures__section .grid__layout {
    gap: 0
}

.bg--black .figures__container {
    border: solid 1px rgba(var(--color-orange), .6)
}

@media(min-width:981px) {
    .figures__item {
        border-bottom: solid 1px rgba(var(--color-orange), .6)
    }

    .figures__item:nth-child(3n+2),
    .figures__item:nth-child(3n+3) {
        border-left: solid 1px rgba(var(--color-orange), .6)
    }

    .grid__layout:has(.figures__item:nth-child(3n):last-child) .figures__item:nth-last-child(-n+3) {
        border-bottom: none
    }

    .grid__layout:has(.figures__item:nth-child(3n+2):last-child) .figures__item:nth-last-child(-n+2) {
        border-bottom: none
    }

    .grid__layout:has(.figures__item:nth-child(3n+1):last-child) .figures__item:last-child {
        border-bottom: none
    }

    .figures__item:last-child:not(:nth-child(3n)):after {
        content: "";
        position: absolute;
        background: rgba(var(--color-orange), .6);
        height: 100%;
        top: 0;
        right: -1px;
        width: 1px
    }
}

@media(max-width:980px)and (min-width:681px) {
    .figures__item {
        border-bottom: solid 1px rgba(var(--color-orange), .6)
    }

    .figures__item:nth-child(2n) {
        border-left: solid 1px rgba(var(--color-orange), .6)
    }

    .grid__layout:has(.figures__item:nth-child(2n):last-child) .figures__item:nth-last-child(-n+2) {
        border-bottom: none
    }

    .grid__layout:has(.figures__item:nth-child(odd):last-child) .figures__item:last-child {
        border-bottom: none
    }

    .figures__item:last-child:not(:nth-child(2n)):after {
        content: "";
        position: absolute;
        background: rgba(var(--color-orange), .6);
        height: 100%;
        top: 0;
        right: -1px;
        width: 1px
    }
}

@media(max-width:680px) {
    .figures__item:not(:first-child) {
        border-top: solid 1px rgba(var(--color-orange), .6)
    }
}

.intro__image {
    position: relative;
    overflow: hidden
}

.intro__image__section .overline {
    background: rgb(var(--color-white));
    height: 100%;
    top: 0;
    position: absolute;
    width: 1px
}

.intro__grid {
    border-bottom: solid 1px;
    border-top: solid 1px
}

.intro__grid__img {
    position: relative
}

.intro__grid__img--1 {
    aspect-ratio: 1/1.3334
}

.intro__grid__img--2 {
    aspect-ratio: 1/1
}

.intro__grid__group {
    border-top: solid 1px
}

.intro__grid__text {
    grid-column: span 4
}

.intro__cross__grid {
    border-top: solid 1px
}

.intro__cross__grid .intro__cross__image {
    aspect-ratio: 1/1.3334
}

.intro__cross__grid .grid__column+.grid__column {
    border-left: none
}

.bg--grey-50 .intro__cross__grid {
    border-color: rgb(var(--color-grey-200))
}

.bg--grey-50 .grid__column:first-child:before {
    background: rgb(var(--color-grey-200))
}

.bg--grey-100 .intro__cross__grid {
    border-color: rgb(var(--color-grey-300))
}

.bg--grey-100 .grid__column:first-child:before {
    background: rgb(var(--color-grey-300))
}

.bg--black .intro__grid,
.bg--black .intro__grid__group,
.bg--black .intro__cross__grid {
    border-color: rgba(var(--color-orange), .6)
}

.bg--black .grid__column:first-child:before {
    background: rgba(var(--color-orange), .6)
}

.bg--black .grid__column+.grid__column {
    border-color: rgba(var(--color-orange), .6)
}

.bg--black.intro__image__section {
    color: rgb(var(--color-white))
}

.bg--black.intro__image__section .grid__column+.grid__column {
    border-color: rgb(var(--color-grey-400))
}

.bg--black.intro__image__section cross-hair .line {
    background-color: rgb(var(--color-grey-400))
}

.bg--black.intro__image__section cross-hair .number-right,
.bg--black.intro__image__section cross-hair .number-bottom {
    color: rgb(var(--color-grey-200))
}

.bg--black.intro__image__section cross-hair .cross-point {
    background: rgb(var(--color-white))
}

@media(min-width:981px) {
    .intro__image__section .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .intro__image__section .overline {
        left: calc(var(--grid-margin) + 10 * (100% - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + 10 * var(--grid-gutter))
    }

    .intro__grid__section .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns)) * 11 - var(--grid-gutter) * 2)
    }

    .intro__grid__img--1 {
        grid-column: 1/-1
    }

    .intro__grid__img--2 {
        grid-column: 3/7
    }

    .intro__grid__group {
        grid-column: 1/-1
    }

    .intro__cross__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }

    .intro__image__section .block__inner .section__description {
        width: calc((100% + var(--grid-gutter)) / var(--grid-columns) * 5 - var(--grid-gutter))
    }
}

@media(max-width:980px) {
    .intro__grid__text {
        padding-right: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .intro__image__section .overline {
        left: calc(var(--grid-margin) + 6 * (100% - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + 6 * var(--grid-gutter))
    }

    .intro__grid__img {
        position: relative
    }

    .intro__grid__img--1 {
        grid-column: 1/-1
    }

    .intro__grid__img--2 {
        grid-column: 3/7
    }

    .intro__grid__group {
        grid-column: 1/-1
    }
}

@media(min-width:681px) {
    .intro__cross__grid .grid__column:first-child {
        position: relative
    }

    .intro__cross__grid .grid__column:first-child:before {
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        right: -1px;
        width: 1px
    }

    .intro__cross__grid .grid__column+.grid__column {
        border-left: none
    }

    .intro__image {
        aspect-ratio: 14/5
    }

    .intro__image__grid .grid__column {
        place-content: flex-end
    }

    .intro__grid__img--2 {
        border-left: solid 1px rgba(var(--color-orange), .6)
    }

    .intro__grid__group {
        border-top: solid 1px rgba(var(--color-orange), .6)
    }
}

@media(max-width:680px) {
    .intro__image {
        aspect-ratio: 16/9
    }

    .intro__image__section .overline {
        display: none
    }

    .intro__grid__img,
    .intro__grid__group {
        position: relative;
        grid-column: 1/-1
    }

    .intro__grid__img--1 {
        aspect-ratio: 1/1.5
    }

    .intro__grid__img--2 {
        aspect-ratio: 1/1.2
    }

    .intro__cross__text {
        padding-top: 3.5rem
    }
}

.list__block.bg--grey-50 .list__item {
    background: rgb(var(--color-grey-50));
    border-color: rgb(var(--color-grey-200))
}

.list__block.bg--black .section__header {
    color: rgb(var(--color-orange))
}

.list__block.bg--black .list__item {
    background: rgb(var(--color-black));
    border-color: rgba(var(--color-orange), .6)
}

.list__block.bg--black .list__item .list__item__title {
    color: rgb(var(--color-orange))
}

.list__block.bg--black .list__item .list__item__text {
    color: rgb(var(--color-grey-200))
}

.list__block .grid__column+.grid__column {
    border: none !important
}

.list__item {
    border-top: solid 1px;
    display: flex;
    gap: var(--grid-gutter);
    justify-content: space-between;
    padding: 0 var(--grid-margin) calc(var(--grid-margin) * 2);
    position: relative
}

.list__item__number {
    color: rgb(var(--color-orange))
}

.list__item__number {
    width: 100%
}

.list__item__number .number {
    padding-top: var(--grid-margin)
}

.list__item__content {
    width: 100%
}

.list__item__title+.list__item__text {
    padding-top: .75rem
}

@media(min-width:981px) {
    .list__block .section__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .list__item__title,
    .list__item__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4)
    }
}

@media(max-width:980px) {

    .list__item__content .list__item__title,
    .list__item__content .list__item__text {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .list__block .grid__column--two-thirds {
        grid-column: span calc(var(--grid-columns) / 4 * 3)
    }
}

@media(min-width:681px) {
    .list__item__number {
        padding-left: .5rem;
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * var(--grid-columns) / 2 - var(--grid-gutter) * 2)
    }

    .list__item__content {
        padding-top: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .list__item {
        flex-direction: column;
        gap: 2rem
    }

    .list__block .section__header {
        box-sizing: border-box;
        padding-right: var(--grid-margin);
        margin-bottom: .875rem
    }
}

.next__container {
    border-bottom: solid 1px rgb(var(--color-white))
}

.next__container .grid__column+.grid__column {
    border: none
}

.next__image {
    aspect-ratio: 4/3
}

.next__main__inner {
    color: rgb(var(--color-white))
}

@media(min-width:981px) {
    .next__main .next__main__inner .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5)
    }

    .next__main .next__main__inner .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4)
    }
}

@media(min-width:681px) {

    .next__main,
    .next__main .wrp--left,
    .next__main .block__inner {
        height: 100%
    }

    .next__main .next__main__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        width: 100%
    }
}

.matrix__image {
    aspect-ratio: 1/1.2
}

.separator__section+.matrix__section {
    border-top: solid 1px
}

.separator__section+.matrix__section.bg--black {
    border-color: rgb(var(--color-black))
}

.separator__section+.matrix__section.bg--grey-50 {
    border-color: rgb(var(--color-grey-200))
}

.separator__section+.matrix__section.bg--grey-100 {
    border-color: rgb(var(--color-grey-300))
}

.separator__section+.matrix__section.bg--orange {
    border-color: rgb(var(--color-black))
}

.figures__section+.matrix__section,
.matrix__section+.matrix__section {
    border-bottom: solid 1px;
    border-top: solid 1px
}

.figures__section+.matrix__section.bg--black,
.matrix__section+.matrix__section.bg--black {
    border-color: rgba(var(--color-orange), .6)
}

.figures__section+.matrix__section.bg--grey-50,
.matrix__section+.matrix__section.bg--grey-50 {
    border-color: rgb(var(--color-grey-200))
}

@media(min-width:981px) {
    .matrix__section:not(.right) .matrix__main .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5)
    }

    .matrix__section:not(.right) .matrix__main .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4)
    }

    .matrix__section.right .matrix__main {
        padding-left: calc(33.334% + var(--grid-margin))
    }

    .matrix__section.right .matrix__main .text__description {
        padding-right: calc(var(--grid-margin) * 2)
    }
}

@media(max-width:980px)and (min-width:681px) {

    .matrix__main .section__title,
    .matrix__main .text__description {
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .matrix__section.right .grid__column:first-child {
        position: relative
    }

    .matrix__section.right .grid__column:first-child:before {
        content: "";
        height: 100%;
        position: absolute;
        right: -1px;
        top: 0;
        width: 1px
    }

    .matrix__section.right .grid__column+.grid__column {
        border-left: none
    }

    .matrix__main {
        position: sticky;
        top: var(--header-height)
    }
}

@media(max-width:680px) {
    .matrix__section.right .grid__column:first-child {
        border-top: solid 1px;
        order: 1
    }

    .matrix__section.right .grid__column:last-child {
        border-top: none;
        order: 0
    }

    .matrix__section.right.bg--black .grid__column {
        border-color: rgba(var(--color-orange), .6)
    }

    .matrix__section.right.bg--grey-50 .grid__column {
        border-color: rgb(var(--color-grey-200))
    }

    .matrix__section .matrix__image {
        aspect-ratio: 1/1.5
    }
}

.section__image__parallax .parallax__container {
    height: 100%
}

@media(min-width:681px) {
    .section__image__parallax {
        aspect-ratio: 21/9
    }
}

@media(max-width:680px) {
    .section__image__parallax {
        aspect-ratio: 3/2
    }
}

.section__video__block {
    position: relative;
    width: 100%
}

.post-it__item {
    aspect-ratio: 1/1;
    background: rgb(var(--color-orange));
    color: rgb(var(--color-white))
}

.post-it__item .text__description,
.post-it__item .text__description p,
.post-it__item .pretitle,
.post-it__item .title {
    color: rgb(var(--color-white))
}

.post-it__item+.post-it__item {
    margin-top: var(--grid-gutter)
}

.post-it__item .text__description {
    color: rgb(var(--color-black))
}

.post-it__item .block__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.post-it__item .post-it__inner {
    padding-right: var(--grid-margin)
}

.post-it__image {
    position: relative;
    overflow: hidden
}

.post-it__image:before {
    content: "";
    background: currentcolor;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: left center;
    width: 100%;
    z-index: 2
}

.post-it__image .image__picture {
    display: block;
    height: 100%;
    width: 100%;
    transform: scale(1);
    transition: opacity 0s .4s
}

.post-it__image:not(.hide):before {
    height: 100%;
    animation: growAndSlide .8s ease-in-out forwards
}

.post-it__image.hide .image__picture {
    opacity: 0
}

@media(min-width:981px) {
    .post-it__main {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 3 - var(--grid-gutter))
    }
}

@media(max-width:980px) {

    .post-it__main .title,
    .post-it__main .text__description {
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .post-it__main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - var(--header-height) - var(--grid-gutter) * 2)
    }

    .post-it__wrapper {
        padding: 33.334vh 0 var(--grid-margin) var(--grid-margin)
    }

    .post-it__image {
        height: 33.334vh
    }

    .post-it__section--method {
        border-bottom: solid 1px rgb(var(--color-grey-200))
    }
}

@media(max-width:680px) {
    .post-it__section+.separator__section {
        display: none
    }

    .post-it__section .grid__column+.grid__column {
        border-top: none
    }

    .post-it__image {
        display: none
    }

    .post-it__wrapper {
        padding: 0 var(--grid-margin) calc(2rem + var(--grid-margin))
    }
}

.related-cases__section {
    border-bottom: solid 1px rgb(var(--color-black))
}

.related-cases__list .stack__item {
    display: block;
    border-top: 1px solid rgb(var(--color-black));
    position: relative;
    overflow: hidden
}

.related-cases__list .stack__item:before {
    background: rgb(var(--color-black));
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    transition: opacity .25s ease;
    top: 0;
    width: 100%
}

.related-cases__list .stack__item .block__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.related-cases__list .stack__item .grid__column+.grid__column {
    transition: border-color .25s ease
}

.related-cases__list .stack__item .project__title__content {
    color: rgb(var(--color-black));
    position: relative;
    overflow: hidden
}

.related-cases__list .stack__item .project__title__content--1,
.related-cases__list .stack__item .project__title__content--2 {
    transition: transform .6s var(--menu-handle)
}

.related-cases__list .stack__item .project__title__content--2 {
    left: 0;
    position: absolute;
    top: -100%;
    width: 100%
}

.related-cases__list .stack__item .project__title__content .project__title {
    padding-bottom: .25rem
}

.related-cases__list .stack__item>.wrp {
    position: relative;
    z-index: 1
}

.related-cases__list .stack__item .stack__item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.related-cases__list .stack__item .stack__item__header animated-title {
    margin-bottom: .75rem
}

.related-cases__list .stack__item .stack__item__info animated-title {
    margin-bottom: .75rem
}

.related-cases__list .stack__item .stack__item__info .project__solutions {
    text-transform: capitalize
}

.related-cases__list .stack__item .stack__item__image {
    aspect-ratio: 1/1;
    position: relative
}

.related-cases__list .stack__item__header,
.related-cases__list .stack__item__info,
.related-cases__list .project__title {
    transition: color .25s ease
}

.related-cases__list .c__square {
    display: none
}

@media(hover:hover) {
    .related-cases__list .stack__item:hover {
        color: rgb(var(--color-orange));
        cursor: pointer
    }

    .related-cases__list .stack__item:hover .grid__column+.grid__column {
        border-color: rgba(var(--color-orange), .6)
    }

    .related-cases__list .stack__item:hover:before {
        opacity: 1
    }

    .related-cases__list .stack__item:hover .project__title__content {
        color: rgb(var(--color-orange))
    }

    .related-cases__list .stack__item:hover .project__title__content--1,
    .related-cases__list .stack__item:hover .project__title__content--2 {
        transform: translate3d(0, calc(100% + .25rem), 0)
    }

    .related-cases__list .stack__item:hover .stack__item__order>.pretitle {
        color: rgb(var(--color-orange))
    }

    .related-cases__list .stack__item:hover .stack__item__info .title,
    .related-cases__list .stack__item:hover .stack__item__info .stack__category {
        color: rgb(var(--color-orange))
    }
}

@media(min-width:981px) {
    .related-cases__list .stack__column--1 {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .related-cases__list .stack__column--2 {
        grid-column: span 4
    }

    .related-cases__list .stack__column--3 {
        border-left: none !important;
        grid-column: span 2
    }
}

@media(max-width:981px)and (min-width:680px) {
    .related-cases__list .stack__column--1 {
        grid-column: span calc(var(--grid-columns) / 2 - 1)
    }

    .related-cases__list .stack__column--2 {
        grid-column: span 3
    }

    .related-cases__list .stack__column--3 {
        border-left: none !important;
        grid-column: span 2
    }

    .related-cases__list .stack__item__inner {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .related-cases__list .stack__item__image {
        padding-left: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .related-cases__list .stack__item .stack__item__inner {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .related-cases__list .stack__item .stack__item__inner>div {
        width: 100%
    }

    .related-cases__list .stack__item .stack__item__inner .stack__item__info {
        padding-left: var(--grid-gutter)
    }

    .related-cases__list .stack__item .project__title__content {
        margin-bottom: .5rem
    }

    .related-cases__list .stack__item .stack__item__order {
        margin-bottom: .75rem
    }

    .related-cases__list .stack__column {
        border-left: none !important
    }

    .related-cases__list .stack__column--1 {
        grid-column: span var(--grid-columns)
    }

    .related-cases__list .stack__column--2,
    .related-cases__list .stack__column--3 {
        border-top: none !important;
        grid-column: 1/-1
    }

    .related-cases__list .stack__item__image {
        margin-bottom: 2rem
    }
}

.section__stack .section__head,
.section__stack .stack__container {
    border-bottom: 1px solid rgb(var(--color-black))
}

.section__stack .stack__item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.section__stack .stack__item {
    border-top: 1px solid rgb(var(--color-black));
    background: rgb(var(--color-orange))
}

.section__stack .stack__item .stack__item__order {
    display: flex;
    gap: .5rem
}

.section__stack .stack__item .stack__item__order .dash {
    height: auto;
    position: relative;
    margin-top: -.0625rem;
    width: .5rem
}

.section__stack .stack__item .stack__item__order .dash,
.section__stack .stack__item .stack__item__order .dash-icon {
    fill: rgb(var(--color-white))
}

.machine-specs .grid__column + .grid__column {
    border-left: none !important
}

.machine-specs .spec__row {
    border-top-color: rgb(var(--color-black)) !important
}

.machine-specs .spec__row:last-child {
    border-bottom-color: rgb(var(--color-black)) !important
}

@media(hover:hover) {
    .solutions__list__section a:hover .solutions__item:before {
        background: rgb(var(--color-white))
    }
    .solutions__list__section a:hover .solutions__item,
    .solutions__list__section a:hover .solutions__item .title {
        color: rgb(var(--color-black)) !important
    }
    /* NGPL: on the white hover fill the number, slash and title all turn accent */
    .solutions__list__section a:hover .solutions__item .title,
    .solutions__list__section a:hover .solutions__item .dash svg {
        color: rgb(var(--color-orange)) !important;
        fill: rgb(var(--color-orange))
    }
}

.page__footer .footer__window {
    background: rgb(var(--color-black));
    position: relative
}

.section__stack .stack__item .stack__item__info ul {
    padding-left: 1.375rem
}

.section__stack .stack__item .stack__item__info ul li {
    display: list-item;
    list-style: square
}

.section__stack .stack__item .stack__title {
    margin-bottom: 3.5rem;
    text-wrap: balance
}

.section__stack .stack__item .stack__item__image {
    background-color: rgb(var(--color-orange));
    aspect-ratio: 1/1.25;
    line-height: 0;
    position: relative;
    overflow: hidden
}

.section__stack .stack__item .stack__item__image:before {
    content: "";
    background: currentcolor;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: left center;
    width: 100%;
    z-index: 2
}

.section__stack .stack__item .stack__item__image .image__picture {
    display: block;
    height: 100%;
    width: 100%;
    transform: scale(1);
    transition: opacity 0s .4s
}

.section__stack .stack__item:not(.hide) .stack__item__image:before {
    height: 100%;
    animation: growAndSlide .8s ease-in-out forwards
}

.section__stack .stack__item.hide .image__picture {
    opacity: 0
}

@media(hover:hover) {
    .section__stack .stack__item__header .pretitle {
        cursor: pointer;
        transition: color .3s ease
    }

    .section__stack .stack__item__header .pretitle:hover {
        color: rgb(var(--color-white))
    }
}

@media(min-width:981px) {

    .section__stack .section__intro,
    .section__stack .stack__item__inner {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .section__stack .stack__column--1 {
        grid-column: span 3
    }

    .section__stack .stack__column--2 {
        order: 1;
        grid-column: span 6
    }

    .section__stack .stack__column--3 {
        grid-column: span 3
    }
}

@media(max-width:981px)and (min-width:680px) {
    .section__stack .section__stack__header .grid__column:first-child {
        grid-column: 1/-1
    }

    .section__stack .section__stack__header .grid__column:last-child {
        display: none
    }

    .section__stack .stack__column {
        border-left: none !important
    }

    .section__stack .stack__column--1 {
        border-bottom: 1px solid rgb(var(--color-black));
        grid-column: span var(--grid-columns);
        margin: 0 var(--grid-margin-negative)
    }

    .section__stack .stack__column--1 .stack__item__order {
        padding: 0 var(--grid-margin)
    }

    .section__stack .stack__column--2,
    .section__stack .stack__column--3 {
        grid-column: span 4
    }

    .section__stack .stack__column--2 {
        order: 1
    }

    .section__stack .stack__column .block__inner>.wrp {
        padding: 0
    }

    .section__stack .stack__column .stack__item__inner {
        padding-right: var(--grid-margin)
    }

    .section__stack .stack__item__inner {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .section__stack .stack__item {
        position: sticky;
        contain: layout
    }

    .section__stack .stack__item:nth-of-type(1) {
        top: calc(0 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .section__stack .stack__item:nth-of-type(2) {
        top: calc(1 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .section__stack .stack__item:nth-of-type(3) {
        top: calc(2 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .section__stack .stack__item:nth-of-type(4) {
        top: calc(3 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .section__stack .stack__item:nth-of-type(5) {
        top: calc(4 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .section__stack .stack__item__image {
        padding-left: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .section__stack .stack__column {
        border-left: none !important
    }

    .section__stack .stack__column--1 {
        border-bottom: 1px solid rgb(var(--color-black));
        grid-column: span var(--grid-columns)
    }

    .section__stack .stack__column--2,
    .section__stack .stack__column--3 {
        border-top: none !important;
        grid-column: 1/-1
    }

    .section__stack .stack__item__image {
        margin-bottom: 2rem
    }
}

.solutions__item {
    border-top: solid 1px;
    box-sizing: border-box;
    padding: var(--grid-margin) 0;
    position: relative;
    transition: color .3s ease, border-color .6s var(--menu-handle)
}

.solutions__item:before {
    background: rgb(var(--color-white));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform .6s var(--menu-handle);
    top: 0;
    width: 100%
}

.solutions__item__inner {
    display: grid
}

.solutions__list__header .grid__column+.grid__column {
    border: none
}

.solutions__list__container {
    border-bottom: solid 1px
}

.solutions__item__order {
    position: relative;
    overflow: hidden
}

.solutions__item__order>div {
    display: flex;
    gap: var(--grid-gutter)
}

.solutions__item__order>div .dash {
    fill: currentcolor;
    height: 2.5rem;
    margin-top: .375rem;
    width: fit-content
}

.solutions__item__order--1,
.solutions__item__order--2 {
    transition: transform .6s var(--menu-handle)
}

.solutions__item__order--2 {
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%
}

.solutions__item__order .title {
    padding-bottom: .3125rem
}

.solutions__item__content,
.solutions__item__media {
    position: relative;
    overflow: hidden
}

.solutions__item__content--1,
.solutions__item__content--2,
.solutions__item__media--1,
.solutions__item__media--2 {
    transition: transform .6s var(--menu-handle)
}

.solutions__item__content--2,
.solutions__item__media--2 {
    position: absolute;
    left: 0;
    top: calc(-100% - .5px);
    width: 100%
}

.solutions__item__content .title,
.solutions__item__media .title {
    padding-bottom: .3125rem
}

.solutions__item__media {
    aspect-ratio: 1/1
}

.solutions__item__media--1 {
    opacity: .2
}

.bg--grey-100 .solutions__list__container,
.bg--grey-100 .solutions__item,
.bg--grey-100 .solutions__item__media {
    border-color: rgb(var(--color-grey-300))
}

.bg--black .solutions__list__container,
.bg--black .solutions__item,
.bg--black .solutions__item__media {
    border-color: rgba(var(--color-orange), .6)
}

.matrix__section--robot+.solutions__list__section {
    border-top: solid 1px rgba(var(--color-orange), .6)
}

.solutions__list__section--method+.separator__section--method {
    border-bottom: solid 1px rgba(var(--color-orange), .6)
}

@media(hover:none) {
    .solutions__item__media {
        border: solid 1px
    }

    .solutions__item__media--1 {
        display: none
    }

    .solutions__item__media--2 {
        position: relative;
        top: 0
    }
}

@media(hover:hover) {
    a:hover .solutions__item {
        border-color: rgb(var(--color-white));
        color: rgb(var(--color-black))
    }

    a:hover .solutions__item:before {
        transform: scaleY(1)
    }

    a:hover .solutions__item__order--1,
    a:hover .solutions__item__order--2,
    a:hover .solutions__item__content--1,
    a:hover .solutions__item__content--2,
    a:hover .solutions__item__media--1,
    a:hover .solutions__item__media--2 {
        transform: translate3d(0, 100%, 0)
    }
}

@media(min-width:981px) {
    .solutions__item__inner {
        align-items: center
    }

    .solutions__list__section .section__text,
    .solutions__list__section .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .solutions__list__header .grid__column--two-thirds {
        grid-column: span calc(var(--grid-columns) / 3 * 2)
    }
}

@media(min-width:681px) {
    .solutions__item__order {
        grid-column: span calc(var(--grid-columns) / 2);
        padding-left: .5rem
    }

    .solutions__item__order--2 {
        left: .5rem
    }

    .solutions__item__content {
        grid-column: span calc(var(--grid-columns) / 2 - 1)
    }
}

@media(max-width:680px) {
    .solutions__list__section .section__header {
        box-sizing: border-box;
        padding-right: var(--grid-margin);
        margin-bottom: .875rem
    }

    .solutions__item {
        padding-left: var(--grid-margin);
        padding-right: var(--grid-margin)
    }

    .solutions__item .title--m {
        font-size: 1.6875rem;
        line-height: 1
    }

    .solutions__item__order {
        margin-top: .75rem
    }

    .solutions__item__order>div {
        gap: .5rem
    }

    .solutions__item__order>div .dash {
        height: 1.375rem;
        margin-top: .1875rem
    }

    .solutions__item__content {
        grid-column: span calc(var(--grid-columns) / 2);
        margin-top: .75rem
    }
}

.project-detail-cross-image__img {
    position: relative;
    aspect-ratio: 1/1.2
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(odd) {
    position: relative
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(odd):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgb(var(--color-grey-200));
    opacity: .2
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(odd) .project-detail-cross-image__img {
    border-top: 1px solid rgb(var(--color-grey-200))
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(odd) .project-cross-info {
    margin-bottom: 10rem;
    margin-right: var(--grid-margin);
    margin-left: var(--grid-margin);
    margin-top: var(--grid-margin)
}

@media(max-width:680px) {
    .project-detail-cross-image .grid__layout .grid__column:nth-child(odd) .project-cross-info {
        margin-bottom: 3.5rem
    }
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(2n) .project-detail-cross-image__img {
    border-bottom: 1px solid rgb(var(--color-grey-200))
}

.project-detail-cross-image .grid__layout .grid__column:nth-child(2n) .project-cross-info {
    margin-top: 10rem;
    margin-left: var(--grid-margin);
    margin-right: var(--grid-margin);
    margin-bottom: var(--grid-margin)
}

@media(max-width:680px) {
    .project-detail-cross-image .grid__layout .grid__column:nth-child(2n) .project-cross-info {
        margin-top: 3.5rem
    }
}

.intro--about {
    color: rgb(var(--color-white))
}

.intro--about .grid__column+.grid__column {
    border-color: rgb(var(--color-grey-400))
}

.intro--about cross-hair .line {
    background-color: rgb(var(--color-grey-400))
}

.intro--about cross-hair .number-right,
.intro--about cross-hair .number-bottom {
    color: rgb(var(--color-grey-200))
}

.intro--about cross-hair .cross-point {
    background: rgb(var(--color-white))
}

.double__images--about .double__image__img--1 {
    aspect-ratio: 1/1.3334
}

@media(min-width:981px) {

    :lang(en) .about__intro__header .section__title,
    :lang(en) .about__intro__header .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .about__intro__text {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter) * 2)
    }

    .intro__image__section.intro--about .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 6 - var(--grid-gutter) * 2)
    }
}

@media(min-width:681px) {

    .about__intro__section .grid__column:last-child .wrp,
    .about__intro__section .grid__column:last-child .block__inner {
        height: 100%
    }

    .about__intro__section .grid__column:last-child .flex--column {
        justify-content: space-between;
        height: 100%
    }

    .about__intro__image {
        aspect-ratio: 1/1
    }
}

@media(max-width:680px) {
    .about__intro__image {
        aspect-ratio: 1/1.25
    }
}

.team__title__column {
    grid-column: 1/4
}

.team__card__column {
    grid-column: 4/-1
}

.team__row {
    display: grid
}

.team__row:not(:last-child) {
    border-bottom: solid 1px rgb(var(--color-grey-200))
}

.team__card {
    box-sizing: border-box;
    padding: var(--grid-margin) var(--grid-margin) calc(var(--grid-margin) * 1.5);
    position: relative;
    transition: background .25s ease, border-color .25s ease, color .25s ease
}

.team__card:before {
    background: rgb(var(--color-black));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    transform-origin: left;
    opacity: 0;
    transition: opacity .25s ease;
    top: 0;
    width: 100%
}

.team__card .team__card__name {
    margin-top: 1rem
}

.team__card .team__card__name,
.team__card .team__card__position {
    position: relative;
    overflow: hidden;
    z-index: 2
}

.team__card .team__card__name--1,
.team__card .team__card__position--1 {
    transition: transform .6s var(--menu-handle)
}

.team__card .team__card__name--2,
.team__card .team__card__position--2 {
    left: 0;
    position: absolute;
    top: -100%;
    width: 100%;
    transition: transform .6s var(--menu-handle)
}

.team__card__image {
    aspect-ratio: 1/1.25;
    display: block;
    position: relative;
    pointer-events: none
}

.linkedin__icon {
    fill: rgb(var(--color-orange));
    position: absolute;
    transition: opacity .25s ease;
    z-index: 1
}

@media(hover:hover) {
    .linkedin__icon {
        opacity: 0
    }

    a.team__card:hover {
        color: rgb(var(--color-white));
        cursor: pointer
    }

    a.team__card:hover:before {
        opacity: 1
    }

    a.team__card:hover .linkedin__icon {
        opacity: 1
    }

    a.team__card:hover .team__card__name--1,
    a.team__card:hover .team__card__name--2,
    a.team__card:hover .team__card__position--1,
    a.team__card:hover .team__card__position--2 {
        transform: translate3d(0, 100%, 0)
    }
}

@media(min-width:981px) {
    .about__team__container .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 3) * 3 - var(--grid-gutter))
    }

    .team__row {
        grid-template-columns: repeat(3, 1fr)
    }

    .team__row .team__card:not(:last-child),
    .team__row cross-hair:not(:last-child) {
        border-right: solid 1px rgb(var(--color-grey-200))
    }

    .linkedin__icon {
        height: 1.5rem;
        width: 1.5rem;
        top: .75rem;
        right: .75rem
    }
}

@media(max-width:980px) {
    .team__row {
        grid-template-columns: repeat(2, 1fr)
    }

    .team__row cross-hair {
        display: none
    }

    .team__row .team__card:last-of-type {
        border-left: solid 1px rgb(var(--color-grey-200))
    }

    .team__row:first-child .team__card {
        grid-column: 2/3
    }

    .team__row:last-child .team__card:nth-child(2) {
        border-left: none
    }

    .linkedin__icon {
        height: 1.25rem;
        width: 1.25rem;
        top: .625rem;
        right: .625rem
    }
}

.about__location__section {
    color: rgb(var(--color-white))
}

.about__location__cards {
    border-top: solid 1px rgb(var(--color-grey-400));
    border-bottom: solid 1px rgb(var(--color-white))
}

.about__location__cards .grid__column+.grid__column {
    border: none
}

.location__card__inner {
    display: flex;
    gap: var(--grid-gutter);
    justify-content: space-between
}

.location__card {
    position: relative;
    overflow: hidden
}

.location__column {
    color: rgb(var(--color-grey-200));
    width: 100%
}

.location__column--left {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media(min-width:681px) {
    .about__intro__image {
        height: 100%;
        width: 100%
    }

    .grid__column:nth-child(2n+2) .location__card {
        height: 100%
    }

    .grid__column:nth-child(2n+2) .location__card .wrp {
        border-left: solid 1px rgb(var(--color-grey-400))
    }

    .grid__column:nth-child(2n+2) .location__card .location__image {
        border-left: solid 1px rgb(var(--color-white))
    }

    .location__column--left .card__description {
        text-wrap: balance;
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5)
    }

    .location__image {
        height: 24rem
    }
}

@media(max-width:680px) {
    .location__card__inner {
        flex-direction: column;
        gap: 2.5rem
    }

    .location__column--left .card__description {
        margin-top: 1em;
        width: 50%
    }

    .location__image {
        aspect-ratio: 3/2
    }
}

.contact__form contact-form {
    position: relative;
    display: block
}

.contact__form .field__input {
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-grey-50)) inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important
}

.form {
    position: relative
}

.form .form__step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s .25s
}

.form .form__step.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity .25s ease .25s, visibility 0s
}

.form .step__title {
    display: flex;
    gap: .25rem;
    padding: 2rem 0
}

.form .step__title .pretitle {
    width: 1.25rem
}

.form .step__title .dash {
    height: auto;
    position: relative;
    margin-top: .0625rem;
    width: .5rem
}

.form .form__control {
    display: flex;
    gap: .75rem;
    margin: .75rem 0 1.5rem
}

.form .form__control .prev__step .button {
    transform: rotate(180deg);
    min-width: auto
}

.form .form__control .prev__step .button .button__icon {
    border-left: none
}

.field__label {
    font-size: clamp(16px, 1.125rem, 24px);
    font-weight: 600;
    line-height: 1.25
}

.form__field,
.form__group,
.form__textarea {
    width: 100%
}

.form__field .field__input,
.form__group .field__input,
.form__textarea .field__input {
    display: block;
    cursor: text;
    font-size: clamp(16px, 1.125rem, 24px);
    line-height: 1.25;
    width: 100%
}

.form__field .field__input::placeholder,
.form__group .field__input::placeholder,
.form__textarea .field__input::placeholder {
    color: rgba(var(--color-black), .4)
}

.form__field.privacy__group,
.form__group.privacy__group,
.form__textarea.privacy__group {
    border-top: solid 1px rgb(var(--color-black));
    padding-top: .375rem
}

.form__field.privacy__group .field>.field__input,
.form__group.privacy__group .field>.field__input,
.form__textarea.privacy__group .field>.field__input {
    font-size: clamp(10px, .9375rem, 20px);
    line-height: 1.3334;
    padding: .25rem .25rem .25rem calc(.625rem + var(--grid-gutter))
}

.form__field.privacy__group .field>.field__input:before,
.form__group.privacy__group .field>.field__input:before,
.form__textarea.privacy__group .field>.field__input:before {
    left: .25rem;
    height: 1rem;
    top: .375rem;
    width: 1rem
}

.form__field.privacy__group .field>.field__input:after,
.form__group.privacy__group .field>.field__input:after,
.form__textarea.privacy__group .field>.field__input:after {
    background: rgb(var(--color-orange));
    content: "";
    left: .5rem;
    opacity: 0;
    position: absolute;
    height: .5rem;
    top: .625rem;
    width: .5rem
}

.form__field.privacy__group .rgpd__message,
.form__group.privacy__group .rgpd__message,
.form__textarea.privacy__group .rgpd__message {
    position: relative;
    z-index: 1
}

.form__field.privacy__group .rgpd__message a,
.form__group.privacy__group .rgpd__message a,
.form__textarea.privacy__group .rgpd__message a {
    text-decoration: underline
}

.form__field .error__group,
.form__group .error__group,
.form__textarea .error__group {
    height: clamp(13.334px, 1.2500625rem, 26.668px);
    position: relative
}

.form__field .input--error,
.form__group .input--error,
.form__textarea .input--error {
    font-size: clamp(10px, .9375rem, 20px);
    line-height: 1.3334;
    visibility: hidden;
    pointer-events: none;
    color: rgb(var(--color-orange))
}

.form__field .input--error.active,
.form__group .input--error.active,
.form__textarea .input--error.active {
    visibility: visible
}

.form__field .input--error.email__error2,
.form__group .input--error.email__error2,
.form__textarea .input--error.email__error2 {
    left: 0;
    position: absolute;
    top: 0
}

.form__field .field,
.form__group .field,
.form__textarea .field {
    box-sizing: border-box
}

.form__field .field--radio,
.form__field .field--checkbox,
.form__group .field--radio,
.form__group .field--checkbox,
.form__textarea .field--radio,
.form__textarea .field--checkbox {
    display: flex;
    position: relative
}

.form__field .field--radio .field__input,
.form__field .field--checkbox .field__input,
.form__group .field--radio .field__input,
.form__group .field--checkbox .field__input,
.form__textarea .field--radio .field__input,
.form__textarea .field--checkbox .field__input {
    cursor: pointer;
    transition: background-color .25s ease;
    padding: .25rem .25rem .25rem calc(1rem + var(--grid-gutter))
}

.form__field .field--radio .field__input:before,
.form__field .field--checkbox .field__input:before,
.form__group .field--radio .field__input:before,
.form__group .field--checkbox .field__input:before,
.form__textarea .field--radio .field__input:before,
.form__textarea .field--checkbox .field__input:before {
    border: solid 1px rgb(var(--color-black));
    box-sizing: border-box;
    content: "";
    left: .25rem;
    position: absolute;
    height: var(--grid-gutter);
    pointer-events: none;
    top: .3125rem;
    width: var(--grid-gutter)
}

.form__field .field--radio .field__input:after,
.form__field .field--checkbox .field__input:after,
.form__group .field--radio .field__input:after,
.form__group .field--checkbox .field__input:after,
.form__textarea .field--radio .field__input:after,
.form__textarea .field--checkbox .field__input:after {
    background: rgb(var(--color-orange));
    content: "";
    left: .5rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    height: calc(var(--grid-gutter) - .5rem);
    top: .5625rem;
    width: calc(var(--grid-gutter) - .5rem)
}

.form__field .field--radio input,
.form__field .field--checkbox input,
.form__group .field--radio input,
.form__group .field--checkbox input,
.form__textarea .field--radio input,
.form__textarea .field--checkbox input {
    background: transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.form__field .field--radio input:hover+.field__input,
.form__field .field--checkbox input:hover+.field__input,
.form__group .field--radio input:hover+.field__input,
.form__group .field--checkbox input:hover+.field__input,
.form__textarea .field--radio input:hover+.field__input,
.form__textarea .field--checkbox input:hover+.field__input {
    background: rgba(var(--color-black), .1)
}

.form__field .field--radio input:checked+.field__input:after,
.form__field .field--checkbox input:checked+.field__input:after,
.form__group .field--radio input:checked+.field__input:after,
.form__group .field--checkbox input:checked+.field__input:after,
.form__textarea .field--radio input:checked+.field__input:after,
.form__textarea .field--checkbox input:checked+.field__input:after {
    opacity: 1
}

.form__textarea {
    border-top: solid 1px rgb(var(--color-black));
    padding: .5rem 0
}

.form__textarea .field__textarea {
    display: block;
    cursor: text;
    font-size: clamp(16px, 1.125rem, 24px);
    line-height: 1.25;
    margin-top: 1.25rem;
    width: 100%
}

.form__textarea .field__textarea::placeholder {
    color: rgba(var(--color-black), .4)
}

.form__field {
    border-top: solid 1px rgb(var(--color-black));
    padding: .5rem 0
}

.form__field .field {
    box-sizing: border-box
}

.form__selection {
    border-top: solid 1px rgb(var(--color-black));
    display: flex;
    gap: var(--grid-gutter);
    padding-top: .5rem
}

.form__options {
    display: flex;
    flex-direction: column;
    margin-top: .75rem
}

.form__options .input--error {
    margin-top: .75rem
}

.message__label {
    box-sizing: border-box;
    padding-right: var(--grid-margin)
}

.message__label .title {
    margin-bottom: .25rem
}

@media(min-width:981px) {
    .contact__form .section__title .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4 - var(--grid-gutter))
    }
}

@media(min-width:681px) {
    .contact__form--column:first-child {
        display: flex;
        height: 100%;
        flex-direction: column
    }

    .contact__form__main {
        border-bottom: solid 1px rgb(var(--color-grey-200))
    }

    .solutions__group {
        padding-left: var(--grid-margin)
    }

    .form__field {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gutter)
    }

    .form__field .field {
        padding-left: var(--grid-gutter)
    }
}

@media(max-width:680px) {
    .contact__form cross-hair {
        display: none
    }

    .contact__form--column:last-child>div {
        padding-top: 0
    }

    .contact__form .form .step__title {
        padding-top: 1rem
    }

    .form__field .field {
        padding-top: .25rem
    }

    .solutions__group {
        padding-left: var(--grid-gutter)
    }
}

.close--modal {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    transition: background-color .25s ease
}

.close--modal__inner {
    height: 1.375rem;
    width: 1.375rem
}

.contact__modal__back {
    background: rgba(var(--color-black), .1);
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem);
    height: 100%;
    opacity: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .6s ease;
    width: 100%;
    z-index: 10
}

.contact__modal--res {
    align-items: center;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
    width: 100%;
    height: 100vh
}

.contact__modal--res .modal__success,
.contact__modal--res .modal__error,
.contact__modal--res .modal__sending {
    display: none
}

.contact__modal--res.show {
    pointer-events: auto
}

.contact__modal--res.show .contact__modal__back {
    opacity: 1;
    pointer-events: auto
}

.contact__modal--res.show .modal__container--res {
    clip-path: inset(0 0 0 0)
}

.contact__modal--res.show.sending {
    cursor: progress
}

.contact__modal--res.show.sending .modal__sending,
.contact__modal--res.show.success .modal__success,
.contact__modal--res.show.error .modal__error {
    display: block !important
}

.contact__modal--res .contact__modal__inner>.text {
    box-sizing: border-box;
    padding-right: var(--grid-margin)
}

.contact__modal--res .modal__container--res {
    clip-path: inset(0 0 100% 0);
    background: rgb(var(--color-white));
    color: rgb(var(--color-black));
    display: flex;
    flex-direction: column;
    padding: .5rem .5rem var(--grid-margin) var(--grid-margin);
    position: absolute;
    transition: clip-path .6s var(--menu-handle);
    max-width: 20rem;
    width: 100%;
    z-index: 11
}

.contact__modal--res .modal__container__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--grid-margin)
}

.contact__modal--res .close__modal {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    transition: background-color .25s ease
}

.contact__modal--res .close__modal__inner {
    height: 1.375rem;
    width: 1.375rem
}

@media(hover:hover) {

    .close--modal:hover,
    .close__modal:hover {
        background: rgb(var(--color-orange))
    }
}

@media(max-width:680px) {
    .modal__container--res {
        max-width: calc(100% - var(--grid-margin) * 2)
    }
}

request-doc-form .modal__request {
    display: block
}

request-doc-form .modal__container--res {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgb(var(--color-white));
    z-index: 10
}

request-doc-form.show .modal__request {
    display: none
}

request-doc-form.show .modal__container--res {
    display: block
}

request-doc-form.show.success .modal__success {
    display: block
}

request-doc-form.show.success .modal__error {
    display: none
}

request-doc-form.show.success .modal__sending {
    display: none !important
}

request-doc-form.show.error .modal__success {
    display: none
}

request-doc-form.show.error .modal__error {
    display: block
}

request-doc-form.show.error .modal__sending {
    display: none !important
}

request-doc-form.show.sending .modal__success {
    display: none
}

request-doc-form.show.sending .modal__error {
    display: none
}

request-doc-form.show.sending .modal__sending {
    display: block
}

.home__hero__column--left .home__hero__inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--header-height) 0 .5rem
}

.home__hero__column--left .home__hero__inner .hero__claim {
    text-wrap: balance
}

.hero__main {
    position: relative;
    overflow: hidden
}

.hero__tags {
    border-bottom: solid 1px rgba(var(--color-black), .2);
    border-top: solid 1px rgb(var(--color-black));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--grid-gutter);
    font-weight: 600;
    padding: var(--grid-margin);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.hero__tags .tag__name,
.hero__tags .tag__data {
    grid-column: span 2
}

.hero__logo__container,
.hero__logo__container--mobile {
    border-bottom: solid 1px rgba(var(--color-black), .2);
    display: flex;
    justify-content: flex-end;
    position: relative;
    overflow: hidden
}

.hero__logo__container .hero__logo,
.hero__logo__container .hero__logo__mobile,
.hero__logo__container--mobile .hero__logo,
.hero__logo__container--mobile .hero__logo__mobile {
    fill: rgb(var(--color-black));
    display: block;
    line-height: 0;
    padding: 6.125rem 0 2.5rem;
    position: relative;
    width: 30rem
}

#interactive--logo {
    width: calc(200% - 30rem);
    height: 100%;
    z-index: 9
}

/* NGPL: interactive hero mark — guide lines live again */

.hero__tags,
.hero__main,
.hero__logo__container,
.hero__logo__container--mobile {
    grid-column: 1/-1
}

@media(hover:hover) {
    .hero__logo__container--mobile {
        display: none
    }

    .h-line {
        background: rgb(var(--color-black));
        position: absolute;
        opacity: .3
    }

    .h-line--left,
    .h-line--right {
        top: 0;
        left: 0;
        height: 100%;
        width: 1px
    }

    .h-line--top,
    .h-line--bottom {
        top: 0;
        left: 0;
        height: 1px;
        width: 100%
    }
}

@media(hover:none) {
    .hero__logo__container {
        display: none
    }

    .s-line {
        background: rgb(var(--color-black));
        position: absolute;
        opacity: .3
    }
}

@media(min-width:981px) {
    .home__hero__column--left {
        grid-column: span calc(var(--grid-columns) / 3)
    }

    .home__hero__column--right {
        grid-column: span calc(var(--grid-columns) / 3 * 2)
    }
}

@media(max-width:980px)and (min-width:681px) {

    .home__hero__column--left,
    .home__hero__column--right {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .hero__logo__container .hero__logo {
        box-sizing: border-box;
        padding: 3.75rem 0 .75rem;
        width: 100%
    }

    .hero__logo__container--mobile .hero__logo__mobile {
        box-sizing: border-box;
        padding: 5rem var(--grid-margin) 0;
        width: 66.667%
    }

    .hero__logo__container--mobile .s-line--right {
        top: 0;
        right: var(--grid-margin);
        height: 100%;
        width: 1px
    }
}

@media(min-width:681px) {
    .home__hero__column--left {
        border-right: solid 1px rgb(var(--color-black))
    }

    .home__hero__column--left .block__inner {
        height: 100%
    }

    .hero__main {
        margin: var(--header-height) var(--grid-margin-negative) 0
    }
}

@media(max-width:680px) {

    .home__hero__column--left,
    .home__hero__column--right {
        grid-column: 1/-1
    }

    .hero__logo__container .hero__logo,
    .hero__logo__container--mobile .hero__logo__mobile {
        box-sizing: border-box;
        padding: 3.125rem var(--grid-margin) var(--grid-margin);
        width: 50%
    }

    .hero__logo__container--mobile .s-line--left,
    .hero__logo__container--mobile .s-line--right {
        height: 100%;
        width: 1px
    }

    .hero__logo__container--mobile .s-line--left {
        top: 0;
        left: calc(50% + var(--grid-margin))
    }

    .hero__logo__container--mobile .s-line--right {
        top: 0;
        right: var(--grid-margin)
    }

    .hero__logo__container--mobile .s-line--bottom {
        height: 1px;
        width: 100%;
        bottom: var(--grid-margin);
        left: 0
    }
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    @media(min-width:681px) {

        .hero__tags,
        .hero__logo__container {
            width: calc(100% + var(--grid-margin) * 2)
        }
    }
}

.home__video--parallax {
    position: absolute !important
}

.vision__header .section__title {
    max-width: 35rem
}

.vision__header .text__description {
    max-width: 20rem
}

.vision__image {
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%
}

.vision__blocks {
    border-top: solid 1px rgb(var(--color-grey-200));
    display: flex
}

.vision__blocks .box .text__description {
    padding-right: var(--grid-margin)
}

.values__container {
    border-top: solid 1px rgb(var(--color-grey-200));
    position: relative;
    overflow: hidden
}

.values__container .toggle__header {
    align-items: center
}

.values__container .toogle__box.is-open .toggle__header {
    pointer-events: none
}

.intro__image__section+.values__section .values__container,
.only__image__section+.values__section .values__container {
    border-top: none
}

@media(min-width:981px) {
    .values__container .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter))
    }

    .vision__blocks {
        margin-right: var(--grid-margin-negative)
    }

    .vision__blocks .box {
        width: 50%
    }

    .vision__blocks .box:last-child {
        border-left: solid 1px rgb(var(--color-grey-200))
    }

    .vision__blocks .box .button__link,
    .vision__blocks .box .button {
        width: 100%
    }
}

@media(max-width:980px) {
    .vision__blocks {
        flex-direction: column
    }

    .vision__blocks .box:last-child {
        border-top: solid 1px rgb(var(--color-grey-200))
    }
}

@media(min-width:681px) {
    .vision__blocks .box .block__inner {
        height: 100%
    }

    .vision__blocks .box .block__inner .wrp {
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .vision__blocks .box .block__inner .wrp .pt--xlarge {
        box-sizing: border-box;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .has--border .values__container .grid__column:first-child:before {
        background: rgb(var(--color-grey-200));
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        width: calc(100% + var(--grid-gutter))
    }
}

@media(max-width:680px) {
    .vision__image {
        aspect-ratio: 1/1.2
    }

    .vision__header .section__title {
        padding-right: var(--grid-margin)
    }

    .vision__header .text__description {
        text-wrap: balance
    }

    .vision__blocks .pt--xlarge {
        padding-bottom: var(--grid-margin)
    }
}

.home__office__section {
    color: rgb(var(--color-white))
}

.home__office__section .grid__column+.grid__column {
    border-color: rgb(var(--color-grey-400))
}

.home__office__section cross-hair .line {
    background-color: rgb(var(--color-grey-400))
}

.home__office__section cross-hair .number-right,
.home__office__section cross-hair .number-bottom {
    color: rgb(var(--color-grey-200))
}

.home__office__section cross-hair .cross-point {
    background: rgb(var(--color-white))
}

.home__office__section .overline {
    background: rgb(var(--color-white));
    height: 100%;
    top: 0;
    position: absolute;
    width: 1px
}

@media(min-width:981px) {
    .home__office__section .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 6 - var(--grid-gutter) * 2)
    }

    .home__office__section .overline {
        left: calc(var(--grid-margin) + 9 * (100% - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + 9 * var(--grid-gutter))
    }
}

@media(max-width:980px)and (min-width:681px) {
    .home__office__section .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .home__office__section .overline {
        left: calc(var(--grid-margin) + 6 * (100% - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + 6 * var(--grid-gutter))
    }
}

@media(max-width:680px) {
    .home__office__section .overline {
        display: none
    }
}

.home__stack .section__head,
.home__stack .stack__container {
    border-bottom: 1px solid rgb(var(--color-grey-200))
}

.home__stack .stack__item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.home__stack .stack__item {
    border-top: 1px solid rgb(var(--color-grey-200));
    background: rgb(var(--color-grey-50))
}

.home__stack .stack__item .stack__item__order {
    display: flex;
    gap: .5rem
}

.home__stack .stack__item .stack__item__order .pretitle:first-child {
    min-width: 1.375rem
}

.home__stack .stack__item .stack__item__order .dash {
    height: auto;
    position: relative;
    margin-top: -.0625rem;
    width: .5rem
}

.home__stack .stack__item .stack__title {
    margin-bottom: 2.5rem
}

.home__stack .stack__item .stack__item__image {
    background: rgb(var(--color-grey-50));
    aspect-ratio: 1/1.25;
    line-height: 0;
    position: relative
}

@media(hover:hover) {
    .home__stack .stack__item__header .pretitle {
        cursor: pointer;
        transition: color .3s ease
    }

    .home__stack .stack__item__header .pretitle:hover {
        color: rgb(var(--color-black))
    }
}

@media(min-width:981px) {
    .home__stack .section__title {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .home__stack .stack__item__header {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2);
        text-wrap: balance
    }

    .home__stack .stack__item__info {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
    }

    .home__stack .stack__column--1 {
        grid-column: span 3
    }

    .home__stack .stack__column--2 {
        order: 1;
        grid-column: span 6
    }

    .home__stack .stack__column--3 {
        grid-column: span 3
    }

    .home__stack .stack__item__image {
        margin-left: var(--grid-margin)
    }
}

@media(max-width:981px)and (min-width:680px) {
    .home__stack .stack__column {
        border-left: none !important
    }

    .home__stack .stack__column--1 {
        border-bottom: 1px solid rgb(var(--color-grey-200));
        grid-column: span var(--grid-columns);
        margin: 0 var(--grid-margin-negative)
    }

    .home__stack .stack__column--1 .stack__item__order {
        padding: 0 var(--grid-margin)
    }

    .home__stack .stack__column--2,
    .home__stack .stack__column--3 {
        grid-column: span 4
    }

    .home__stack .stack__column--2 {
        order: 1
    }

    .home__stack .stack__column .block__inner>.wrp {
        padding: 0
    }

    .home__stack .stack__item__inner {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(min-width:681px) {
    .home__stack .stack__item {
        position: sticky;
        contain: layout paint style
    }

    .home__stack .stack__item:nth-of-type(1) {
        top: calc(0 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .home__stack .stack__item:nth-of-type(2) {
        top: calc(1 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .home__stack .stack__item:nth-of-type(3) {
        top: calc(2 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .home__stack .stack__item:nth-of-type(4) {
        top: calc(3 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .home__stack .stack__item:nth-of-type(5) {
        top: calc(4 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }

    .home__stack .stack__item:nth-of-type(6) {
        top: calc(5 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px)
    }
}

@media(max-width:680px) {
    .home__stack .stack__column {
        border-left: none !important
    }

    .home__stack .stack__column--1 {
        border-bottom: 1px solid rgb(var(--color-grey-200));
        grid-column: span var(--grid-columns)
    }

    .home__stack .stack__column--2,
    .home__stack .stack__column--3 {
        border-top: none !important;
        grid-column: 1/-1
    }

    .home__stack .stack__item__image {
        margin-bottom: 2rem
    }
}

.home__graphic .section__header {
    border-bottom: 1px solid rgb(var(--color-black))
}

.home__graphic .section__title {
    width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5 - var(--grid-gutter) * 2)
}

/* NGPL: homepage schema copy sits in a contained red attention block */
.schema--home .grid__column--half .block__inner,
.schema--home .schema__main {
    background: rgb(var(--color-orange));
    color: rgb(var(--color-white));
    box-sizing: border-box
}

.schema--home .schema__main {
    padding: 2rem
}

.schema--home .schema__main .title,
.schema--home .schema__main .text__description,
.schema--home .schema__main .text__description p,
.schema--home .schema__main p {
    color: rgb(var(--color-white))
}

.schema--home .schema__main .line--mask {
    background: rgb(var(--color-orange))
}

.schema--home {
    background: #FDFDFD;
    color: rgb(var(--color-orange))
}

.schema--home .video__player__native {
    height: 100vh;
    max-height: 100vh
}

.schema--home .home-morph {
    background: #FDFDFD;
    position: relative;
    height: 250vh
}

.schema--home .home-morph__inner {
    display: grid;
    height: 100%;
    place-items: center;
    position: relative;
    width: 100%
}

.schema--home .home__graph--video {
    clip-path: none !important
}

.schema--home .text__description {
    color: rgb(var(--color-grey-500))
}

.schema--home .graph__data {
    align-items: center;
    border-top: solid 1px rgba(var(--color-orange), .6);
    display: flex;
    pointer-events: none;
    top: 100dvh;
    transform: translateY(-100%);
    left: 0;
    position: absolute
}

.schema--home .graph__data .graph__data__logo {
    fill: rgb(var(--color-orange));
    height: 4.5rem;
    width: 4.5rem;
    padding: 0 var(--grid-margin)
}

.schema--home .graph__data .graph__data__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-left: solid 1px rgba(var(--color-orange), .6)
}

.schema--home .graph__data .graph__data__inner span {
    display: inline-block;
    font-weight: 600;
    padding: .5rem 1rem .5rem .75rem;
    text-transform: uppercase
}

.schema--home .graph__data .graph__data__inner span+span {
    border-top: solid 1px rgba(var(--color-orange), .6)
}

@media(min-width:981px) {
    .schema--home .grid__column:first-child .block__inner {
        height: calc(100vh - var(--header-height))
    }

    .schema--home .grid__column:first-child .schema__main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%
    }

    .schema--home .grid__column:first-child .schema__main .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 3 - var(--grid-gutter) * 2)
    }

    .schema--home .grid__column:last-child {
        border-left: solid 1px rgba(var(--color-orange), .6) !important
    }
}

@media(max-width:980px)and (min-width:681px) {
    .schema--home .grid__column {
        grid-column: 1/-1
    }

    .schema--home .grid__column.grid__column--sticky {
        position: relative;
        top: 0
    }

    .schema--home .schema__main {
        width: calc((100% + var(--grid-gutter) * 2) / (var(--grid-columns)) * 6 - var(--grid-gutter) * 2)
    }
}

@media(min-width:681px) {
    .schema--home .graph__data {
        border-right: solid 1px rgba(var(--color-orange), .6)
    }
}

@media(max-width:680px) {

    .schema--home .graph__data,
    .schema--home .graph__data .graph__data__inner {
        width: 100%
    }
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    @media(pointer:coarse) {

        .schema--home,
        .home-morph {
            background-color: #FDFDFD !important
        }
    }
}

.pilar__intro .intro__back {
    height: 50vh;
    width: 100%;
    position: relative
}

.project__stack .section__head {
    border-bottom: 1px solid rgb(var(--color-grey-200))
}

.project__stack .pb--large {
    padding-bottom: 0
}

.project__stack .section__title {
    padding-bottom: .5rem;
    padding-top: var(--header-height)
}

.project__stack .section__filters {
    display: flex;
    gap: .75rem;
    padding: var(--grid-margin);
    border-top: 1px solid rgb(var(--color-grey-200))
}

.project__stack .stack__container {
    border-bottom: 1px solid rgb(var(--color-grey-200))
}

.project__stack .stack__item {
    display: block;
    border-top: 1px solid rgb(var(--color-grey-200));
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease
}

.project__stack .stack__item:before {
    background: rgb(var(--color-black));
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    transition: opacity .25s ease;
    top: 0;
    width: 100%
}

.project__stack .stack__item .block__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.project__stack .stack__item .grid__column+.grid__column {
    transition: border-color .25s ease
}

.project__stack .stack__item .project__title__content {
    color: rgb(var(--color-black));
    position: relative;
    overflow: hidden
}

.project__stack .stack__item .project__title__content--1,
.project__stack .stack__item .project__title__content--2 {
    transition: transform .6s var(--menu-handle)
}

.project__stack .stack__item .project__title__content--2 {
    left: 0;
    position: absolute;
    top: -100%;
    width: 100%
}

.project__stack .stack__item .project__title__content .project__title {
    padding-bottom: .25rem
}

.project__stack .stack__item>.wrp {
    position: relative;
    z-index: 1
}

.project__stack .stack__item .stack__item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

.project__stack .stack__item .stack__item__header animated-title {
    margin-bottom: .75rem
}

.project__stack .stack__item .stack__item__info animated-title {
    margin-bottom: .75rem
}

.project__stack .stack__item .stack__item__info .project__solutions {
    text-transform: capitalize
}

.project__stack .stack__item .stack__item__image {
    background-color: rgb(var(--color-grey-200));
    aspect-ratio: 1/1;
    position: relative
}

.project__stack .stack__item__header,
.project__stack .stack__item__info,
.project__stack .project__title {
    transition: color .25s ease
}

.project__stack .c__square {
    display: none
}

@media(hover:hover) {
    .project__stack .stack__item:hover {
        color: rgb(var(--color-orange));
        border-color: rgb(var(--color-black));
        cursor: pointer
    }

    .project__stack .stack__item:hover .grid__column+.grid__column {
        border-color: rgba(var(--color-orange), .6)
    }

    .project__stack .stack__item:hover:before {
        opacity: 1
    }

    .project__stack .stack__item:hover .project__title__content {
        color: rgb(var(--color-orange))
    }

    .project__stack .stack__item:hover .project__title__content--1,
    .project__stack .stack__item:hover .project__title__content--2 {
        transform: translate3d(0, calc(100% + .25rem), 0)
    }

    .project__stack .stack__item:hover .stack__item__order>.pretitle {
        color: rgb(var(--color-orange))
    }

    .project__stack .stack__item:hover .stack__item__info .title,
    .project__stack .stack__item:hover .stack__item__info .stack__category {
        color: rgb(var(--color-orange))
    }
}

@media(min-width:981px) {
    .project__stack .stack__column--1 {
        grid-column: span calc(var(--grid-columns) / 2)
    }

    .project__stack .stack__column--2 {
        grid-column: span 4
    }

    .project__stack .stack__column--3 {
        border-left: none !important;
        grid-column: span 2
    }
}

@media(max-width:981px)and (min-width:680px) {
    .project__stack .stack__column--1 {
        grid-column: span calc(var(--grid-columns) / 2 - 1)
    }

    .project__stack .stack__column--2 {
        grid-column: span 3
    }

    .project__stack .stack__column--3 {
        border-left: none !important;
        grid-column: span 2
    }

    .project__stack .stack__item__inner {
        box-sizing: border-box;
        padding-right: var(--grid-margin)
    }
}

@media(max-width:680px) {
    .project__stack .stack__item .stack__item__inner {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .project__stack .stack__item .stack__item__inner>div {
        width: 100%
    }

    .project__stack .stack__item .project__title__content {
        margin-bottom: .5rem
    }

    .project__stack .stack__item .stack__item__order {
        margin-bottom: .75rem
    }

    .project__stack .stack__item__info {
        padding-left: var(--grid-gutter)
    }

    .project__stack .stack__column {
        border-left: none !important
    }

    .project__stack .stack__column--1 {
        grid-column: span var(--grid-columns)
    }

    .project__stack .stack__column--2,
    .project__stack .stack__column--3 {
        border-top: none !important;
        grid-column: 1/-1
    }

    .project__stack .stack__item__image {
        margin-bottom: 2rem
    }
}

.hero__solution__main {
    position: relative;
    z-index: 2
}

.hero__solution__container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100dvh;
    padding: var(--grid-margin)
}

.hero__solutions__header {
    color: rgb(var(--color-white))
}

.hero__solution__box {
    display: flex;
    justify-content: space-between;
    clip-path: inset(0 100% 0 0)
}

.hero__solution__box--left {
    flex: 1;
    padding: var(--grid-margin)
}

.hero__solution__box--right {
    border-left: solid 1px;
    padding: var(--grid-margin)
}

.hero__solution__box.bg--orange .hero__solution__box--right {
    border-color: rgb(var(--color-black))
}

/* owner edit: white attention box, red title, black body, black hairline */
.hero__solution__box.bg--orange {
    background: rgb(var(--color-white)) !important
}
.hero__solution__box.bg--orange .hero__title {
    color: rgb(var(--color-orange)) !important
}
.hero__solution__box.bg--orange .text__description,
.hero__solution__box.bg--orange .text__description p {
    color: rgb(var(--color-black)) !important
}
.hero__solution__box.bg--orange .hero__solution__box--right {
    border-color: rgb(var(--color-black)) !important
}
.hero__solution__box.bg--orange .hero__solution__symbol {
    color: rgb(var(--color-black))
}

.hero__solution__box.bg--black .hero__solution__box--right {
    border-color: rgba(var(--color-orange), .6)
}

.hero__solution__symbol {
    height: 7.5rem;
    width: 7.5rem
}

.page--in .hero__solution__box {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s var(--menu-handle) .6s
}

@media(min-width:981px)and (min-aspect-ratio:16/9) {
    .hero__solution .hero__solutions__header+.pt--small {
        padding-top: var(--grid-margin)
    }
}

@media(min-width:981px)and (min-aspect-ratio:2/1) {
    .hero__solution hero-title .hero__title {
        font-size: clamp(72px, 5rem, 108px);
        line-height: .9
    }
}

@media(min-width:981px) {
    .hero__solution__box--left {
        max-width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 4)
    }

    .post-it__section+.intro--system .section__intro {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 6 - var(--grid-gutter) * 2)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .solution__hero__column {
        grid-column: span calc(var(--grid-columns) / 8 * 6)
    }
}

@media(max-width:980px) {
    .hero__solutions__header {
        max-width: 75%
    }

    .hero__solution__box--left {
        flex: 1;
        padding-right: calc(var(--grid-margin) * 2)
    }
}

@media(max-width:680px) {
    .hero__solution__box--right {
        display: none
    }
}

.legal__section p,
.legal__section li {
    font-size: clamp(10px, .9375rem, 20px);
    line-height: 1.3334
}

.legal__section h2 {
    font-size: clamp(28px, 2rem, 44px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: .875rem
}

.legal__section h2:not(:first-child) {
    margin-top: 3.5rem
}

.legal__section h3 {
    font-size: clamp(21px, 1.5rem, 32px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .875rem
}

.legal__section h3:not(:first-child) {
    margin-top: 2.5rem
}

.legal__section h4 {
    font-weight: 600;
    font-size: clamp(16px, 1.125rem, 24px);
    line-height: 1;
    letter-spacing: .01em;
    margin-bottom: .875rem;
    text-transform: uppercase
}

.legal__section h4:not(:first-child) {
    margin-top: 2rem
}

@media(min-width:981px) {
    .legal__section .text__description {
        width: calc((100% + var(--grid-gutter)) / (var(--grid-columns) / 2) * 5)
    }
}

@media(max-width:980px) {
    .legal__section .text__description {
        padding-right: var(--grid-margin)
    }
}

@media(max-width:980px)and (min-width:681px) {
    .legal__section h2 {
        font-size: clamp(24px, 1.75rem, 36px);
        line-height: 1.2
    }

    .legal__section h2:not(:first-child) {
        margin-top: 3rem
    }

    .legal__section h3 {
        font-size: clamp(17px, 1.25rem, 26px);
        line-height: 1.2
    }

    .legal__section h3:not(:first-child) {
        margin-top: 2.25rem
    }
}

@media(min-width:681px) {
    .legal__section {
        border-top: 1px solid rgb(var(--color-grey-200))
    }
}

@media(max-width:680px) {
    .legal__section h2 {
        font-size: 1.5rem;
        line-height: 1.2
    }

    .legal__section h2:not(:first-child) {
        margin-top: 2.5rem
    }

    .legal__section h3:not(:first-child) {
        margin-top: 1.75rem
    }

    .legal__section h4:not(:first-child) {
        margin-top: 1.5rem
    }
}

.page404__container {
    height: 100svh;
    width: 100%;
    position: relative
}

.page404__container .wrp {
    width: 100%;
    height: 100%
}

.page404__container .grid__layout {
    width: 100%;
    height: 50%
}

.page404__container .grid__layout .grid__column {
    height: 50svh;
    box-sizing: border-box
}

.page404__container .grid__layout+.grid__layout .grid__column {
    border-top: 1px solid rgb(var(--color-black))
}

@media(min-width:981px)and (min-aspect-ratio:2/1) {
    .page404__container .grid__layout:first-child {
        display: none
    }

    .page404__container .grid__layout .grid__column {
        border-top: none !important;
        height: 100svh
    }

    .page404__container .grid__layout .page404__text {
        padding-top: var(--header-height)
    }
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%
}

html.lenis {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto
}

.lenis.lenis-stopped {
    overflow: hidden
}

body:not(.preload--out) {
    background: #0E0E10;
    opacity: 0
}

.preload {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100vw;
    height: 100vh;
    pointer-events: none
}

.preload__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 1;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 1
}

.preload--out .preload__back {
    opacity: 0
}

.preload__top,
.preload__bottom {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.preload__top .clap__triangle--bottom {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 0;
    height: 0;
    border-top: calc(50vh + 1px) solid #E2231A;
    border-right: calc(50vh + 1px) solid transparent;
    pointer-events: none;
    z-index: 2
}

.preload__top .clap__triangle--top {
    position: absolute;
    top: 0;
    left: calc(100vw - 50vh);
    width: 0;
    height: 0;
    border-top: calc(50vh + 1px) solid #E2231A;
    border-right: calc(50vh + 1px) solid transparent;
    pointer-events: none;
    z-index: 2
}

.preload__top .clap__rect {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw - 50vh);
    height: calc(50vh + 1px);
    background: #E2231A;
    z-index: 2
}

.preload__top,
.preload__bottom {
    transition: transform 1s cubic-bezier(.53, 0, 0, 1), visibility 0s 1s
}

.preload--out .preload__top {
    visibility: hidden;
    transform: translateY(-100vh)
}

.preload--out .preload__bottom {
    visibility: hidden;
    transform: translateY(100vh)
}

.preload__bottom .clap__triangle--bottom {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 50vh solid #E2231A;
    border-left: 50vh solid transparent;
    pointer-events: none;
    z-index: 2
}

.preload__bottom .clap__triangle--top {
    position: absolute;
    top: 0;
    left: calc(100vw - 50vh);
    width: 0;
    height: 0;
    border-bottom: 50vh solid #E2231A;
    border-left: 50vh solid transparent;
    pointer-events: none;
    z-index: 2
}

.preload__bottom .clap__rect {
    position: absolute;
    top: calc(50vh - 1px);
    left: calc(50vh - 1px);
    width: calc(100vw - 50vh + 1px);
    height: calc(50vh + 3px);
    background: #E2231A;
    z-index: 2
}

@media(orientation:portrait) {
    .preload__top .clap__triangle--bottom {
        top: calc(50vh - 1px);
        border-top: calc(25vw + 1px) solid #E2231A;
        border-right: calc(25vw + 1px) solid transparent
    }

    .preload__top .clap__triangle--top {
        left: 75vw;
        border-top: calc(25vw + 1px) solid #E2231A;
        border-right: calc(25vw + 1px) solid transparent;
        top: calc(50vh - 25vw)
    }

    .preload__top .clap__rect {
        left: 0;
        width: calc(75vw + 1px);
        height: 50vh;
        top: 0
    }

    .preload__top .clap__rect:before {
        background: #E2231A;
        content: "";
        position: absolute;
        left: 75vw;
        top: 0;
        height: calc(50vh + 1px - 25vw);
        width: 25vw
    }

    .preload__bottom .clap__triangle--bottom {
        top: 50vh;
        border-bottom: 25vw solid #E2231A;
        border-left: 25vw solid transparent
    }

    .preload__bottom .clap__triangle--top {
        top: calc(50vh - 25vw + 1px);
        left: 75vw;
        border-bottom: 25vw solid #E2231A;
        border-left: 25vw solid transparent
    }

    .preload__bottom .clap__rect {
        top: 50vh;
        left: calc(25vw - 1px);
        width: calc(75vw + 1px);
        height: 50vh
    }

    .preload__bottom .clap__rect:before {
        background: #E2231A;
        content: "";
        position: absolute;
        left: -25vw;
        top: calc(25vw - 1px);
        height: calc(50vh + 1px - 25vw);
        width: calc(25vw + 1px)
    }
}
/* ===== rebuild compatibility ===== */
hero-title,line-text,animated-title,animated-herotitle{display:block}
scroll-frames{display:block}
.home-morph__inner canvas{display:block;max-width:100%;height:auto}

/* ===== rebuild compatibility — menu submenu + toggle base ===== */
.has__submenu > ul{overflow:hidden;height:0;transition:height .6s var(--link-handle)}
.has__submenu.submenu--open .submenu__icon{transform:rotate(90deg)}
.has__submenu.submenu--open .submenu__icon:after{transform:scaleX(0)}
.toggle__content{overflow:hidden;transition:height .6s var(--menu-handle)}

/* ===== fix: team section layout =====
   The build renamed CSS `a-link {display:inline-flex}` -> `a {display:inline-flex}`,
   which wrongly made EVERY <a> a flex row. .team__card is a plain <a> wrapping
   image/name/position that must stack — restore block. Also make the card image size
   deterministically (lazy/inline <picture> in a 1fr grid column otherwise collapses). */
.team__card{display:block}
.team__card__image{position:relative;width:100%;overflow:hidden}
.team__card__image .image__picture{display:block;width:100%}
.team__card__image .image__picture img,
.team__card__image img.fit--cover{display:block;width:100%;height:auto;aspect-ratio:1/1.25;object-fit:cover}

/* ====================== NGPL PRELOADER VARIANTS ====================== */
.preload__cover{position:absolute;inset:0;background:#E2231A;z-index:2;display:none}

/* variant 1 — chevron shutter: three full-bleed bars at the logo's ~32.5° angle */
.preload__shutter{position:absolute;top:50%;left:50%;width:260vw;height:280vh;transform:translate(-50%,-50%) rotate(-32.5deg);transform-origin:center;z-index:2;display:none}
.preload__slat{position:absolute;left:-6%;width:112%;height:16%;background:#E2231A;will-change:transform}
.preload__slat:nth-child(1){top:11%}
.preload__slat:nth-child(2){top:42%}
.preload__slat:nth-child(3){top:73%}
.preload[data-loader="1"] .preload__shutter{display:block}
.preload[data-loader="1"] .clap{display:none}
.preload__logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none;will-change:transform,opacity}
.preload__logo svg{width:clamp(120px,17vw,230px);height:auto;display:block;overflow:visible}
.pl-bar{fill:#FDFDFD;transform-box:fill-box;transform-origin:center}
.preload__bar{position:absolute;left:50%;top:calc(50% + 92px);transform:translateX(-50%);width:min(220px,42vw);height:2px;background:rgba(253,253,253,.22);z-index:3;display:none;overflow:hidden}
.preload__bar__fill{position:absolute;left:0;top:0;height:100%;width:0;background:#FDFDFD}

/* variant 3/4/5 use the solid red cover; hide the black back + diagonal clap */
.preload[data-loader="3"] .preload__back,
.preload[data-loader="4"] .preload__back,
.preload[data-loader="5"] .preload__back{display:none}
.preload[data-loader="3"] .preload__cover,
.preload[data-loader="4"] .preload__cover,
.preload[data-loader="5"] .preload__cover{display:block}
.preload[data-loader="3"] .clap,
.preload[data-loader="4"] .clap,
.preload[data-loader="5"] .clap{display:none}
.preload[data-loader="4"] .preload__bar{display:block}
.preload[data-loader="4"] .pl-bar{fill:rgba(253,253,253,.26)}

/* variants 6–10 — paper ground, red ink bars */
.preload[data-loader="6"] .preload__cover,
.preload[data-loader="7"] .preload__cover,
.preload[data-loader="8"] .preload__cover,
.preload[data-loader="9"] .preload__cover,
.preload[data-loader="10"] .preload__cover{display:block;background:#FDFDFD}
.preload[data-loader="6"] .preload__back,.preload[data-loader="6"] .clap,.preload[data-loader="6"] .preload__shutter,
.preload[data-loader="7"] .preload__back,.preload[data-loader="7"] .clap,.preload[data-loader="7"] .preload__shutter,
.preload[data-loader="8"] .preload__back,.preload[data-loader="8"] .clap,.preload[data-loader="8"] .preload__shutter,
.preload[data-loader="9"] .preload__back,.preload[data-loader="9"] .clap,.preload[data-loader="9"] .preload__shutter,
.preload[data-loader="10"] .preload__back,.preload[data-loader="10"] .clap,.preload[data-loader="10"] .preload__shutter{display:none}
.preload[data-loader="6"] .pl-bar,
.preload[data-loader="7"] .pl-bar,
.preload[data-loader="8"] .pl-bar,
.preload[data-loader="9"] .pl-bar,
.preload[data-loader="10"] .pl-bar{fill:#E2231A}

/* variant 11 — column wipe: bands painted as the preload's own first frame (no body-bg dependency, no JS wait) */
.preload[data-loader="11"]{background:linear-gradient(to bottom,#0E0E10 0 33.333%,#E2231A 33.333% 66.667%,#0E0E10 66.667% 100%)}
.preload[data-loader="11"] .preload__back,
.preload[data-loader="11"] .clap,
.preload[data-loader="11"] .preload__shutter,
.preload[data-loader="11"] .preload__cover{display:none}
.preload[data-loader="11"] .pl-bar{fill:#FDFDFD}

/* ----- pre-loader picker panel ----- */
.loader-tweak{position:fixed;right:18px;bottom:18px;z-index:100001;width:236px;max-height:84vh;display:flex;flex-direction:column;padding:15px 15px 12px;background:#FDFDFD;border:1px solid rgba(10,10,15,.12);box-shadow:0 8px 30px rgba(0,0,0,.14);font-family:ui-monospace,Menlo,Consolas,monospace;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.loader-tweak.is-shown{opacity:1;transform:none;pointer-events:auto}
.loader-tweak__title{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.14em;color:#9a9893;margin-bottom:11px}
.loader-tweak__title button{border:0;background:none;color:#c4c2bd;font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0}
.loader-tweak__title button:hover{color:#0a0a0f}
.loader-tweak__scroll{overflow-y:auto;margin:-2px -3px 8px;padding:2px 3px}
.loader-tweak__group{font-size:9px;letter-spacing:.16em;color:#bdbbb6;margin:8px 0 6px}
.loader-tweak__group:first-child{margin-top:0}
.loader-tweak__opt{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid rgba(10,10,15,.13);background:#FDFDFD;color:#0a0a0f;font:inherit;font-size:11.5px;letter-spacing:.01em;padding:8px 10px;margin-bottom:6px;cursor:pointer;border-radius:2px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.loader-tweak__opt:hover{border-color:#0a0a0f}
.loader-tweak__opt.is-active{background:#E2231A;border-color:#E2231A;color:#FDFDFD}
.loader-tweak__opt.is-active .loader-tweak__tag{color:rgba(253,253,253,.72)}
.loader-tweak__tag{color:#b9b7b2;flex-shrink:0}
.loader-tweak__replay{width:100%;border:1px solid #0a0a0f;background:#0a0a0f;color:#FDFDFD;font:inherit;font-size:11.5px;letter-spacing:.04em;padding:9px 10px;cursor:pointer;border-radius:2px;transition:opacity .15s ease}
.loader-tweak__replay:hover{opacity:.82}

/* ====================== NGPL: brochure download button on the red block ====================== */
.chart__container .button.download--modal,
.chart__container .button.download--modal.bg--orange {
    background: rgb(var(--color-black));
    border-color: rgb(var(--color-black));
    color: rgb(var(--color-white))
}
.chart__container .button.download--modal .button__text,
.chart__container .button.download--modal .button__text--sp {
    color: rgb(var(--color-white))
}
.chart__container .button.download--modal .button__icon__inner--1 .button__arrow,
.chart__container .button.download--modal .button__icon__inner--1 svg {
    fill: rgb(var(--color-white))
}
.chart__container .button.download--modal .button__icon__inner--2 {
    background: rgb(var(--color-orange)) !important
}
.chart__container .button.download--modal .button__icon__inner--2 .button__arrow,
.chart__container .button.download--modal .button__icon__inner--2 svg {
    fill: rgb(var(--color-white))
}
@media(hover:hover) {
    .chart__container .button.download--modal:hover,
    .chart__container .button.download--modal.bg--orange:hover {
        background: rgb(var(--color-white));
        border-color: rgb(var(--color-white));
        color: rgb(var(--color-black))
    }
    .chart__container .button.download--modal:hover .button__text,
    .chart__container .button.download--modal:hover .button__text--sp {
        color: rgb(var(--color-black))
    }
    .chart__container .button.download--modal:hover .button__icon__inner--2 {
        background: rgb(var(--color-orange)) !important
    }
    .chart__container .button.download--modal:hover .button__icon__inner--2 .button__arrow,
    .chart__container .button.download--modal:hover .button__icon__inner--2 svg {
        fill: rgb(var(--color-white))
    }
}

/* ====================== NGPL: footer is a white surface with black type + lines ====================== */
.page__footer,
.page__footer.bg--orange{background-color:rgb(var(--color-white))}
.page__footer.bg--orange,
.page__footer .menu__item__link,
.page__footer .text--l,
.page__footer .text--s,
.page__footer .pretitle,
.page__footer .copyright,
.page__footer .legal__link,
.page__footer .lang--active,
.page__footer .subfooter__author{color:rgb(var(--color-black))}
.page__footer .footer__logo svg{fill:rgb(var(--color-orange));color:rgb(var(--color-orange))}
.page__footer .c__header .c__square{background:rgb(var(--color-black))}
/* wordmark band shares the white surface */
.page__footer .footer__window{background:rgb(var(--color-white))}
/* divider + border lines */
.page__footer .footer__container{border-top-color:rgb(var(--color-black))}
.page__footer.bg--orange .grid__column+.grid__column{border-left-color:rgb(var(--color-black));border-top-color:rgb(var(--color-black))}
.page__footer .separator.bg--orange{border-top-color:rgb(var(--color-black))}
.page__footer .subfooter{border-top-color:rgb(var(--color-black))}
.page__footer .footer__window{border-top-color:rgb(var(--color-black))}
/* outrank the generic .bg--orange:not(.home__hero) white-type rules below */
.page__footer.bg--orange:not(.home__hero),
.page__footer.bg--orange:not(.home__hero) .pretitle,
.page__footer.bg--orange:not(.home__hero) .title,
.page__footer.bg--orange:not(.home__hero) .char,
.page__footer.bg--orange:not(.home__hero) .text__description,
.page__footer.bg--orange:not(.home__hero) p,
.page__footer.bg--orange:not(.home__hero) .menu__item__link,
.page__footer.bg--orange:not(.home__hero) .text--l,
.page__footer.bg--orange:not(.home__hero) .text--s{color:rgb(var(--color-black))}
.page__footer.bg--orange:not(.home__hero) .line--mask{background:rgb(var(--color-white))}

/* ====================== NGPL: video legibility overlay ====================== */
.video__overlay{position:absolute;inset:0;pointer-events:none}
.video__overlay[data-video-overlay="none"]{background:none}
/* directional scrim — darkens the bottom where the white text sits */
.video__overlay[data-video-overlay="scrim"]{background:linear-gradient(to top,rgba(10,9,8,.72) 0%,rgba(10,9,8,.46) 22%,rgba(10,9,8,.12) 46%,rgba(10,9,8,0) 64%)}
/* vignette — dark corners/edges */
.video__overlay[data-video-overlay="vignette"]{background:radial-gradient(120% 95% at 50% 42%,rgba(10,9,8,0) 42%,rgba(10,9,8,.34) 78%,rgba(10,9,8,.6) 100%)}
/* flat tint — even wash */
.video__overlay[data-video-overlay="tint"]{background:rgba(10,9,8,.34)}
/* scrim + vignette combined */
.video__overlay[data-video-overlay="both"]{background:radial-gradient(120% 95% at 50% 42%,rgba(10,9,8,0) 42%,rgba(10,9,8,.3) 80%,rgba(10,9,8,.5) 100%),linear-gradient(to top,rgba(10,9,8,.66) 0%,rgba(10,9,8,.34) 26%,rgba(10,9,8,0) 58%)}
/* white text always gets a soft shadow for legibility */
.home__video float-subtitle .pretitle{text-shadow:0 1px 22px rgba(8,7,6,.5),0 1px 3px rgba(8,7,6,.45)}

/* ----- schema background picker (bottom-left) ----- */
.schemabg-tweak{right:auto;left:18px;width:212px}
.schemabg-wheel{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.schemabg-input{width:42px;height:42px;padding:0;border:1px solid rgba(10,10,15,.2);border-radius:4px;background:#FDFDFD;cursor:pointer}
.schemabg-input::-webkit-color-swatch-wrapper{padding:2px}
.schemabg-input::-webkit-color-swatch{border:none;border-radius:2px}
.schemabg-val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:#0a0a0f}
.schemabg-swatches{display:flex;gap:6px;margin-bottom:11px}
.schemabg-sw{flex:1;height:24px;border:1px solid rgba(10,10,15,.16);border-radius:2px;cursor:pointer;padding:0;transition:transform .12s ease}
.schemabg-sw:hover{transform:translateY(-1px)}
.schemabg-sw.is-active{box-shadow:0 0 0 2px #FDFDFD,0 0 0 3.5px #0a0a0f}
.schemabg-reset{width:100%;border:1px solid rgba(10,10,15,.2);background:#FDFDFD;color:#0a0a0f;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.04em;padding:8px;cursor:pointer;border-radius:2px;transition:background .15s ease,color .15s ease}
.schemabg-reset:hover{background:#0a0a0f;color:#FDFDFD}

/* particle-mode sub-picker — sits left of the hero-style picker, only while Particle logo is active */
.hero-ptweak{right:262px;bottom:18px;width:184px}
@media(max-width:1100px){.hero-ptweak{right:18px;bottom:auto;top:18px}}
.hero-pcolor{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid rgba(10,10,15,.1);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;color:#9a9893}
.hero-pcolor__btns{display:flex;gap:6px}
.hero-pcolor__btn{width:22px;height:22px;border:1px solid rgba(10,10,15,.18);border-radius:2px;cursor:pointer;padding:0}
.hero-pcolor__btn.is-active{box-shadow:0 0 0 2px #FDFDFD,0 0 0 3.5px #0a0a0f}
.hero-pcolor__wheel{position:relative;width:22px;height:22px;border:1px solid rgba(10,10,15,.18);border-radius:2px;cursor:pointer;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.hero-pcolor__wheel.is-active{box-shadow:0 0 0 2px #FDFDFD,0 0 0 3.5px #0a0a0f}
.hero-pcolor__input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;border:0;background:none;cursor:pointer;opacity:0}

/* ====================== GravoLam variant chips + secondary machine list ====================== */
.lam-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.lam-tab{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:rgb(var(--color-black));background:transparent;border:1px solid rgba(var(--color-black),.28);border-radius:2px;padding:.5rem .85rem;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.lam-tab:hover{border-color:rgb(var(--color-black))}
.lam-tab.is-active{background:rgb(var(--color-black));border-color:rgb(var(--color-black));color:rgb(var(--color-grey-50))}
.sec-list{list-style:none;padding:0;margin:1.25rem 0 0;border-top:1px solid rgba(var(--color-black),.16)}
.sec-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding:.7rem 0;border-bottom:1px solid rgba(var(--color-black),.16)}
.sec-list__name{font-weight:600;min-width:9.5rem}
.sec-list__role{font-size:.9375rem;opacity:.72}

/* ====================== NGPL: black-on-red hover → paper (#FDFDFD) ====================== */
/* Menu trigger: red overlay on hover — make label + hamburger lines paper */
.menu__trigger:hover{color:#FDFDFD !important}
.menu__trigger:hover .menu__icon--line:before,
.menu__trigger:hover .menu__icon--line:after{background-color:#FDFDFD !important}
/* Button arrow cell that slides over the red (orange) fill */
.button .button__icon__inner--2 .button__arrow{fill:#FDFDFD !important}

/* ----- section-background (paper) picker ----- */
.paper-tweak{right:auto;left:18px;bottom:18px;width:212px}
.paper-wheel{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.paper-input{width:42px;height:42px;padding:0;border:1px solid rgba(10,10,15,.2);border-radius:4px;background:#FDFDFD;cursor:pointer}
.paper-input::-webkit-color-swatch-wrapper{padding:2px}
.paper-input::-webkit-color-swatch{border:none;border-radius:2px}
.paper-val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:#0a0a0f}
.paper-swatches{display:flex;gap:6px;margin-bottom:11px}
.paper-sw{flex:1;height:24px;border:1px solid rgba(10,10,15,.16);border-radius:2px;cursor:pointer;padding:0;transition:transform .12s ease}
.paper-sw:hover{transform:translateY(-1px)}
.paper-sw.is-active{box-shadow:0 0 0 2px #FDFDFD,0 0 0 3.5px #0a0a0f}
.paper-reset{width:100%;border:1px solid rgba(10,10,15,.2);background:#FDFDFD;color:#0a0a0f;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.04em;padding:8px;cursor:pointer;border-radius:2px;transition:background .15s ease,color .15s ease}
.paper-reset:hover{background:#0a0a0f;color:#FDFDFD}

/* ====================== HERO FX VARIANTS (tweakable) ====================== */
.home__hero__column--right{position:relative}
.hero__fx{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}
.home__hero--fx .hero__fx{display:block}
.home__hero--fx .hero__logo__container{opacity:0;visibility:hidden}
.hero__fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__tags{position:relative;z-index:6}
/* split-flap board (variant 5) */
.hero__flaps{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.6vw;align-items:flex-start;padding:0 var(--grid-margin);box-sizing:border-box}
.hero__flap-row{display:flex;gap:.32vw}
.hero__flap{position:relative;width:2.6vw;height:3.7vw;min-width:22px;min-height:32px;background:#16130f;border-radius:2px;font-family:'Neue Corp',ui-monospace,monospace;font-weight:600;color:#efece4;font-size:2.3vw;line-height:3.7vw;text-align:center;overflow:hidden;box-shadow:inset 0 -1px 0 rgba(0,0,0,.6)}
.hero__flap:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);z-index:3}
.hero__flap span{position:absolute;left:0;right:0;text-align:center;backface-visibility:hidden}
.hero__flap--led{background:#1a0202;color:rgb(var(--color-orange));text-shadow:0 0 6px rgba(var(--color-orange),.7);font-family:ui-monospace,Menlo,monospace}
.hero__flap-cap{margin-top:.8vw;font-family:ui-monospace,Menlo,monospace;font-size:.78vw;letter-spacing:.22em;color:#15120e;opacity:.62}

/* __ngpl_darkfix__ */
.bg--black{color:rgb(var(--color-white))}
.bg--black .title,.bg--black .pretitle,.bg--black .text__description,.bg--black p,.bg--black h1,.bg--black h2,.bg--black h3,.bg--black h4{color:rgb(var(--color-white))}
.bg--orange:not(.home__hero){color:rgb(var(--color-white))}
.bg--orange:not(.home__hero) .title,.bg--orange:not(.home__hero) .pretitle,.bg--orange:not(.home__hero) .text__description,.bg--orange:not(.home__hero) p,.bg--orange:not(.home__hero) h1,.bg--orange:not(.home__hero) h2,.bg--orange:not(.home__hero) h3,.bg--orange:not(.home__hero) h4{color:rgb(var(--color-white))}

/* __ngpl_headerwhite__ */
.page__header.header--white .header__logo__link svg,.page__header.header--white .header__logo__link span svg{fill:rgb(var(--color-white))!important}
.page__header.header--white .menu__trigger{color:rgb(var(--color-white))!important;border-color:rgba(var(--color-white),.45)!important}
.page__header.header--white .menu__icon{border-color:rgba(var(--color-white),.45)!important}
.page__header.header--white .menu__icon--line:before,.page__header.header--white .menu__icon--line:after{background:rgb(var(--color-white))!important}
.page__header.header--white .contact__trigger{background:rgb(var(--color-white))!important;border-color:rgb(var(--color-white))!important;color:rgb(var(--color-black))!important}
.page__header.header--white .contact__trigger .button__text{color:rgb(var(--color-black))!important}
.page__header.header--white .contact__trigger .button__arrow svg,.page__header.header--white .contact__trigger .button-arrow{fill:rgb(var(--color-black))!important}

/* __ngpl_darkpage_header__ */
.body--black .header__logo__link svg,.body--black .header__logo__link span svg{fill:rgb(var(--color-white))!important}
.body--black .menu__trigger{color:rgb(var(--color-white))!important;border-color:rgba(var(--color-white),.45)!important}
.body--black .menu__icon{border-color:rgba(var(--color-white),.45)!important}
.body--black .menu__icon--line:before,.body--black .menu__icon--line:after{background:rgb(var(--color-white))!important}
.body--black .contact__trigger{background:rgb(var(--color-white))!important;border-color:rgb(var(--color-white))!important;color:rgb(var(--color-black))!important}
.body--black .contact__trigger .button__text{color:rgb(var(--color-black))!important}
.body--black .contact__trigger .button-arrow{fill:rgb(var(--color-black))!important}

/* __ngpl_heroscrim__ */
.body--black .hero__back__image img,.body--black .background__video img{opacity:.7}

/* __ngpl_schema_toggles__ — parent-page controls for the animated-schematic embed */
.schema__toggles{display:flex;flex-wrap:wrap;gap:.5rem;padding:2.5rem 0 1.5rem}
/* standardised vertical rhythm below every schematic embed */
.schema__embed{padding-bottom:2.5rem}
.schema__caption{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,235,230,.45);padding:1rem 0 0}
.schema__toggles--light~.schema__caption,.schema__section--light .schema__caption{color:rgba(22,24,27,.45)}
.schema__toggles button{white-space:nowrap;line-height:1.1}
.schema__toggles button{display:inline-flex;align-items:center;gap:.5rem;font-family:'Neue Corp',sans-serif;background:transparent;border:1px solid rgb(237,235,230);color:rgb(237,235,230);border-radius:0;padding:.71875rem 1.125rem;font-size:.9375rem;font-weight:500;letter-spacing:-.015em;cursor:pointer;transition:background .25s ease,color .25s ease,opacity .25s ease}
.schema__toggles button:hover{background:rgb(237,235,230);color:rgb(22,24,27)}
/* light-schematic ground: ink buttons, inverted hover — beats the theme auto-contrast rules */
.schema__section .schema__toggles--light button,
html[data-theme] .schema__section .schema__toggles--light button{color:rgb(22,24,27);border-color:rgb(22,24,27);background:transparent}
.schema__section .schema__toggles--light button:hover,
html[data-theme] .schema__section .schema__toggles--light button:hover{background:rgb(22,24,27);color:rgb(253,253,253);border-color:rgb(22,24,27)}
/* dark ground: off-white buttons regardless of theme */
.schema__section .schema__toggles:not(.schema__toggles--light) button,
html[data-theme] .schema__section .schema__toggles:not(.schema__toggles--light) button{color:rgb(237,235,230);border-color:rgb(237,235,230);background:transparent}
.schema__section .schema__toggles:not(.schema__toggles--light) button:hover,
html[data-theme] .schema__section .schema__toggles:not(.schema__toggles--light) button:hover{background:rgb(237,235,230);color:rgb(22,24,27)}
.schema__toggles .chan i{width:.7rem;height:.7rem;border-radius:50%;background:var(--c);display:inline-block;flex:0 0 auto}
.schema__toggles .chan.off{opacity:.45}
.schema__toggles .chan.off i{background:transparent;border:1px solid currentColor}

/* ====================== NGPL: dot register point on image/crosshair reveals ======================
   Plain solid circle; every theme/section colour rule for .cross-point keeps working. */
cross-image .cross-point,
cross-hair .cross-point {
    width: .5rem;
    height: .5rem;
    top: -.25rem;
    left: -.25rem;
    border-radius: 50%
}

/* NGPL: config cards always show their photo slot — the template's .hide
   waited on a hover/trail effect that isn't wired on these pages */
.section__stack .stack__item.hide .image__picture {
    opacity: 1
}

/* NGPL: process list — white surface, black text, red numbers + titles (all themes) */
.list__block.list--panel,
.body--black .list__block.list--panel {
    background: rgb(var(--color-white));
    color: rgb(var(--color-black))
}
.list__block.list--panel .section__header,
.list__block.list--panel .list__item__number,
.list__block.list--panel .list__item__number .number {
    color: rgb(var(--color-orange))
}

.list__block.list--panel .list__item .list__item__title {
    color: rgb(var(--color-black))
}
.list__block.list--panel .list__item {
    background: rgb(var(--color-white));
    border-color: rgb(var(--color-black))
}
.list__block.list--panel .list__item .list__item__text,
.list__block.list--panel .section__text,
.list__block.list--panel .text__description,
.list__block.list--panel .title:not(.list__item__title),
.list__block.list--panel p {
    color: rgb(var(--color-black))
}

/* NGPL: accent headline utility */
.title--accent,
.title--accent .line--inner,
html[data-theme] .title--accent,
html[data-theme] .title--accent .line--inner {
    color: rgb(var(--color-orange))
}

/* NGPL: approach hero — white surface, black text, red headline */
.hero--method-red {
    background-color: rgb(var(--color-white))
}
.hero--method-red,
.hero--method-red .pretitle,
.hero--method-red .text__description,
.hero--method-red p {
    color: rgb(var(--color-black))
}
.hero--method-red .hero__title {
    color: rgb(var(--color-orange))
}
/* subtitle floating over the hero image stays white */
.hero--method-red float-subtitle .pretitle {
    color: rgb(var(--color-white))
}
.hero--method-red .line--mask {
    background: rgb(var(--color-white))
}
.hero--method-red cross-hair .cross-point {
    background: rgb(var(--color-black))
}
.hero--method-red cross-hair .line {
    background-color: rgb(var(--color-grey-200))
}
.hero--method-red cross-hair .number-right,
.hero--method-red cross-hair .number-bottom {
    color: rgb(var(--color-grey-500))
}

/* NGPL: title block on the homepage drawing closes with a full-width bottom rule.
   Inset 1px so the rule isn't lost on the 540px overflow:hidden clip edge. */
.schema--home .graph__data {
    border-bottom: solid 1px rgba(var(--color-orange), .6);
    margin-bottom: 1px
}

/* ====================== NGPL: "The Reveal" hero ====================== */
.home__reveal{position:relative;height:260vh;background:rgb(var(--color-white))}
.reveal__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.reveal__media,.reveal__media video{position:absolute;inset:0;width:100%;height:100%}
.reveal__media video{object-fit:cover}
.reveal__scrim{position:absolute;inset:0;background:rgb(22,24,27);opacity:0;pointer-events:none}
.reveal__maskwrap{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform,opacity}
.reveal__mask{position:absolute;inset:0;width:100%;height:100%;display:block}
.reveal__whiterect{fill:rgb(var(--color-white))}
.reveal__mask__text{font-family:'Neue Corp',sans-serif;font-weight:600;font-size:215px;letter-spacing:-.02em}
.reveal__cue{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgb(var(--color-black));font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.reveal__cue i{display:block;width:1px;height:2.6rem;background:currentColor;transform-origin:top;animation:reveal-cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes reveal-cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform-origin:bottom;transform:scaleY(1)}100%{transform-origin:bottom;transform:scaleY(0)}}
.reveal__content{position:absolute;left:0;right:0;bottom:0;padding-bottom:8vh;color:rgb(var(--color-white));opacity:0;transform:translateY(40px);pointer-events:none}
.home__reveal.is-open .reveal__content{pointer-events:auto}
.reveal__tags{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;padding-bottom:1.25rem}
.reveal__title{color:rgb(var(--color-white))}
.reveal__claim{max-width:38ch;padding-top:1rem;font-size:1.125rem;line-height:1.4}
.reveal__ctas{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:2rem}
/* site-standard buttons; primary carries the hero's one red moment */
.button--reveal-primary{background:transparent;border-color:rgb(253,253,253);color:rgb(253,253,253)}
.button--reveal-primary .button__icon__inner--2{background:rgb(var(--color-orange))}
.button--reveal-primary .button__icon__inner--2 .button__arrow svg{fill:rgb(253,253,253)}
@media(hover:hover){
.button--reveal-primary:hover{background:rgb(var(--color-white));border-color:rgb(var(--color-white));color:rgb(var(--color-orange))}
}
@media(max-width:680px),(prefers-reduced-motion:reduce){
    .home__reveal{height:100vh}
    .reveal__maskwrap{display:none}
    .reveal__scrim{opacity:.45}
    .reveal__content{opacity:1;transform:none;pointer-events:auto}
    .reveal__title{font-size:2.25rem}
}

/* ====================== NGPL: reveal hairlines — one solid ink line, never doubled ====================== */
cross-image .line.horizontal,
cross-image .line.vertical,
cross-hair .line.horizontal,
cross-hair .line.vertical,
.bg--grey-50 cross-image .line.horizontal,
.bg--grey-50 cross-image .line.vertical,
.bg--black cross-image .line.horizontal,
.bg--black cross-image .line.vertical {
    background: rgb(var(--color-black))
}
/* the 24px gutter bars also carry .line — keep their surface fill */
.bg--grey-50 cross-image .line.vertical-fixed,
.bg--grey-50 cross-image .line.horizontal-fixed {
    background: rgb(var(--color-grey-50))
}
cross-image .line.vertical-fixed,
cross-image .line.horizontal-fixed {
    background: rgb(var(--color-white))
}
.bg--black cross-image .line.vertical-fixed,
.bg--black cross-image .line.horizontal-fixed {
    background: rgb(var(--color-black))
}
cross-image .vertical-fixed,
.bg--grey-50 cross-image .vertical-fixed,
.bg--black cross-image .vertical-fixed {
    border-right: none
}
cross-image .horizontal-fixed,
.bg--grey-50 cross-image .horizontal-fixed,
.bg--black cross-image .horizontal-fixed {
    border-bottom: none
}
cross-image .horizontal-fixed:after,
.bg--grey-50 cross-image .horizontal-fixed:after,
.bg--black cross-image .horizontal-fixed:after {
    background: rgb(var(--color-black))
}

/* ====================== NGPL: hairline weight parity ======================
   1px borders snap to 1 device pixel while 1px divs snap to whole CSS pixels,
   so the reveal lines painted as divs looked heavier than the grid borders
   (visible at 125%/175% display scaling). Draw them as borders instead. */
cross-image .line.horizontal,
cross-hair .line.horizontal {
    height: 0 !important;
    border-top: solid 1px rgb(var(--color-black));
    background: none !important
}
cross-image .line.vertical,
cross-hair .line.vertical {
    width: 0 !important;
    border-left: solid 1px rgb(var(--color-black));
    background: none !important
}
cross-image .horizontal-fixed:after,
.bg--grey-50 cross-image .horizontal-fixed:after,
.bg--black cross-image .horizontal-fixed:after {
    width: 0;
    border-left: solid 1px rgb(var(--color-black));
    background: none
}

/* ====================== NGPL: Advantages (stack) section — grey background options ======================
   html[data-adv="dark"] → #717074 with white type; html[data-adv="light"] → #C9CBCC with ink type. */
html[data-adv] .section__stack--panel.bg--orange {
    background-color: #717074
}
html[data-adv] .section__stack--panel.bg--orange,
html[data-adv] .section__stack--panel.bg--orange .pretitle,
html[data-adv] .section__stack--panel.bg--orange .title,
html[data-adv] .section__stack--panel.bg--orange .stack__category,
html[data-adv] .section__stack--panel.bg--orange .text__description,
html[data-adv] .section__stack--panel.bg--orange .text__description p,
html[data-adv] .section__stack--panel.bg--orange p {
    color: rgb(253,253,253)
}
html[data-adv] .section__stack--panel.bg--orange .stack__item {
    background: #717074;
    border-top-color: rgba(253,253,253,.35)
}
html[data-adv] .section__stack--panel.bg--orange .stack__item__image {
    background: #717074
}
html[data-adv] .section__stack--panel.bg--orange .line--mask,
html[data-adv] .section__stack--panel.bg--orange cross-image .line.vertical-fixed,
html[data-adv] .section__stack--panel.bg--orange cross-image .line.horizontal-fixed {
    background: #717074
}
html[data-adv] .section__stack--panel.bg--orange .grid__column+.grid__column,
html[data-adv] .section__stack--panel.bg--orange .separator {
    border-color: rgba(253,253,253,.35)
}
html[data-adv="light"] .section__stack--panel.bg--orange {
    background-color: #C9CBCC
}
html[data-adv="light"] .section__stack--panel.bg--orange,
html[data-adv="light"] .section__stack--panel.bg--orange .pretitle,
html[data-adv="light"] .section__stack--panel.bg--orange .title,
html[data-adv="light"] .section__stack--panel.bg--orange .stack__category,
html[data-adv="light"] .section__stack--panel.bg--orange .text__description,
html[data-adv="light"] .section__stack--panel.bg--orange .text__description p,
html[data-adv="light"] .section__stack--panel.bg--orange p {
    color: rgb(22,24,27)
}
html[data-adv] .section__stack--panel.bg--orange .section__stack__header .section__intro .title {
    color: rgb(22,24,27)
}
html[data-adv="light"] .section__stack--panel.bg--orange .stack__item {
    background: #C9CBCC;
    border-top-color: rgba(22,24,27,.35)
}
html[data-adv="light"] .section__stack--panel.bg--orange .stack__item__image {
    background: #C9CBCC
}
html[data-adv="light"] .section__stack--panel.bg--orange .line--mask,
html[data-adv="light"] .section__stack--panel.bg--orange cross-image .line.vertical-fixed,
html[data-adv="light"] .section__stack--panel.bg--orange cross-image .line.horizontal-fixed {
    background: #C9CBCC
}
html[data-adv="light"] .section__stack--panel.bg--orange .grid__column+.grid__column,
html[data-adv="light"] .section__stack--panel.bg--orange .separator {
    border-color: rgba(22,24,27,.35)
}
html[data-adv="light"] .section__stack--panel.bg--orange .button--ghost-white {
    color: rgb(22,24,27);
    border-color: rgb(22,24,27)
}

/* ====================== NGPL: Related cases — white surface, ink text; hover row = red with white type ====================== */
.related-cases__section.bg--white {
    background: rgb(var(--color-white));
    color: rgb(var(--color-black))
}
.related-cases__section.bg--white .pretitle,
.related-cases__section.bg--white .title,
.related-cases__section.bg--white .line--inner {
    color: rgb(var(--color-black))
}
.related-cases__section.bg--white .line--mask {
    background: rgb(var(--color-white))
}
.related-cases__section.bg--white .related-cases__list .stack__item {
    border-top-color: rgb(var(--color-black))
}
.related-cases__section.bg--white .related-cases__list .stack__item .grid__column+.grid__column {
    border-color: rgba(var(--color-black), .35)
}
/* hover: background stays white, text turns red */
.related-cases__section.bg--white .related-cases__list .stack__item:before {
    display: none
}
@media(hover:hover) {
    .related-cases__section.bg--white .related-cases__list .stack__item:hover,
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .project__title__content,
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .stack__item__order>.pretitle,
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .stack__item__info .title,
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .stack__item__info .stack__category,
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .pretitle {
        color: rgb(var(--color-orange))
    }
    .related-cases__section.bg--white .related-cases__list .stack__item:hover .grid__column+.grid__column {
        border-color: rgba(var(--color-black), .35)
    }
}

/* NGPL: machine-page separator on white — ink hairlines */
.separator__section.bg--white .grid__column+.grid__column {
    border-color: rgba(var(--color-black), .35)
}
.separator__section.bg--white .separator {
    border-color: rgba(var(--color-black), .35)
}

/* NGPL: Related cases header band — steel grey with white type; list below stays white */
.related-cases__section.bg--white .section__header {
    background: #717074
}
.related-cases__section.bg--white .section__header,
.related-cases__section.bg--white .section__header .pretitle,
.related-cases__section.bg--white .section__header .title,
.related-cases__section.bg--white .section__header .line--inner {
    color: rgb(var(--color-white))
}
.related-cases__section.bg--white .section__header .line--mask {
    background: #717074
}
.related-cases__section.bg--white .section__header .c__square {
    background: rgb(var(--color-white))
}

/* NGPL: prefooter sits on full-bleed imagery — no structural hairlines (button borders stay) */
.prefooter .prefooter__top {
    border-bottom: none !important
}
.prefooter .grid__column+.grid__column {
    border-left: none !important;
    border-top: none !important
}

/* NGPL: FAQ hover — accent red, visible on the light panel (overrides the bg--black white-on-white hover) */
@media(hover:hover) {
    .section__faqs .toggle__header:hover .title {
        color: rgb(var(--color-orange)) !important
    }
    .section__faqs .toggle__header:hover .plus__icon:before,
    .section__faqs .toggle__header:hover .plus__icon:after {
        background: rgb(var(--color-orange)) !important
    }
}

/* NGPL: Advantages background — white option: ink text, hairline grey dividers */
html[data-adv="white"] .section__stack--panel.bg--orange,
html[data-adv="white"] .section__stack--panel.bg--orange .stack__item,
html[data-adv="white"] .section__stack--panel.bg--orange .stack__item__image {
    background-color: rgb(var(--color-white))
}
html[data-adv="white"] .section__stack--panel.bg--orange,
html[data-adv="white"] .section__stack--panel.bg--orange .pretitle,
html[data-adv="white"] .section__stack--panel.bg--orange .title,
html[data-adv="white"] .section__stack--panel.bg--orange .stack__category,
html[data-adv="white"] .section__stack--panel.bg--orange .text__description,
html[data-adv="white"] .section__stack--panel.bg--orange .text__description p,
html[data-adv="white"] .section__stack--panel.bg--orange p,
html[data-adv="white"] .section__stack--panel.bg--orange .title .line--inner,
html[data-adv="white"] .section__stack--panel.bg--orange .section__stack__header .line--inner {
    color: rgb(22,24,27) !important
}
html[data-adv="white"] .section__stack--panel.bg--orange .line--mask,
html[data-adv="white"] .section__stack--panel.bg--orange cross-image .line.vertical-fixed,
html[data-adv="white"] .section__stack--panel.bg--orange cross-image .line.horizontal-fixed {
    background: rgb(var(--color-white))
}
html[data-adv="white"] .section__stack--panel.bg--orange .grid__column+.grid__column,
html[data-adv="white"] .section__stack--panel.bg--orange .separator,
html[data-adv="white"] .section__stack--panel.bg--orange .stack__item {
    border-color: rgb(var(--color-black))
}
html[data-adv="white"] .section__stack--panel.bg--orange .button--ghost-white {
    color: rgb(22,24,27);
    border-color: rgb(22,24,27)
}

/* "web line" separator removed — separator bands keep their static hairlines */
/* ====================== NGPL: register-gauge crosshair ====================== */
html[data-gauge="on"] cross-hair .container {
    opacity: 1
}
html[data-gauge="on"] cross-hair .number-right,
html[data-gauge="on"] cross-hair .number-bottom {
    font-variant-numeric: tabular-nums
}
cross-hair .cross-point.is-locked {
    background: rgb(var(--color-orange)) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-orange), .25)
}

/* NGPL: schema section opens with the standard hairline */
.schema__section .schema__container {
    border-top: solid 1px rgba(var(--color-orange), .6)
}
/* one-screen schematic section: copy + toggles + schematic fit 100vh on desktop */
@media(min-width:981px) {
    .schema__section:not(.schema--home):not(.schema--panel):not(.schema--system) .schema__container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        justify-content: space-between
    }
    .schema__section:not(.schema--home):not(.schema--panel):not(.schema--system) .schema__container > .wrp { flex: 0 0 auto }
    .schema__section:not(.schema--home):not(.schema--panel):not(.schema--system) .schema__main { padding-top: calc(var(--grid-margin) * 2); padding-bottom: 0 }
    .schema__section:not(.schema--home):not(.schema--panel):not(.schema--system) .schema__embed {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }
    .schema__section:not(.schema--home):not(.schema--panel):not(.schema--system) .schema__embed .schema__iframe {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none
    }
}
.schema__section.bg--grey-50 .schema__container,
.schema__section.bg--white .schema__container {
    border-top-color: rgb(var(--color-grey-200))
}

/* NGPL: instrument-tracker readouts are longer (units) — keep them inside the cell */
html[data-gauge="on"] cross-hair .number-bottom {
    left: .75rem;
    white-space: nowrap
}
html[data-gauge="on"] cross-hair .number-right {
    left: .75rem;
    top: .75rem;
    white-space: nowrap
}

/* NGPL: machine-list rows — media slots removed; grid must fill the row so all names share one axis */
.solutions__list__section .list__item--wrp>a {
    display: block
}
.solutions__list__section .solutions__item__inner {
    width: 100%
}

/* location cards: images pinned to the bottom so both align */
.about__location__section .location__card{display:flex;flex-direction:column;height:100%}
.about__location__section .location__card .location__image{margin-top:auto}
/* __ngpl_indiamap__ — Domestic presence map (fills the standard matrix__image slot) */
/* about double-image pair: symmetric, bottoms aligned (was a staggered editorial layout) */
@media(min-width:681px){
    .double__images--about .double__image__img--1{grid-column:1/-1;margin-right:0}
}
.matrix__section .matrix__main + a{display:inline-block;margin-top:2.5rem}
.matrix__image.india-map__wrap{position:relative}
.india-map{position:relative;width:100%;height:100%;background:transparent;box-sizing:border-box}
.india-map svg{display:block;width:100%;height:100%}
.india-map .im__land{fill:rgb(var(--color-grey-100));stroke:none}
.india-map .im__dot{fill:rgb(var(--color-orange))}
.india-map .im__zone{fill:rgba(var(--color-orange),.08);stroke:rgb(var(--color-orange));stroke-width:1.2;stroke-dasharray:3 4}
.india-map .im__ring{fill:none;stroke:rgb(var(--color-orange));stroke-width:1.4}
.india-map .im__hq{fill:rgb(var(--color-orange))}
.india-map .im__label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.12em;fill:rgb(var(--color-black))}
.india-map .im__label--accent{fill:rgb(var(--color-orange))}
.india-map .im__leader{stroke:rgb(var(--color-black));stroke-width:1}
.india-map__caption{position:absolute;left:.75rem;right:.75rem;bottom:.5rem;display:flex;justify-content:space-between;gap:1rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--color-black))}
.im__index__wrap{margin:2.25rem 0 2.5rem}
.im__index{border-top:1px solid rgb(var(--color-black))}
.im__index__row{display:flex;justify-content:space-between;gap:1rem;padding:.625rem 0;border-bottom:1px solid rgb(var(--color-grey-200));font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--color-black))}
.im__index__count{color:rgb(var(--color-orange))}

/* NGPL: homepage schema section runs full-bleed black with white ink.
   Overrides the earlier contained-red-block treatment. */
.schema--home,
.schema--home .home-morph,
.schema--home .schema__main,
.schema--home .grid__column--half .block__inner {
    background: rgb(var(--color-black))
}
.schema--home,
.schema--home .schema__main,
.schema--home .schema__main .title,
.schema--home .text__description,
.schema--home .text__description p,
.schema--home .schema__main p,
.schema--home .graph__data .graph__data__inner span {
    color: rgb(var(--color-white))
}
.schema--home .schema__main {
    padding: 0
}
.schema--home .schema__main .line--mask {
    background: rgb(var(--color-black))
}
.schema--home .graph__data .graph__data__logo {
    fill: rgb(var(--color-white))
}
.schema--home .schema__container,
.schema--home .graph__data,
.schema--home .graph__data .graph__data__inner,
.schema--home .graph__data .graph__data__inner span + span {
    border-color: rgba(var(--color-white), .6)
}
/* line drawing is an opaque white PNG sequence: invert + screen leaves white lines on the red ground */
.schema--home .home-morph__inner canvas {
    background: transparent
}
@media(min-width:981px) {
    .schema--home .grid__column:last-child {
        border-left: solid 1px rgba(var(--color-white), .6) !important
    }
}
@media(min-width:681px) {
    .schema--home .graph__data {
        border-right-color: rgba(var(--color-white), .6)
    }
}
@media(pointer:coarse) {
    .schema--home,
    .home-morph {
        background-color: rgb(var(--color-black)) !important
    }
}

/* NGPL: ONE hairline weight sitewide. Ink on light surfaces; the runtime pass in
   main.js (__ngpl_hairlines__) flips them to white wherever the surface actually renders dark,
   which class names alone can't tell under the themes. No third colour is ever used. */
cross-image .line.horizontal,
cross-hair .line.horizontal {
    border-top-color: rgb(var(--color-black)) !important
}
cross-image .line.vertical,
cross-hair .line.vertical {
    border-left-color: rgb(var(--color-black)) !important
}
cross-image .cross-point,
cross-hair .cross-point {
    background-color: rgb(var(--color-black)) !important
}
.grid__layout > .grid__column + .grid__column {
    border-left-color: rgb(var(--color-black)) !important
}

/* Adjacent image panels each draw their own horizontal reveal rule, so the two ended
   a pixel apart across the column divider and left a visible break in what reads as
   one continuous line. Bleed each rule to the panel edge so they meet exactly. */
cross-image .line.horizontal,
cross-hair .line.horizontal {
    left: -1px !important;
    right: -1px !important;
    width: auto !important
}

/* The image panel carried its own right-hand rule while the neighbouring grid column
   draws a left-hand one 0.4px away — the two smeared together and read as one thick
   line. The grid rule is the structural one, so the panel drops its border. */
.double__images--about .double__image__img,
.double__images--about .double__image__img--1,
.double__images--about .double__image__img--2 {
    border-right: 0 !important;
    border-left: 0 !important
}

/* team cards: card edges use the same ink hairline as every other rule */
.team__card,
.about__team .team__card {
    border-color: rgb(var(--color-black)) !important
}

/* poster is a real 2.39:1 still with no letterboxing — cover-crop it to the block */
.video__player__trigger {
    overflow: hidden
}

/* Approach hero only (hero--method): soft vertical blur weighted to the bottom edge.
   The blur lives on the image layer, not as an overlay, so the sticky caption that sits
   inside .hero__media is never smeared by it. */
.hero--method .hero__media .image--back,
.hero--method .hero__media picture.image__picture {
    -webkit-mask-image: none;
    mask-image: none
}
.hero--method .hero__media .image--back img,
.hero--method .hero__media picture.image__picture img {
    filter: blur(0)
}
.hero--method .hero__media .parallax__container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 14%, rgba(0,0,0,.35) 34%, rgba(0,0,0,0) 55%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 14%, rgba(0,0,0,.35) 34%, rgba(0,0,0,0) 55%)
}
.hero--method .hero__media .float--subtitle {
    z-index: 3
}

/* Approach hero headline reads in ink, not the accent red */
.hero--method .hero__title,
.hero--method .hero__title .line--inner {
    color: rgb(var(--color-black))
}

/* Approach values heading reads in ink (theme injects an accent rule with !important) */
.values__section--method .title--accent,
.values__section--method .title--accent .line--inner,
.values__section--method .section__title .title {
    color: rgb(var(--color-black)) !important
}

/* Company hero: overlay 7% darker than the sitewide 35% (owner request, this page only) */
.hero--about .hero__back__image.back--overlay::after {
    background-image: linear-gradient(0deg, rgba(var(--color-black), 0), rgba(var(--color-black), .42))
}

/* Project rows: the photo column is gone, so the info column takes the space it left
   (half + remainder) instead of leaving a dead gutter on the right. */
@media(min-width:981px) {
    .project__stack .stack__column--2 {
        grid-column: span calc(var(--grid-columns) / 2)
    }
}
@media(max-width:981px)and (min-width:680px) {
    .project__stack .stack__column--2 {
        grid-column: span calc(var(--grid-columns) / 2 + 1)
    }
}

/* Project rows: breathing room between the Type and Solutions blocks */
.project__stack .stack__item .stack__item__info {
    margin-top: 2rem
}

/* Consulting hero only: nudge the last headline line ("layout") down so the p
   descender above clears it — same treatment as the turnkey hero. */
.hero--sustainability hero-title .hero__title .line:last-child {
    margin-top: .12em
}


/* Project rows hover: black ground, white ink (was red-on-black) */
@media(hover:hover) {
    .project__stack .stack__item:hover,
    .project__stack .stack__item:hover .project__title__content,
    .project__stack .stack__item:hover .stack__item__order>.pretitle,
    .project__stack .stack__item:hover .stack__item__info .title,
    .project__stack .stack__item:hover .stack__item__info .stack__category,
    .project__stack .stack__item:hover .project__type,
    .project__stack .stack__item:hover .project__solutions,
    .project__stack .stack__item:hover .pretitle {
        color: rgb(var(--color-white))
    }
    .project__stack .stack__item:hover .grid__column+.grid__column {
        border-color: rgba(var(--color-white), .35)
    }
    .project__stack .stack__item:hover .c__square {
        background: rgb(var(--color-white))
    }
}

/* homepage: hairline divider above the Where we are section header */
.about__location__section > .section__header {
    border-top: 1px solid rgb(var(--color-black))
}

/* company: hairline divider above the Purpose intro section */
.intro__image__section.intro--about > .intro__main {
    border-top: 1px solid rgb(var(--color-black))
}

/* cross-image reveals: lines span their frame EXACTLY — no bleed past the frame
   (seam doubling with the neighbour) and no clipping at the left edge */
cross-image .line.horizontal,
cross-image .line.horizontal-fixed {
    left: 0 !important;
    width: 100% !important
}
cross-image .line.vertical,
cross-image .line.vertical-fixed {
    top: 0 !important;
    height: 100% !important
}

/* values section: container already draws the ink top hairline — drop the column's duplicate grey line */
.values__section .grid__column--half::before {
    display: none
}

/* about double-image pair: the parked bottom rule reads as one full-bleed line —
   each photo's horizontal reveal line extends through the wrp margin to the screen edge.
   cross-image clips at its box (overflow:hidden), so these frames unclip; the photo
   itself stays masked by .crossimg's clip-path, so only the rule escapes. */
.double__images--about cross-image {
    overflow: visible !important
}
@media (min-width: 681px) {
    .double__images--about .double__image__img--1 cross-image .line.horizontal {
        left: calc(-1px - var(--grid-margin, 25px)) !important;
        width: calc(100% + var(--grid-margin, 25px) + 2px) !important
    }
    .double__images--about .double__image__img--2 cross-image .line.horizontal {
        left: -1px !important;
        width: calc(100% + var(--grid-margin, 25px) + 2px) !important
    }
}
@media (max-width: 680.98px) {
    .double__images--about .double__image__img cross-image .line.horizontal {
        left: calc(-1px - var(--grid-margin, 25px)) !important;
        width: calc(100% + 2 * var(--grid-margin, 25px) + 2px) !important
    }
}

/* Domestic presence map frame: hairline on top edge only */
.matrix__section--about .matrix__image {
    border-top: solid 1px rgb(var(--color-black))
}

/* the readout sits below/right of the crossing point, so the frame's ancestors must not clip it */
.double__images--about .double__image__img,
.double__images--about .wrp,
.double__images--about .double__image__grid {
    overflow: visible !important
}

/* about double-image pair: no numeric readouts on these reveal frames */
.double__images--about cross-image .number-right,
.double__images--about cross-image .number-bottom {
    display: none !important
}

/* company hero: no crosshair rig at all (lines, dot, numeric readouts) */
.hero__background cross-hair {
    display: none !important
}

/* company VALUE panel: the section above already draws a rule at this seam — the
   panel's own border-top stacked on it and read as a heavier line. Drop the duplicate. */
.values__section--about .values__container {
    border-top: 0 !important
}

/* the seam rule above the VALUE panel is drawn by the photo reveal's full-bleed line;
   the left photo's line already starts at the screen edge, so extend the whole seam */
.values__section--about {
    border-top: solid 1px rgb(var(--color-black))
}
.values__section--about .values__container {
    border-top: 0 !important
}

/* about double-image pair: the parked vertical reveal line came to rest 68px inside the
   column divider below it and hung under the photo, reading as a misaligned stub.
   These frames keep the horizontal rule only. */
.double__images--about cross-image .line.vertical,
.double__images--about cross-image .cross-point {
    display: none !important
}

/* company double-image pair: the 1.25rem ruler bars ARE the image frame. An earlier
   hairline pass stripped their borders (border-right/-bottom: none), which erased the
   frame outline; restore it, and park the reveal flush so the photo fits the frame. */
.double__images--about cross-image .vertical-fixed {
    border-right: solid 1px rgb(var(--color-black)) !important
}
.double__images--about cross-image .horizontal-fixed {
    border-bottom: solid 1px rgb(var(--color-black)) !important
}
.double__images--about cross-image .horizontal-fixed:after {
    border-left: 0 !important
}

/* company double-image pair: the pre-reveal frame rule (the .horizontal-fixed bar's
   border) reads as one line across the section, so it runs to the screen edges.
   Left frame extends through the left page margin, right frame through the right. */
@media (min-width: 681px) {
    .double__images--about .double__image__img--1 cross-image .horizontal-fixed {
        width: calc(100% + var(--grid-margin)) !important;
        margin-left: calc(-1 * var(--grid-margin))
    }
    /* right frame: stop at the page margin, not past it (would add page scroll width) */
    .double__images--about .double__image__img--2 cross-image .horizontal-fixed {
        width: calc(100% + var(--grid-margin) - 1.25rem) !important
    }
}
@media (max-width: 680.98px) {
    .double__images--about cross-image .horizontal-fixed {
        width: calc(100% + 2 * var(--grid-margin)) !important;
        margin-left: calc(-1 * var(--grid-margin))
    }
}

/* Full-bleed crosshair rig (reference behaviour): each axis is ONE page-wide hairline
   that crosses at the photo's corner, so it can never "almost" align with anything.
   Vars come from CrossImage.onScroll. */
.double__images--about cross-image,
.double__images--about .image__container,
.double__images--about .double__image__img,
.double__images--about .wrp,
.double__images--about .double__image__grid {
    overflow: visible !important
}
.double__images--about cross-image .line.horizontal {
    left: var(--ci-bleed-left, 0) !important;
    right: auto !important;
    width: var(--ci-bleed-width, 100%) !important
}
.double__images--about cross-image .line.vertical {
    top: var(--ci-bleed-top, 0) !important;
    height: var(--ci-bleed-height, 100%) !important
}

/* ====================== NGPL: reveal frame rulers — left + top hairlines ======================
   Every cross-image frame carries two fixed ruler rules: a vertical one down the left
   gutter and a horizontal one across the top. They were switched off during earlier seam
   work, which left most frames with only the corner tick. Restored here for all frames,
   ink on light surfaces, white on dark. */
cross-image .vertical-fixed,
.bg--grey-50 cross-image .vertical-fixed,
.bg--white cross-image .vertical-fixed {
    border-right: solid 1px rgb(var(--color-black)) !important
}
cross-image .horizontal-fixed,
.bg--grey-50 cross-image .horizontal-fixed,
.bg--white cross-image .horizontal-fixed {
    border-bottom: solid 1px rgb(var(--color-black)) !important
}
.bg--black cross-image .vertical-fixed {
    border-right: solid 1px rgb(var(--color-white)) !important
}
.bg--black cross-image .horizontal-fixed {
    border-bottom: solid 1px rgb(var(--color-white)) !important
}
.bg--black cross-image .horizontal-fixed:after {
    border-left-color: rgb(var(--color-white)) !important
}

/* home Matrix 1: hairline divider from the section above */
.matrix__section--home.has--border {
    border-top: solid 1px rgb(var(--color-black))
}

/* home Values toggles: the three rows were shorter than the headline column, so the last
   row's rule landed ~30px above the section rule and read as a stray short divider.
   Stretch the rows to fill the column so the final rule closes the section. */
.values__section--home .toggle__column {
    display: flex;
    flex-direction: column
}
.values__section--home .toggle__column > toggle-box {
    flex: 1 1 0
}
.values__section--home .toggle__column > toggle-box .toggle__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

/* home Values toggles: the last row's own rule doubles with the section rule below it */
.values__section--home .toggle__column > toggle-box:last-child {
    border-bottom: 0 !important
}

/* company Purpose image: hide the white grid overline drawn across it */
.intro__image__section.intro--about .overline {
    display: none
}

/* Domestic presence: the column is already sticky, and a second sticky on .matrix__main
   slid the copy down over the button below it. Let the copy sit still inside the column. */
.matrix__section--about .matrix__main {
    position: static !important
}

/* company "1145 machines installed": drop the template's inherited left indent so the
   copy sits on the same left edge as every other block in the section */
.matrix__section--about.right .matrix__main {
    padding-left: 0
}

/* ====================== NGPL: reveal hairline fix — product pages ======================
   The full-bleed treatment was scoped to the company page's .double__images--about pair.
   Product-page reveal frames (.matrix__image > cross-image, right half column flush to the
   page margin) kept the old behaviour: the horizontal rule stopped inside the frame instead
   of reading as one section-wide line, and the parked vertical line hung under the photo as
   a misaligned stub. Same treatment, same result. */
.matrix__section .matrix__image cross-image,
.matrix__section .matrix__image,
.matrix__section .matrix__container .wrp,
.matrix__section .matrix__container .grid__layout {
    overflow: visible !important
}
/* the frame's own overflow:hidden was what kept the oversized scaled photo inside it —
   unclipping the frame for the rule means the photo needs its own clip, or it spills
   past the page edge and adds horizontal scroll */
.matrix__section .matrix__image cross-image .crossimg {
    overflow: hidden !important
}
.matrix__section .matrix__image cross-image .line.horizontal {
    left: -1px !important;
    right: auto !important;
    /* these frames already sit flush to the page edge, so the rule spans the frame plus
       its 1px left offset — wider adds horizontal page scroll */
    width: calc(100% + 1px) !important
}
.matrix__section .matrix__image cross-image .line.vertical,
.matrix__section .matrix__image cross-image .cross-point {
    display: none !important
}


/* ====================== NGPL: machine-page matrix reveal ======================
   The X/Y coordinate readout is a template motif and is not wanted on these
   panels. The ruler frame around the reveal also read as missing: the bar
   borders sat sub-pixel and the .bg--black variant never gave the inner tick a
   colour at all (only the .bg--grey-50 variant did), so nothing was drawn. */
.matrix__section .matrix__image cross-image .number-right,
.matrix__section .matrix__image cross-image .number-bottom {
    display: none !important
}

.matrix__section .matrix__image cross-image .vertical-fixed {
    border-right: solid 1px rgb(var(--color-black)) !important
}

.matrix__section .matrix__image cross-image .horizontal-fixed {
    border-bottom: solid 1px rgb(var(--color-black)) !important
}

.matrix__section .matrix__image cross-image .horizontal-fixed:after {
    width: 1px;
    background: rgb(var(--color-black))
}


/* ====================== NGPL: team grid responsiveness ======================
   The tablet/phone block pinned first-row cards to the second column
   (.team__row:first-child .team__card{grid-column:2/3}) - a leftover from a
   layout whose first row held a single intro card. With three cards it stacked
   all of them in the right half and left the left column empty. The desktop
   layout never had that offset. Cards now flow normally, and the column rule is
   drawn between the two columns instead of the 3-up borders, which otherwise
   left a stray hairline under a wrapped card. */
@media (max-width: 980px) {
    .about__team .team__row:first-child .team__card {
        grid-column: auto
    }

    .about__team .team__row .team__card,
    .about__team .team__row .team__card:last-of-type {
        border-left: none;
        border-right: none
    }

    .about__team .team__row .team__card:nth-child(odd) {
        border-right: solid 1px rgb(var(--color-black))
    }
}

/* Phones: two portrait cards side by side leaves the name and role cramped, so
   the grid goes single column and the cards run full width. */
@media (max-width: 560px) {
    .about__team .team__row {
        grid-template-columns: 1fr
    }

    .about__team .team__row .team__card,
    .about__team .team__row .team__card:nth-child(odd) {
        border-right: none
    }

    .about__team .team__row .team__card:not(:last-child) {
        border-bottom: solid 1px rgb(var(--color-black))
    }
}


/* ====================== NGPL: horizontal overflow containment ======================
   cross-image scales its photo to 2x and eases it back to 1x as the reveal runs.
   clip-path hides the excess but does NOT keep it out of the scrollable area, and
   nothing else clipped it - so on narrower viewports the oversized photo pushed the
   document wider than the screen and the whole site scrolled sideways (company page:
   938px of content in a 753px viewport). Clipping the image wrapper contains it;
   the reveal is unaffected because clip-path already crops tighter than this. */
cross-image .crossimg {
    overflow: hidden
}

/* The company pair's horizontal rule deliberately bleeds past its frame so the two
   panels' lines meet across the column divider. Once the pair stacks there is no
   divider to meet and the bleed simply ran off-screen. */
@media (max-width: 980px) {
    .double__images--about .double__image__img--1 cross-image .line.horizontal,
    .double__images--about .double__image__img--2 cross-image .line.horizontal,
    .double__images--about cross-image .line.horizontal {
        left: 0 !important;
        right: auto !important;
        width: 100% !important
    }
}

/* 100vw counts the vertical scrollbar, so these full-bleed blocks rendered ~15px
   wider than the content area and scrolled the page sideways on every hero page.
   Their parent already spans the full content width, so clamping to it keeps the
   full-bleed look and drops the scrollbar-width excess. */
.hero__media,
.video__block {
    max-width: 100%
}

/* The pair's two rules bleed toward each other so they read as one line across the
   column divider. The right-hand panel only needs to bleed LEFT to meet its
   neighbour - it was also bleeding a grid-margin past the page edge, which scrolled
   the site sideways at desktop widths. Its left bleed (and the join) is unchanged. */
.double__images--about .double__image__img--2 cross-image .line.horizontal {
    width: 100% !important
}

/* The reverse pair bleeds its image panel past the grid with a negative margin so the
   photo runs to the page edge; the margin overshoots and the panel ended ~21px beyond
   the viewport, scrolling the whole page sideways at desktop widths. Clipping at the
   section keeps the bleed looking identical (the section box IS the page edge) while
   keeping the excess out of the scrollable area. 'clip' rather than 'hidden' so no
   scroll container is created and position:sticky inside still works. */
.double__image__section {
    overflow-x: clip
}