html {
    scrollbar-width: none!important
}

body {
    -ms-overflow-style: none
}

body::-webkit-scrollbar {
    width: 0!important;
    height: 0!important
}

a,article,b,blockquote,body,canvas,center,code,div,footer,h1,h2,h3,h4,header,html,i,iframe,img,label,li,menu,nav,object,ol,p,s,section,span,time,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,footer,header,menu,nav,section {
    display: block
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    font-weight: 400;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

ol,ul {
    list-style: none
}

blockquote {
    quotes: none
}

blockquote:after,blockquote:before {
    content: "";
    content: none
}

* {
    box-sizing: border-box
}

img,main,video {
    display: block
}

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

button {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

button:active,button:focus {
    outline: 0
}

.u-sr {
    position: absolute!important;
    height: 0;
    width: 0;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px)
}

html {
    font-size: 16px
}

@media screen and (min-width: 1440px) {
    html {
        font-size:calc(16px + 8*(100vw - 1440px)/2400)
    }
}

@media screen and (min-width: 3840px) {
    html {
        font-size:24px
    }
}

p {
    line-height: 1.9;
    margin-bottom: 1.5rem;
    max-width: 100%
}

p,p a {
    font-weight: 500
}

a,p,p a {
    color: #000
}

a {
    transition: color .2s cubic-bezier(.455,.03,.515,.955);
    text-decoration: none;
    cursor: pointer
}

[animate-from]>a {
    display: inline-block
}

b {
    font-weight: 700
}

.large-body {
    font-size: 1.4rem;
    font-family: roc-grotesk,sans-serif;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -.1rem
}

@media (min-width: 540px) {
    .large-body {
        font-size:1.6rem
    }
}

@media (min-width: 1024px) {
    .large-body {
        font-size:2rem
    }
}

.medium-body {
    font-size: 1.3rem;
    font-family: roc-grotesk,sans-serif;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: -.1rem
}

@media (min-width: 540px) {
    .medium-body {
        font-size:1.8rem
    }
}

.h1,.h2,.h3,.h4,h1,h2,h3,h4 {
    font-family: roc-grotesk,sans-serif;
    color: #000;
    font-weight: 500;
    letter-spacing: -.15rem;
    line-height: 1.2
}

.h1,h1 {
    font-size: 3.66667rem;
    margin-bottom: 3.33333rem
}

.h2,h2 {
    font-size: 2.16667rem
}

.h2,.h3,h2,h3 {
    margin-bottom: 1.66667rem
}

.h3,h3 {
    font-size: 1.33333rem
}

.h3,.h4,h3,h4 {
    letter-spacing: .04rem
}

.h4,h4 {
    font-size: 1.16667rem;
    margin-bottom: .83333rem
}

.h-display {
    font-size: 3rem;
    color: #000;
    font-weight: 500;
    letter-spacing: -.2rem;
    line-height: 1
}

@media (min-width: 1024px) {
    .h-display {
        font-size:5.5rem
    }
}

@media (min-width: 1024px) {
    .page-template-jungle-blade .h-display {
        font-size:7.5rem
    }
}

.h-page {
    font-size: 3.66667rem;
    line-height: 1
}

@media (min-width: 1024px) {
    .h-page {
        font-size:6rem
    }
}

svg {
    display: block;
    max-width: 100%
}

img.full-width,video.full-width {
    width: 100%
}

.container {
    margin: auto;
    width: calc(100% - 3rem)
}

@media (min-width: 1024px) {
    .container {
        width:calc(81.81818% - 4.90909rem)
    }
}

.container--fluid {
    width: calc(100% - 3rem)
}

@media (min-width: 1024px) {
    .container--fluid {
        width:calc(100% - 6rem)
    }
}

@media (min-width: 1024px) {
    .no-container-desktop {
        margin:0;
        width: auto
    }
}

.grid {
    display: flex;
    flex-wrap: wrap
}

[class*=cell-] {
    position: relative;
    width: auto
}

.cell {
    width: auto
}

.cell-9 {
    width: 100%;
    max-width: 100%
}

.cell-7 {
    width: 77.77778%;
    max-width: 77.77778%
}

.cell-3 {
    width: 33.33333%;
    max-width: 33.33333%
}

.offset-3 {
    margin-left: 33.33333%
}

.cell-1 {
    width: 11.11111%;
    max-width: 11.11111%
}

.offset-1 {
    margin-left: 11.11111%
}

@media (min-width: 375px) {
    .cell-9-xsm {
        width:100%;
        max-width: 100%
    }
}

@media (min-width: 540px) {
    .cell-8-sm {
        width:88.88889%;
        max-width: 88.88889%
    }
}

@media (min-width: 540px) {
    .cell-7-sm {
        width:77.77778%;
        max-width: 77.77778%
    }
}

@media (min-width: 540px) {
    .cell-4-sm {
        width:44.44444%;
        max-width: 44.44444%
    }
}

@media (min-width: 540px) {
    .cell-1-sm {
        width:11.11111%;
        max-width: 11.11111%
    }

    .offset-1-sm {
        margin-left: 11.11111%
    }
}

@media (min-width: 1024px) {
    .cell-5-md {
        width:55.55556%;
        max-width: 55.55556%
    }
}

@media (min-width: 1024px) {
    .cell-4-md {
        width:44.44444%;
        max-width: 44.44444%
    }
}

@media (min-width: 1024px) {
    .cell-3-md {
        width:33.33333%;
        max-width: 33.33333%
    }
}

@media (min-width: 1024px) {
    .cell-2-md {
        width:22.22222%;
        max-width: 22.22222%
    }

    .offset-2-md {
        margin-left: 22.22222%
    }
}

@media (min-width: 1024px) {
    .offset-1-md {
        margin-left:11.11111%
    }
}

@media (min-width: 1440px) {
    .cell-5-lg {
        width:55.55556%;
        max-width: 55.55556%
    }
}

@media (min-width: 1440px) {
    .cell-3-lg {
        width:33.33333%;
        max-width: 33.33333%
    }
}

@media (min-width: 1440px) {
    .offset-2-lg {
        margin-left:22.22222%
    }
}

.btn--primary,.btn--secondary {
    display: inline-block;
    font-size: 1.2rem;
    font-family: neue-haas-grotesk-display,sans-serif;
    font-weight: 600;
    padding: 1rem 2.2rem;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.btn--primary:after,.btn--secondary:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 101%;
    height: 100%;
    background-color: #ffcc2a;
    z-index: -1;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.19,1,.22,1)
}

.btn--primary:focus:after,.btn--primary:hover:after,.btn--secondary:focus:after,.btn--secondary:hover:after {
    transform: translateY(0)
}

.btn--primary {
    background-color: #000;
    box-shadow: inset 0 0 0 1px #000;
    color: #fff
}

.btn--secondary {
    box-shadow: inset 0 0 0 1px #ffcc2a
}

.btn--tertiary {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    padding: 0 .5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    line-height: 1.8
}

.btn--tertiary:after,.btn--tertiary:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transition: transform .7s cubic-bezier(.785,.135,.15,.86)
}

.btn--tertiary:before {
    transform: translateX(0)
}

.btn--tertiary:after {
    transform: translateX(-100%);
    transition-delay: 0s
}

.btn--tertiary:focus:before,.btn--tertiary:hover:before {
    transform: translateX(100%)
}

.btn--tertiary:focus:after,.btn--tertiary:hover:after {
    transform: translateX(0);
    transition-delay: .2s
}

.blockquote-small {
    padding-left: 1.5rem;
    position: relative
}

@media (min-width: 540px) {
    .blockquote-small {
        padding-left:4rem
    }
}

.blockquote-small__line {
    display: block;
    width: 1px;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #000
}

.blockquote-large {
    position: relative;
    margin: auto;
    text-align: center;
    max-width: 100%
}

@media (min-width: 540px) {
    .blockquote-large {
        width:90rem
    }
}

@media (min-width: 1440px) {
    .blockquote-large {
        width:60rem
    }
}

@media (min-width: 2500px) {
    .blockquote-large {
        width:80rem
    }
}

@media (min-width: 3840px) {
    .blockquote-large {
        width:100rem
    }
}

.blockquote-large span {
    position: relative;
    width: 0
}

.blockquote-large span.lquo:after,.blockquote-large span.rquo:after {
    position: absolute;
    color: #f9f8f7;
    -webkit-text-stroke: 1px #ffcc2a;
    font-family: roc-grotesk,sans-serif;
    font-weight: 500;
    line-height: .5;
    z-index: -1;
    opacity: .5;
    font-size: 8rem
}

@media (min-width: 1024px) {
    .blockquote-large span.lquo:after,.blockquote-large span.rquo:after {
        font-size:12rem
    }
}

@media (min-width: 2500px) {
    .blockquote-large span.lquo:after,.blockquote-large span.rquo:after {
        font-size:15rem
    }
}

@media (min-width: 3840px) {
    .blockquote-large span.lquo:after,.blockquote-large span.rquo:after {
        font-size:18rem
    }
}

.blockquote-large span.lquo:after {
    content: "\201C";
    top: 0;
    left: 0;
    transform: translate(-45%,5%)
}

.blockquote-large span.rquo:after {
    content: "\201D";
    bottom: 0;
    right: 0;
    transform: translate(60%,95%)
}

.blockquote-large p {
    font-size: 3.2rem;
    font-family: roc-grotesk,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -.2rem
}

@media (min-width: 1024px) {
    .blockquote-large p {
        font-size:4rem
    }
}

@media (min-width: 2500px) {
    .blockquote-large p {
        font-size:5rem
    }
}

@media (min-width: 3840px) {
    .blockquote-large p {
        font-size:7rem
    }
}

.blockquote-large footer {
    font-size: 1.5rem;
    font-family: roc-grotesk,sans-serif;
    font-weight: 500;
    color: #3eceb3;
    letter-spacing: -.1rem
}

@media (min-width: 540px) {
    .blockquote-large footer {
        font-size:2rem
    }
}

@media (min-width: 1024px) {
    .contact {
        min-height:calc(100vh - 9.5rem)
    }
}

@media (min-width: 1024px) {
    .contact__body,.contact__title {
        max-width:38rem
    }
}

.contact .contact-sidebar .link-hover>div {
    overflow: hidden
}

.pagination {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.pagination__marker {
    display: block;
    padding: 1rem .6rem
}

.pagination__marker span {
    display: block;
    width: 2rem;
    height: .5rem;
    border: 1px solid #000;
    pointer-events: none;
    transition: background-color .8s cubic-bezier(.455,.03,.515,.955)
}

@media (min-width: 540px) {
    .pagination__marker span {
        width:2.9rem;
        height: .4rem
    }
}

.pagination__marker.active span {
    background-color: #000
}

.pagination--white .pagination__marker span {
    border-color: #fff
}

.pagination--white .pagination__marker.active span {
    background-color: #fff
}

.slider {
    height: 40vh;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y
}

.slider:active {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

@media (min-width: 1024px) {
    .slider {
        height:85vh
    }
}

@media (min-width: 1440px) and (min-height:1200px) {
    .slider {
        min-height:60rem
    }
}

.slider__inner {
    display: flex;
    overflow: hidden;
    height: calc(100% - 4.3rem);
    position: relative
}

.slider__slide {
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.slider__slide,.slider__slide img {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.slider__slide img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    pointer-events: none
}

.slider .pagination {
    margin-top: 1.5rem
}

.offset-slider {
    position: relative;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y
}

.offset-slider:active {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.offset-slider.dragging:not(.lightbox-open) .offset-slider__slide {
    -webkit-clip-path: inset(1rem);
    clip-path: inset(1rem)
}

.offset-slider.dragging:not(.lightbox-open) img {
    transform: scale(1.05)
}

.offset-slider__inner {
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
    position: relative;
    overflow: hidden
}

.offset-slider__slide {
    width: 90%;
    height: 100%;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: -webkit-clip-path 1s cubic-bezier(.19,1,.22,1);
    transition: clip-path 1s cubic-bezier(.19,1,.22,1);
    transition: clip-path 1s cubic-bezier(.19,1,.22,1),-webkit-clip-path 1s cubic-bezier(.19,1,.22,1)
}

@media (min-width: 540px) {
    .offset-slider__slide {
        width:35%
    }
}

.offset-slider__slide:first-child {
    margin-right: 20%
}

.offset-slider__slide:last-child {
    margin-left: 1.5rem
}

@media (min-width: 1024px) {
    .offset-slider__slide:last-child {
        margin-left:3rem
    }
}

.offset-slider__slide:not(:first-child) {
    margin-right: 3rem
}

.offset-slider__slide img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    height: 100%;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    transition: transform 1s cubic-bezier(.19,1,.22,1)
}

.offset-slider__lightbox {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1000
}

.offset-slider__lightbox img {
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    height: 100%;
    width: 100%;
    z-index: 2
}

.offset-slider__lightbox-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f8f7;
    opacity: 0;
    z-index: 999;
    transition: opacity 1s cubic-bezier(.19,1,.22,1);
    pointer-events: none
}

.lightbox-open .offset-slider__lightbox-bg {
    opacity: 1
}

.bg-s {
    pointer-events: none
}

.bg-s svg path {
    fill: none;
    stroke: #3eceb3;
    stroke-miterlimit: 10;
    stroke-dasharray: 400% 100%;
    -webkit-animation-name: bgSLoop;
    animation-name: bgSLoop;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.bg-s--yellow svg path {
    stroke: #ffcc2a
}

.bg-s--teal svg path {
    stroke: #3eceb3
}

.bg-s--blue svg path {
    stroke: #4aa7ff
}

.bg-s--light-blue svg path {
    stroke: #1da4ff
}

.bg-s--static svg path {
    -webkit-animation: none;
    animation: none;
    stroke-dasharray: 0
}

.bg-s--fullscreen {
    position: fixed;
    top: 50%;
    transform: translate(50%,-50%);
    width: 80%;
    z-index: -1
}

@media (min-width: 1024px) {
    .bg-s--fullscreen {
        position:absolute;
        width: 120%;
        transform: translateY(-50%)
    }
}

.bg-s-wrapper {
    position: relative;
    z-index: -1;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.bg-s-wrapper .bg-s {
    width: 40%;
    transform: rotate(-20deg)
}

@media (min-width: 540px) {
    .bg-s-wrapper .bg-s {
        width:25%
    }
}

.bg-s-wrapper--rotate-right .bg-s {
    transform: rotate(20deg)
}

.bg-s-wrapper--rotate-left .bg-s {
    transform: rotate(-20deg)
}

.bg-s-wrapper--rotate-none .bg-s {
    transform: none
}

.bg-s-wrapper--align-right {
    justify-content: flex-end
}

.bg-s-wrapper--align-left {
    justify-content: flex-start
}

.bg-s-wrapper--align-center {
    justify-content: center
}

.page-template-jungle-blade .bg-s-wrapper--align-right {
    transform: translateX(7%)
}

@-webkit-keyframes bgSLoop {
    0% {
        stroke-dashoffset: 0%
    }

    to {
        stroke-dashoffset: 500%
    }
}

@keyframes bgSLoop {
    0% {
        stroke-dashoffset: 0%
    }

    to {
        stroke-dashoffset: 500%
    }
}

.project-header h1 {
    margin: 0
}

.project-header hr {
    display: block;
    border: 0;
    height: 1px;
    width: 100%;
    background-color: #000;
    margin-left: 0;
    text-align: left
}

@media (max-width: 1023px) {
    .project-header__meta {
        flex-wrap:wrap
    }
}

.project-header__meta .divider {
    position: relative;
    width: 1px
}

.project-header__meta .divider:before {
    content: "";
    display: block;
    width: 100%;
    height: 120%;
    background-color: #000;
    position: absolute;
    top: -10%;
    left: 0
}

.video {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%
}

.video__poster,.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.video__poster {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    cursor: pointer
}

.video__poster>div,.video__poster img {
    width: 100%;
    height: 100%
}

.video__poster img {
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none
}

.video__poster svg {
    position: absolute;
    width: 3rem;
    height: 3rem;
    fill: #fff;
    pointer-events: none;
    z-index: 2;
    transition: transform .4s cubic-bezier(.19,1,.22,1)
}

.video__poster:hover svg {
    transform: scale(1.2)
}

.video iframe {
    z-index: 1;
    visibility: hidden
}

.services {
    width: 100%;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y
}

.services:active {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

body:not(.is-touch) .services.hovered .services__images>span>span {
    transform: translateY(0)
}

body:not(.is-touch) .services.hovered .services__images img {
    transform: translateY(0) scale(1)
}

.services__row {
    display: flex
}

.services__row:first-child,.services__row:nth-child(3) {
    justify-content: flex-end
}

.services__item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: 3rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body:not(.is-touch) .services__item:hover .services__name__clip,body:not(.is-touch) .services__item:hover .services__name__filled {
    transform: translateY(0)
}

.services__name {
    display: block;
    position: relative;
    font-size: 14vw;
    font-family: roc-grotesk,sans-serif;
    letter-spacing: -.1rem;
    font-weight: 500;
    line-height: 1.3;
    z-index: 2;
    white-space: nowrap;
    pointer-events: none
}

@media (min-width: 375px) {
    .services__name {
        font-size:12vw
    }
}

@media (min-width: 1024px) {
    .services__name {
        font-size:8vw;
        letter-spacing: -.2rem
    }
}

.services__name__outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #000
}

.services__name__filled {
    display: block;
    color: #000;
    transform: translateY(-100%)
}

.services__name__clip {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translateY(100%);
    pointer-events: none
}

.services__images {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 40vw;
    pointer-events: none;
    justify-content: center;
    transform-origin: left
}

@media (min-width: 375px) {
    .services__images {
        max-width:20vw
    }
}

.services__images>span {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.services__images>span>span {
    display: block;
    overflow: hidden;
    transform: translateY(101%)
}

.services__images img {
    width: 100%;
    transform: translateY(-101%) scale(.8);
    height: 0
}

.services__name__clip,.services__name__filled {
    transition: transform 1.5s cubic-bezier(.19,1,.22,1)
}

.services .services__images>span>span,.services .services__images img {
    transition: transform .5s cubic-bezier(.19,1,.22,1)
}

.services:hover .services__images>span>span,.services:hover .services__images img {
    transition: transform 1.4s cubic-bezier(.19,1,.22,1)
}

@-moz-document url-prefix() {
    .services {
        transform: rotate(.001deg)
    }
}

.team-slider {
    position: relative;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y
}

.team-slider:active {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.team-slider__inner {
    display: flex;
    height: 100%;
    position: relative
}

.team-slider__slide {
    position: relative;
    width: 75%;
    height: 100%;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 20%
}

@media (min-width: 1024px) {
    .team-slider__slide {
        width:32%;
        padding-left: 12%
    }
}

.team-slider__slide:first-child {
    margin-left: 3rem;
    width: 55%;
    padding-left: 0
}

@media (min-width: 1024px) {
    .team-slider__slide:first-child {
        margin-left:20%;
        width: 20%
    }
}

.team-slider__slide:last-child {
    margin-right: 1.5rem
}

.team-slider__image {
    width: 100%;
    height: 100%;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    margin-bottom: 1.5rem;
    overflow: hidden
}

.team-slider__image img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    height: 100%;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.team-slider__meta {
    overflow: hidden
}

.team-slider__meta h3 {
    margin-bottom: -.1rem;
    letter-spacing: -.1rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1
}

.team-slider__meta p {
    display: block;
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.3
}

.team-slider__slide:nth-child(2n) {
    padding-top: 9%
}

.team-slider__bg-name {
    position: absolute;
    bottom: 5rem;
    -webkit-text-stroke: 1px #000;
    color: #f9f8f7;
    z-index: -1;
    transform: translateZ(0) rotate(-90deg);
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 600;
    width: 0
}

@media (min-width: 540px) {
    .team-slider__bg-name {
        font-size:5.5rem;
        bottom: 4rem
    }
}

.wp-block .team-slider__image,.wp-block .team-slider__image img,.wp-block .team-slider__meta,.wp-block .team-slider__meta-inner {
    transform: none
}

@-moz-document url-prefix() {
    .team-slider {
        transform: rotate(.001deg)
    }
}

.page-template-jungle-blade .heading-over-bg-s {
    margin-top: 8.125rem!important;
    margin-bottom: 11.25rem!important
}

@media (min-width: 768px) {
    .page-template-jungle-blade .heading-over-bg-s {
        margin-top:17.61364rem!important;
        margin-bottom: 21.59091rem!important
    }
}

@media (min-width: 1024px) {
    .page-template-jungle-blade .heading-over-bg-s {
        margin-top:16.07955rem!important;
        margin-bottom: 25.85227rem!important
    }
}

.page-template-jungle-blade .heading-over-bg-s h2 {
    line-height: .9;
    letter-spacing: 0;
    font-size: 3.75rem
}

@media (min-width: 768px) {
    .page-template-jungle-blade .heading-over-bg-s h2 {
        font-size:5.68182rem
    }
}

@media (min-width: 1024px) {
    .page-template-jungle-blade .heading-over-bg-s h2 {
        font-size:7.38636rem
    }
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10
}

.site-header--jungle .site-header__logo svg {
    width: 5.47375rem;
    height: 2rem
}

@media (min-width: 1024px) {
    .site-header--jungle .site-header__logo svg {
        width:8.86364rem;
        height: 3.23864rem
    }
}

.jungle-hero {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    width: 100vw;
    background: #062e29
}

.jungle-hero__title {
    font-family: roc-grotesk-wide,sans-serif;
    width: 20.9375rem;
    font-size: 4rem;
    line-height: 1;
    z-index: 10;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: transparent;
    -webkit-text-stroke: .125rem #fff;
    text-align: center;
    letter-spacing: 0
}

@media (min-width: 768px) {
    .jungle-hero__title {
        top:50%
    }
}

@media (min-width: 1024px) {
    .jungle-hero__title {
        width:90vw;
        max-width: 75rem;
        font-size: 7.38636rem;
        top: 50%;
        transform: translate(-50%,-50%);
        color: transparent;
        -webkit-text-stroke: .17045rem #fff;
        text-align: center;
        letter-spacing: 0
    }
}

@media (min-width: 1920px) {
    .jungle-hero__title {
        font-size:11.36364rem
    }
}

.jungle-hero__title.d-none {
    display: none
}

.jungle-hero__scroll-icon {
    height: 2.5rem;
    width: 2.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translate(-50%)
}

@media (min-width: 1024px) {
    .jungle-hero__scroll-icon {
        height:4.54545rem;
        width: 4.54545rem;
        transform: translate(-50%,-60%);
        bottom: 5.54%
    }
}

.jungle-hero__scroll-icon__bg {
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite
}

.jungle-hero__scroll-icon__arrow {
    position: absolute;
    inset: 0;
    top: 0
}

.jungle-hero__scroll-text {
    left: 50%;
    bottom: 5.54%;
    transform: translate(-50%);
    font-size: .875rem;
    z-index: 10
}

@media (min-width: 1024px) {
    .jungle-hero__scroll-text {
        font-size:1.47727rem
    }
}

.jungle-content {
    padding-top: 4.62rem
}

.jungle-content__bg-drops {
    position: absolute;
    top: 34rem;
    right: -7vw;
    width: 145vw;
    height: 99.75vw;
    transform: translate(27.18%,-30.76%);
    z-index: -1
}

@media (min-width: 768px) {
    .jungle-content__bg-drops {
        top:0;
        right: 0;
        width: 58.44vw;
        height: 43.18vw
    }
}

.jungle-content__bg-sun {
    max-width: none;
    position: absolute;
    z-index: -1;
    width: 144vw;
    height: 144vw;
    top: 60rem;
    left: -22%
}

@media (min-width: 540px) {
    .jungle-content__bg-sun {
        width:40vh;
        height: 40vh
    }
}

@media (min-width: 768px) {
    .jungle-content__bg-sun {
        width:60vw;
        height: 60vw;
        top: 37rem;
        left: -25%
    }
}

@media (min-width: 1024px) {
    .jungle-content__bg-sun {
        width:45vw;
        height: 45vw;
        top: 66vw;
        left: -18vw
    }
}

@media (min-width: 1440px) {
    .jungle-content__bg-sun {
        width:47.66vw;
        height: 47.66vw;
        top: 65vw;
        left: -16vw
    }
}

.jungle-content__bg-s {
    position: absolute;
    z-index: -1;
    display: none
}

@media (min-width: 768px) {
    .jungle-content__bg-s {
        display:block;
        width: 28.03977rem;
        height: 37.38636rem;
        top: 50rem;
        right: -30%
    }
}

@media (min-width: 1024px) {
    .jungle-content__bg-s {
        width:37.5vw;
        height: 50vw;
        top: 96vw;
        right: -15vw
    }
}

@media (min-width: 1440px) {
    .jungle-content__bg-s {
        width:40.05682rem;
        height: 53.40909rem;
        top: 92vw;
        right: -20vw
    }
}

.jungle-content .blockquote-large p {
    font-size: 2rem
}

@media (min-width: 1024px) {
    .jungle-content .blockquote-large p {
        font-size:4rem
    }
}

@media (min-width: 2500px) {
    .jungle-content .blockquote-large p {
        font-size:5rem
    }
}

@media (min-width: 3840px) {
    .jungle-content .blockquote-large p {
        font-size:7rem
    }
}

.jungle-content .blockquote-large footer {
    font-size: 1.2rem
}

@media (min-width: 540px) {
    .jungle-content .blockquote-large footer {
        font-size:2rem
    }
}

.jungle-footer {
    width: 100%;
    height: 49.74vw;
    min-height: 662px;
    background: #062e29
}

@media (min-width: 1024px) {
    .jungle-footer {
        min-height:520px
    }
}

.jungle-footer__title {
    font-family: roc-grotesk-wide,sans-serif;
    line-height: 1;
    font-size: 3.5rem
}

@media (min-width: 1024px) {
    .jungle-footer__title {
        font-size:4.26136rem
    }
}

@media (min-width: 1440px) {
    .jungle-footer__title {
        font-size:5.68182rem
    }
}

@media (min-width: 1920px) {
    .jungle-footer__title {
        font-size:7.95455rem
    }
}

.jungle-footer__title__outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: .125rem #fff;
    text-align: center;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .jungle-footer__title__outline {
        color:transparent;
        -webkit-text-stroke: .17045rem #fff;
        text-align: center;
        letter-spacing: .04em
    }
}

.jungle-footer__contact {
    position: relative;
    font-family: roc-grotesk,sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: -.1rem;
    color: #fff;
    line-height: 1;
    width: 63%
}

@media (min-width: 1024px) {
    .jungle-footer__contact {
        font-size:1.59091rem;
        width: 50%
    }
}

.jungle-footer__contact a {
    display: inline-block;
    font-weight: 400;
    color: #ffd150
}

.jungle-footer__plant {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    max-width: none
}

.jungle-footer__plant--1-back {
    height: 202.32vw;
    left: -84%;
    bottom: -100.4vw
}

@media (min-width: 540px) {
    .jungle-footer__plant--1-back {
        height:162.32vw;
        left: -64%;
        bottom: -90.4vw
    }
}

@media (min-width: 1024px) {
    .jungle-footer__plant--1-back {
        height:178.95%;
        top: -31.83%;
        bottom: unset;
        left: -35.73%
    }
}

.jungle-footer__plant--1-front {
    display: none;
    height: 176.44%;
    top: -30.99%;
    left: -35.1%
}

@media (min-width: 1024px) {
    .jungle-footer__plant--1-front {
        display:block
    }
}

.jungle-footer__plant--2 {
    display: none;
    height: 136.33%;
    top: 1.68%;
    left: 31.72%
}

@media (min-width: 1024px) {
    .jungle-footer__plant--2 {
        display:block
    }
}

.jungle-footer__plant--3 {
    height: 223.2vw;
    top: -44.53vw;
    left: 24.27%
}

@media (min-width: 540px) {
    .jungle-footer__plant--3 {
        height:200vw;
        top: -40.53vw;
        left: 30.27%
    }
}

@media (min-width: 768px) {
    .jungle-footer__plant--3 {
        height:145vw;
        left: 53.27%;
        top: -25vw
    }
}

@media (min-width: 1024px) {
    .jungle-footer__plant--3 {
        height:159.79%;
        top: -23.04%;
        left: unset;
        right: -41.56%
    }
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

.text-plants {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr
}

@media (min-width: 768px) {
    .text-plants {
        grid-template-columns:repeat(9,1fr);
        margin-bottom: 4.20455rem
    }
}

.text-plants .text-plants__container {
    display: grid;
    align-items: center;
    grid-template-rows: auto auto
}

@media (min-width: 768px) {
    .text-plants .text-plants__container {
        grid-template-rows:auto
    }
}

@media (min-width: 768px) {
    .text-plants--left .text-plants__container {
        grid-column:1/span 9;
        grid-template-areas: "image text";
        grid-template-columns: auto 1fr
    }
}

@media (min-width: 768px) and (min-width:1024px) {
    .text-plants--left .text-plants__container {
        grid-column:1/span 8
    }
}

@media (min-width: 768px) {
    .text-plants--right .text-plants__container {
        grid-column:1/span 9;
        grid-template-areas: "text image";
        grid-template-columns: 1fr auto
    }
}

@media (min-width: 768px) and (min-width:1024px) {
    .text-plants--right .text-plants__container {
        grid-column:2/span 8
    }
}

.text-plants .text-plants__text h2 {
    font-size: 1.75rem
}

@media (min-width: 1024px) {
    .text-plants .text-plants__text h2 {
        font-size:3.125rem
    }
}

.text-plants .text-plants__text p {
    font-size: .875rem
}

@media (min-width: 768px) {
    .text-plants .text-plants__text p {
        font-size:1.02273rem
    }
}

@media (min-width: 1024px) {
    .text-plants .text-plants__text p {
        font-size:1.36364rem
    }
}

.text-plants .text-plants__text p:last-child {
    margin-bottom: 0
}

@media (min-width: 768px) {
    .text-plants .text-plants__text {
        grid-area:text
    }
}

.text-plants .text-plants__plants {
    position: relative;
    height: 100vw
}

@media (min-width: 768px) {
    .text-plants .text-plants__plants {
        grid-area:image;
        width: 50vw;
        height: 50vw
    }
}

.text-plants .text-plants__plants .text-plants__plant {
    position: absolute;
    width: 100%;
    max-width: 1080px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.full-width-two-column-images {
    --grid-columns: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.25rem;
    margin-bottom: 1.5625rem
}

@media (min-width: 768px) {
    .full-width-two-column-images {
        grid-gap:1.47727rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 54.84vw;
        margin-bottom: 13.63636rem
    }
}

.jungle-slider {
    position: relative;
    margin-bottom: 4.5rem
}

@media (min-width: 1024px) {
    .jungle-slider {
        margin-bottom:20.34091rem;
        cursor: -webkit-grab;
        cursor: grab;
        touch-action: pan-y
    }

    .jungle-slider:active {
        cursor: -webkit-grabbing;
        cursor: grabbing
    }
}

.jungle-slider__inner {
    display: flex;
    height: 100%;
    position: relative;
    flex-direction: column
}

@media (min-width: 1024px) {
    .jungle-slider__inner {
        flex-direction:row
    }
}

.jungle-slider__header-title {
    margin-bottom: 0;
    font-size: 1.75rem;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .jungle-slider__header-title {
        font-size:3.69318rem;
        line-height: 1.12;
        letter-spacing: -.05rem
    }
}

.jungle-slider__header-text {
    font-size: .875rem
}

@media (min-width: 768px) {
    .jungle-slider__header-text {
        font-size:1.02273rem
    }
}

@media (min-width: 1024px) {
    .jungle-slider__header-text {
        font-size:1.36364rem
    }
}

.jungle-slider__header-text p {
    margin-bottom: 0
}

.jungle-slider__slide {
    position: relative;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    margin-top: 3rem
}

.jungle-slider__slide:first-child {
    margin-top: 0
}

@media (min-width: 1024px) {
    .jungle-slider__slide {
        margin-top:0;
        margin-left: 10.11364rem;
        width: 25.56818rem
    }
}

@media (min-width: 1024px) {
    .jungle-slider__slide:first-child {
        margin-left:11%
    }
}

@media (min-width: 1024px) {
    .jungle-slider__slide:last-child {
        margin-right:10rem
    }
}

.jungle-slider__slide__header {
    display: flex;
    flex-direction: column
}

@media (min-width: 1024px) {
    .jungle-slider__slide__header {
        width:110%;
        flex-direction: row;
        align-items: center
    }
}

.jungle-slider__slide__icon {
    --icon_colour: #000;
    width: 2rem;
    height: 2rem;
    margin-bottom: .75rem
}

@media (min-width: 1024px) {
    .jungle-slider__slide__icon {
        margin-bottom:0;
        width: 4.54545rem;
        height: 4.54545rem
    }
}

.jungle-slider__slide__icon path {
    fill: var(--icon_colour)
}

.jungle-slider__slide__title {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    letter-spacing: -.02rem;
    margin-bottom: 0
}

@media (min-width: 1024px) {
    .jungle-slider__slide__title {
        letter-spacing:-.1rem;
        font-size: 2.38636rem;
        margin-top: 0;
        margin-left: 1.42045rem
    }
}

.jungle-slider__slide__image {
    width: 100%;
    height: 20.9375rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    overflow: hidden
}

@media (min-width: 1024px) {
    .jungle-slider__slide__image {
        height:22.44318rem;
        margin-top: 1.98864rem;
        margin-bottom: 1.98864rem
    }
}

.jungle-slider__slide__image img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.jungle-slider__slide__text {
    line-height: 1.75;
    font-size: .875rem
}

@media (min-width: 768px) {
    .jungle-slider__slide__text {
        font-size:1.02273rem
    }
}

@media (min-width: 1024px) {
    .jungle-slider__slide__text {
        font-size:1.36364rem
    }
}

@media (min-width: 1024px) {
    .jungle-slider__slide:nth-child(2n) {
        padding-top:9%
    }
}

.plant-slider {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-6.17%);
    pointer-events: none;
    width: 60.56818rem;
    height: 56.19318rem
}

@media (min-width: 1024px) {
    .plant-slider {
        display:block
    }
}

@-moz-document url-prefix() {
    .jungle-slider {
        transform: rotate(.001deg)
    }
}

.u-color-white {
    color: #fff!important
}

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

.u-justify-content-center {
    justify-content: center
}

.u-justify-content-flex-start {
    justify-content: flex-start
}

.u-justify-content-space-between {
    justify-content: space-between
}

.u-align-items-center {
    align-items: center
}

.u-align-items-flex-end {
    align-items: flex-end
}

.u-flex-no-shrink {
    flex-shrink: 0
}

@media (min-width: 540px) {
    .u-order-2-sm {
        order:2
    }
}

@media (min-width: 1024px) {
    .u-align-items-center-md {
        align-items:center
    }

    .u-order-2-md {
        order: 2
    }
}

.u-m-auto {
    margin: auto!important
}

.u-m-0 {
    margin: 0!important
}

.u-mb-0 {
    margin-bottom: 0!important
}

.u-mb-1 {
    margin-bottom: .5rem!important
}

.u-ml-1 {
    margin-left: .5rem!important
}

.u-mb-2 {
    margin-bottom: 1rem!important
}

.u-mt-3 {
    margin-top: 1.5rem!important
}

.u-mb-3 {
    margin-bottom: 1.5rem!important
}

.u-mb-4 {
    margin-bottom: 2rem!important
}

.u-ml-4 {
    margin-left: 2rem!important
}

.u-mt-5 {
    margin-top: 3rem!important
}

.u-mb-6 {
    margin-bottom: 4rem!important
}

.u-mb-8 {
    margin-bottom: 6rem!important
}

.u-mb-10 {
    margin-bottom: 10rem!important
}

.u-mb-15 {
    margin-bottom: 15rem!important
}

@media (min-width: 375px) {
    .u-mb-0-xsm {
        margin-bottom:0!important
    }
}

@media (min-width: 540px) {
    .u-mb-0-sm {
        margin-bottom:0!important
    }
}

@media (min-width: 1024px) {
    .u-mb-0-md {
        margin-bottom:0!important
    }
}

@media (min-width: 540px) {
    .u-mx-2-sm {
        margin-left:1rem!important;
        margin-right: 1rem!important
    }
}

@media (min-width: 375px) {
    .u-mr-4-xsm {
        margin-right:2rem!important
    }
}

@media (min-width: 540px) {
    .u-mr-4-sm,.u-mx-4-sm {
        margin-right:2rem!important
    }

    .u-mx-4-sm {
        margin-left: 2rem!important
    }
}

@media (min-width: 1024px) {
    .u-mt-4-md {
        margin-top:2rem!important
    }
}

@media (min-width: 540px) {
    .u-mt-5-sm {
        margin-top:3rem!important
    }

    .u-mb-5-sm {
        margin-bottom: 3rem!important
    }
}

@media (min-width: 1024px) {
    .u-mb-5-md {
        margin-bottom:3rem!important
    }
}

@media (min-width: 540px) {
    .u-mb-6-sm {
        margin-bottom:4rem!important
    }
}

@media (min-width: 1024px) {
    .u-ml-6-md {
        margin-left:4rem!important
    }
}

@media (min-width: 1440px) {
    .u-mr-6-lg {
        margin-right:4rem!important
    }
}

@media (min-width: 540px) {
    .u-mt-7-sm {
        margin-top:5rem!important
    }
}

@media (min-width: 540px) {
    .u-mb-8-sm {
        margin-bottom:6rem!important
    }
}

@media (min-width: 1024px) {
    .u-p-8-md {
        padding:6rem!important
    }
}

@media (min-width: 1024px) {
    .u-mb-9-md {
        margin-bottom:7rem!important
    }
}

@media (min-width: 540px) {
    .u-mt-10-sm {
        margin-top:10rem!important
    }

    .u-mb-10-sm {
        margin-bottom: 10rem!important
    }
}

@media (min-width: 1024px) {
    .u-mb-10-md {
        margin-bottom:10rem!important
    }
}

@media (min-width: 540px) {
    .u-mb-15-sm {
        margin-bottom:15rem!important
    }
}

@media (min-width: 540px) {
    .u-mb-20-sm {
        margin-bottom:20rem!important
    }
}

@media (min-width: 1024px) {
    .u-mb-30-md {
        margin-bottom:30rem!important
    }
}

.u-t-bold {
    font-weight: 600
}

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

.u-t-color-teal {
    color: #3eceb3
}

.u-t-color-yellow {
    color: #ffcc2a
}

.u-t-color-blue {
    color: #4aa7ff
}

.u-t-h3 {
    font-size: 1.33333rem
}

@media (min-width: 540px) {
    .u-t-right-sm {
        text-align:right
    }
}

.u-d-flex {
    display: flex
}

.u-d-block {
    display: block
}

.u-d-inline-block {
    display: inline-block
}

.u-d-none {
    display: none
}

@media (min-width: 375px) {
    .u-d-inline-block-xsm {
        display:inline-block
    }
}

@media (min-width: 540px) {
    .u-d-flex-sm {
        display:flex
    }

    .u-d-block-sm {
        display: block
    }

    .u-d-inline-block-sm {
        display: inline-block
    }
}

@media (min-width: 1024px) {
    .u-d-flex-md {
        display:flex
    }

    .u-d-none-md {
        display: none
    }
}

.u-h-auto {
    height: auto
}

.u-lh-1 {
    line-height: 1
}

.u-lh-normal {
    line-height: normal
}

.u-w-100 {
    width: 100%!important
}

.u-pos-r {
    position: relative
}

.u-pos-a,.u-pos-a-center {
    position: absolute
}

.u-pos-a-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.u-overflow-h {
    overflow: hidden
}

body {
    font-family: neue-haas-grotesk-display,sans-serif;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #f9f8f7
}

body:not(.is-touch) {
    overscroll-behavior-y: none
}

::-moz-selection {
    background: #ffcc2a;
    color: #fff
}

::selection {
    background: #ffcc2a;
    color: #fff
}

:root {
    --vh: 100%
}

body:not(.is-touch) [asscroll-container] {
    min-height: 100%
}

[asscroll-container] {
    overflow: hidden
}

@-moz-document url-prefix() {
    body:not(.is-touch) [asscroll-container] {
        transform: rotate(.001deg)
    }

    body:not(.is-touch) [asscroll-container]>* {
        will-change: unset!important
    }
}

main {
    padding-top: 7.5rem;
    min-height: 100%
}

main.main--jungle {
    padding-top: 0
}

.lazy-wrap {
    display: block;
    overflow: hidden;
    position: relative;
    contain: content
}

.lazy-wrap:before {
    content: "";
    display: block;
    padding-bottom: var(--aspect)
}

.lazy-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.lazy-wrap img:first-of-type {
    -webkit-filter: blur(1vw);
    filter: blur(1vw);
    transform: scale(1.05)
}

.lazy-wrap img:nth-of-type(2) {
    opacity: 0
}

@media (min-width: 768px) {
    .full-width-two-column-images .lazy-wrap:before {
        padding-bottom:140%
    }
}

.full-width-two-column-images .lazy-wrap img {
    -o-object-fit: cover;
    object-fit: cover
}

body:not(.is-touch) [data-parallax]>* {
    margin-top: -10%
}

/* Fresh Loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loader img {
    width: 150px;
    height: auto;
    margin-bottom: 30px;
    animation: fadeIn 1s ease-in-out;
}

#loader h1 {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 8px;
    color: #000;
    margin: 0;
    animation: fadeIn 1s ease-in-out 0.3s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    #loader img {
        width: 120px;
    }
    
    #loader h1 {
        font-size: 1.5rem;
        letter-spacing: 6px;
    }
}

@media (max-width: 480px) {
    #loader img {
        width: 100px;
    }
    
    #loader h1 {
        font-size: 1.2rem;
        letter-spacing: 4px;
    }
}

.link-hover {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom
}

.link-hover-char:after {
    content: attr(data-char);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%)
}

@-moz-document url-prefix() {
    .link-hover {
        transform: rotate(.001deg)
    }
}

#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 950;
    pointer-events: none
}

.is-touch #cursor {
    display: none
}

#cursor .circle {
    width: 6rem;
    height: 6rem;
    display: block;
    flex-shrink: 0;
    max-width: none;
    overflow: visible
}

#page-wipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
    overflow: hidden
}

#page-wipe>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateY(100%)
}

#page-wipe .w {
    background-color: #f9f8f7
}

#page-wipe .b {
    background-color: #000
}

#p-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 90
}

body.is-touch #p-cover {
    display: none
}

.project-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden
}

@media (min-width: 768px) {
    .project-menu {
        background-color:#000;
        height: 0%;
        bottom: 0;
        top: auto
    }
}

.project-menu__list-wrap {
    position: relative;
    width: 60%;
    z-index: 4;
    transform: translateY(100%)
}

@media (min-width: 1920px) {
    .project-menu__list-wrap {
        width:55%
    }
}

@media (max-width: 767px) {
    .project-menu__list-wrap {
        width:100%;
        overflow-y: scroll;
        height: calc(100% - 6rem);
        transform: none;
        -ms-scroll-chaining: none;
        overscroll-behavior: none
    }
}

.project-menu ol {
    position: relative;
    padding: calc(25vh - 4rem) 0 calc(25vh - 4rem) 15%;
    list-style-type: none;
    counter-reset: projectList;
    z-index: 3
}

@media (min-width: 2500px) {
    .project-menu ol {
        padding-left:10%
    }
}

@media (max-width: 767px) {
    .project-menu ol {
        padding:8rem 1.5rem 4rem
    }
}

.project-menu ol li {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1.3rem 0
}

@media (min-width: 768px) {
    .project-menu ol li {
        display:block
    }
}

@media (min-width: 1024px) {
    .project-menu ol li {
        padding:1.5rem 0
    }
}

@media (min-width: 1440px) {
    .project-menu ol li {
        padding:2rem 0
    }
}

@media (min-width: 1920px) {
    .project-menu ol li {
        padding:2.5rem 0
    }
}

@media (min-width: 2500px) {
    .project-menu ol li {
        padding:3rem 0
    }
}

.project-menu ol li span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem
}

@media (min-width: 768px) {
    .project-menu ol li span {
        display:block;
        position: absolute;
        left: -3rem;
        top: 48%;
        transform: translateY(-50%);
        margin-right: 0;
        opacity: 0
    }
}

@media (min-width: 1024px) {
    .project-menu ol li span {
        left:-4rem
    }
}

@media (min-width: 1440px) {
    .project-menu ol li span {
        left:-5rem
    }
}

.project-menu ol li span:before {
    display: block;
    counter-increment: projectList 1;
    color: #3eceb3;
    content: "0" counter(projectList,decimal-leading-zero);
    font-size: 1rem;
    font-weight: 600
}

@media (min-width: 768px) {
    .project-menu ol li span:before {
        font-size:1.1rem
    }
}

@media (min-width: 1024px) {
    .project-menu ol li span:before {
        font-size:1.4rem
    }
}

@media (min-width: 1440px) {
    .project-menu ol li span:before {
        font-size:1.6rem
    }
}

.project-menu ol li a {
    display: inline-block;
    vertical-align: middle;
    font-family: roc-grotesk,sans-serif;
    font-size: 1.9rem;
    letter-spacing: -.1rem;
    color: #000;
    transition: none
}

@media (min-width: 375px) {
    .project-menu ol li a {
        font-size:2.3rem
    }
}

@media (min-width: 540px) {
    .project-menu ol li a {
        font-size:3rem
    }
}

@media (min-width: 768px) {
    .project-menu ol li a {
        display:block;
        -webkit-text-stroke: 1px #000;
        color: transparent;
        font-size: 2.7rem
    }
}

@media (min-width: 1024px) {
    .project-menu ol li a {
        -webkit-text-stroke:1.5px #000;
        font-size: 3.5rem;
        letter-spacing: -.2rem
    }
}

@media (min-width: 1440px) {
    .project-menu ol li a {
        font-size:4.8rem;
        letter-spacing: -.3rem
    }
}

@media (min-width: 1920px) {
    .project-menu ol li a {
        font-size:5rem
    }
}

@media (min-width: 2500px) {
    .project-menu ol li a {
        font-size:6.25rem;
        letter-spacing: -.4rem
    }
}

.project-menu ol li svg {
    display: none;
    fill: #ffcc2a;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 1rem;
    vertical-align: middle
}

@media (min-width: 768px) {
    .project-menu ol li svg {
        display:block;
        position: absolute;
        right: 1.5rem;
        top: 46%;
        transform: translate3d(-15%,-50%,0);
        width: 2rem;
        height: auto;
        margin-left: 0;
        opacity: 0
    }
}

@media (min-width: 1024px) {
    .project-menu ol li svg {
        width:3rem;
        right: 2rem
    }
}

@media (min-width: 1440px) {
    .project-menu ol li svg {
        width:4rem;
        right: 3rem
    }
}

@media (min-width: 1920px) {
    .project-menu ol li svg {
        width:5rem;
        right: 4rem
    }
}

.project-menu__images {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    transform: translateY(100%);
    overflow: hidden;
    z-index: 3
}

@media (min-width: 1920px) {
    .project-menu__images {
        width:45%
    }
}

@media (min-width: 768px) {
    .project-menu__images {
        display:block
    }
}

.project-menu__images>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%
}

.project-menu__images>div>div {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0,100.5%,0)
}

.project-menu__images>div>div.left {
    left: 0
}

.project-menu__images>div>div.right {
    right: 0
}

.project-menu__images>div>div.right>div {
    position: absolute;
    right: 0
}

.project-menu__images>div>div>div {
    height: 100%;
    width: 200%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

.project-menu.toggling .project-menu__images>div {
    visibility: hidden
}

.project-menu.toggling .project-menu__images>div.active {
    visibility: visible
}

.project-menu .project-menu-toggle {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    opacity: 0;
    z-index: 4
}

.project-menu .bg-s {
    display: none;
    position: absolute;
    top: -14%;
    right: 40%;
    width: 30%;
    transform: rotate(20deg);
    opacity: 0;
    visibility: hidden;
    z-index: 2
}

@media (min-width: 768px) {
    .project-menu .bg-s {
        display:block
    }
}

.project-menu .bg-s svg {
    opacity: .5
}

.project-menu .bg-s path {
    stroke-dasharray: 4690px;
    stroke-dashoffset: 2000px
}

.project-menu__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f8f7;
    z-index: 1
}

@media (max-width: 767px) {
    .project-menu__bg {
        display:none
    }
}

.project-menu__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 600;
    font-family: neue-haas-grotesk-display,sans-serif;
    z-index: 2
}

@media (min-width: 768px) {
    .project-menu__footer {
        display:none
    }
}

.project-menu-toggle {
    display: flex;
    align-items: center
}

@media (max-width: 539px) {
    .project-menu-toggle {
        display:none
    }
}

.project-menu-toggle:hover {
    cursor: pointer
}

.project-menu-toggle:hover .nav-button .nav-button__box__line rect {
    transform: scaleX(.3)
}

.project-menu-toggle:hover .nav-button.active .nav-button__box__line rect {
    transform: rotate(45deg) scaleX(.3)
}

.project-menu-toggle>span {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 1.3rem
}

.project-menu-toggle>span:first-child {
    margin-right: 1.5rem
}

@-moz-document url-prefix() {
    .project-menu-toggle>span {
        transform: rotate(.001deg)
    }
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 0;
    z-index: 10001
}

@media (min-width: 1024px) {
    .site-header {
        padding:3.5rem 0 2rem
    }
}

.site-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%
}

.site-header__inner>.nav-button {
    position: relative;
    z-index: 3;
    margin-right: -.5rem
}

@media (min-width: 768px) {
    .site-header__inner>.nav-button {
        display:none
    }
}

.site-header__logo {
    position: relative;
    z-index: 3
}

.site-header__logo a {
    display: block
}

.site-header__logo svg {
    display: block;
    width: 8rem;
    height: 2rem;
    transition: fill .4s cubic-bezier(.455,.03,.515,.955);
    fill: #000;
    pointer-events: none
}

.light-header:not(.mobile-nav-open) .site-header__logo:not(.dark) svg {
    fill: #fff!important
}

.mobile-nav-open .site-header__logo svg,.site-header__logo.dark svg {
    fill: #000!important
}

.site-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -1;
    transform: translateY(-100%);
    margin-top: -2rem
}

@media (min-width: 1024px) {
    .site-header__bg {
        margin-top:-1.5rem
    }
}

.site-header.floating .site-header__logo svg {
    fill: #fff
}

.navbar {
    position: relative;
    z-index: 3
}

.navbar--jungle ul li a {
    font-family: neue-haas-grotesk-display,sans-serif;
    font-size: .875rem;
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .navbar--jungle ul li a {
        font-size:1.47727rem
    }
}

@media (max-width: 767px) {
    .navbar:not(.navbar--jungle) {
        transform:none!important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        visibility: hidden
    }
}

.navbar:not(.navbar--jungle) ul {
    display: flex
}

@media (max-width: 767px) {
    .navbar:not(.navbar--jungle) ul {
        position:fixed;
        top: 5.125rem;
        left: 0;
        width: 100%;
        height: calc(100% - 11.125rem);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 4
    }
}

.navbar:not(.navbar--jungle) ul li:not(:last-child) {
    margin-bottom: 2.5rem
}

@media (min-width: 768px) {
    .navbar:not(.navbar--jungle) ul li:not(:last-child) {
        margin-right:3rem;
        margin-bottom: 0
    }
}

@media (min-width: 1024px) {
    .navbar:not(.navbar--jungle) ul li:not(:last-child) {
        margin-right:4.5rem
    }
}

.navbar:not(.navbar--jungle) ul li a,.navbar:not(.navbar--jungle) ul li span {
    display: block;
    font-weight: 400;
    font-size: 3rem;
    font-family: roc-grotesk,sans-serif;
    color: #000;
    letter-spacing: -.1rem;
    cursor: pointer
}

@media (min-width: 768px) {
    .navbar:not(.navbar--jungle) ul li a,.navbar:not(.navbar--jungle) ul li span {
        font-weight:600;
        font-size: 1.3rem;
        letter-spacing: 0;
        font-family: neue-haas-grotesk-display,sans-serif;
        transition: color .4s cubic-bezier(.455,.03,.515,.955);
        margin-bottom: 0
    }

    .light-header .navbar:not(.navbar--jungle) ul li a,.light-header .navbar:not(.navbar--jungle) ul li span,.site-header.floating .navbar:not(.navbar--jungle) ul li a,.site-header.floating .navbar:not(.navbar--jungle) ul li span {
        color: #fff
    }
}

.navbar .bg-s {
    position: absolute;
    top: -15%;
    right: -4%;
    width: 60%;
    transform: rotate(20deg);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

@media (min-width: 768px) {
    .navbar .bg-s {
        display:none
    }
}

.navbar .bg-s svg {
    opacity: .5
}

.navbar .bg-s path {
    stroke-dasharray: 4690px;
    stroke-dashoffset: 2000px
}

.navbar__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0,100%,0)
}

@media (min-width: 768px) {
    .navbar__bg {
        display:none
    }
}

.navbar__bg--light {
    background-color: #f9f8f7;
    z-index: 2
}

.navbar__bg--dark {
    background-color: #000;
    z-index: 1
}

.navbar__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    z-index: 2
}

@media (min-width: 768px) {
    .navbar__footer {
        display:none
    }
}

.navbar__footer a {
    display: block;
    margin: 0 1.5rem
}

.navbar__footer a svg {
    fill: #fff;
    width: 1.5rem;
    height: 1.5rem
}

@-moz-document url-prefix() {
    .navbar ul li {
        transform: rotate(.001deg)
    }
}

.nav-button {
    display: block
}

@media (max-width: 539px) {
    .nav-button {
        padding:.5rem
    }
}

.nav-button__box {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: relative;
    padding: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition-property: border-color;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(1,0,0,1)
}

.light-header .nav-button__box,.nav-button--white .nav-button__box,.site-header.floating .nav-button__box {
    border-color: #fff
}

.nav-button__box__line {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.nav-button__box__line rect {
    transform-origin: center;
    transition: transform .9s cubic-bezier(1,0,0,1),fill .4s cubic-bezier(1,0,0,1) 0s;
    fill: #000
}

.light-header .nav-button__box__line rect,.nav-button--white .nav-button__box__line rect,.site-header.floating .nav-button__box__line rect {
    fill: #fff
}

.nav-button.active .nav-button__box {
    border-color: #000
}

.nav-button.active .nav-button__box:hover rect {
    transform: rotate(45deg) scaleX(.3)
}

.nav-button.active .nav-button__box__line rect {
    transform: rotate(45deg);
    fill: #000
}

.nav-button.active.nav-button--white .nav-button__box {
    border-color: #fff
}

.nav-button.active.nav-button--white .nav-button__box__line rect {
    fill: #fff
}

.home-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 8rem);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y
}

@media (min-width: 768px) {
    .home-slider {
        height:100vh
    }
}

.home-slider__slide {
    visibility: hidden;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none
}

.home-slider__slide.active {
    visibility: visible
}

.home-slider__slide__title {
    font-size: 3.2rem;
    margin: 0;
    font-weight: 400;
    letter-spacing: -.2rem;
    text-align: center;
    line-height: 1;
    padding: 0 1.5rem
}

@media (min-width: 375px) {
    .home-slider__slide__title {
        font-size:4.4rem;
        padding: 0 4rem;
        letter-spacing: -.3rem
    }
}

@media (min-width: 1024px) {
    .home-slider__slide__title {
        font-size:11rem
    }
}

.home-slider__slide__title a {
    display: block;
    color: #fff;
    -webkit-user-drag: none;
    pointer-events: auto
}

.home-slider__slide__video {
    position: absolute;
    height: 0
}

.home-slider__slide__cta {
    display: block;
    text-transform: lowercase;
    font-size: 1.2rem;
    position: absolute;
    color: #fff;
    padding: 0 .4rem .4rem;
    overflow: hidden;
    opacity: .9;
    pointer-events: auto;
    cursor: pointer
}

@media (max-width: 1023px) {
    .home-slider__slide__cta {
        display:none
    }
}

.home-slider__slide__cta span:first-child {
    display: block;
    transform: translateY(100%);
    padding-top: .4rem
}

.home-slider__slide__cta span:last-child {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0)
}

.home-slider__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2
}

@media (max-width: 767px) {
    .home-slider__nav {
        display:none
    }
}

.home-slider__nav__btn {
    height: 70%;
    padding: 2rem;
    display: flex;
    align-items: center;
    pointer-events: all;
    cursor: pointer
}

@media (min-width: 768px) {
    .home-slider__nav__btn {
        padding:4rem
    }
}

.home-slider__nav__btn--prev {
    padding-right: 10rem
}

.home-slider__nav__btn--next {
    padding-left: 10rem
}

@media (min-width: 1024px) {
    .home-slider__nav__btn--prev {
        padding-right:30rem
    }

    .home-slider__nav__btn--next {
        padding-left: 30rem
    }
}

.home-slider__nav__btn span {
    display: block;
    width: 2px;
    height: 3.75rem;
    background-color: #fff;
    transform: scaleY(1)
}

.home-slider .pagination {
    position: absolute;
    bottom: 2rem;
    left: 0
}

@media (min-width: 768px) {
    .home-slider .pagination {
        display:none
    }
}

.home-slider-canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 6rem);
    z-index: 1
}

@media (min-width: 768px) {
    .home-slider-canvas {
        height:100vh
    }
}

@-moz-document url-prefix() {
    .home-slider__slide__cta {
        transform: rotate(.001deg)
    }
}

.home-footer {
    position: fixed;
    top: 100vh;
    transform: translateY(-100%);
    left: 0;
    width: 100%;
    padding: 3rem 0;
    z-index: 2
}

@media (max-width: 767px) {
    .home-footer {
        padding:0;
        height: 6rem;
        background-color: #000;
        top: 100%
    }
}

.home-footer__social-links {
    display: flex;
    align-items: center
}

.home-footer__social-links a {
    display: block
}

.home-footer__social-links a:not(:last-child) {
    margin-right: 1.5rem
}

.home-footer__social-links a svg {
    fill: #fff;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none
}

@media (max-width: 767px) {
    .home-footer .project-menu-toggle,.home-footer__social-links {
        display:none
    }
}

.home-footer__mobile-cta {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%
}

@media (min-width: 768px) {
    .home-footer__mobile-cta {
        display:none
    }
}

.home-footer__mobile-cta a {
    display: block;
    font-size: 1.7rem;
    color: #fff;
    font-weight: 600
}

.project-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    flex-direction: column;
    text-align: center;
    padding: 0 1.5rem
}

.project-footer--yellow {
    background-color: #ffcc2a
}

.project-footer--teal {
    background-color: #3eceb3
}

.project-footer__title {
    display: block;
    position: relative;
    -webkit-text-stroke: 1px #000;
    text-transform: lowercase;
    font-family: roc-grotesk,sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    color: transparent;
    letter-spacing: -.1rem;
    margin-bottom: 1rem;
    line-height: 1;
    z-index: 2
}

@media (min-width: 540px) {
    .project-footer__title {
        font-size:5rem;
        letter-spacing: -.2rem;
        margin-bottom: 1rem
    }
}

@media (min-width: 1024px) {
    .project-footer__title {
        font-size:7.5rem
    }
}

.project-footer__title__outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #000
}

.project-footer__title__filled {
    color: #000;
    transform: translateY(-100%)
}

.project-footer__title__clip,.project-footer__title__filled {
    display: block;
    transition: transform 1.5s cubic-bezier(.19,1,.22,1)
}

.project-footer__title__clip {
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translateY(100%);
    pointer-events: none
}

.project-footer--about .project-footer__title {
    margin-bottom: 0
}

.project-footer__name {
    position: relative;
    font-family: roc-grotesk,sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -.1rem;
    color: #fff;
    line-height: 1;
    z-index: 2
}

@media (min-width: 540px) {
    .project-footer__name {
        font-size:2rem
    }
}

.project-footer__name a {
    display: inline-block;
    font-weight: 400;
    color: #fff
}

.project-footer footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    font-weight: 600
}

@media (min-width: 540px) {
    .project-footer footer {
        flex-direction:row;
        padding: 3rem
    }
}

@media (max-width: 539px) {
    .project-footer__social {
        margin-top:.5rem
    }
}

.project-footer__social a {
    position: relative;
    display: inline-block
}

.project-footer__social a:not(:last-child) {
    margin-right: 1rem
}

.project-footer__social a:not(:last-child):after {
    content: "";
    display: block;
    width: .2rem;
    height: .2rem;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: -.7rem;
    border-radius: 100%
}

.about-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: -7.5rem;
    width: 100%;
    height: 100vh;
    opacity: 0
}

.about-header:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.02);
    z-index: 2
}

.about-header h1 {
    position: relative;
    z-index: 3;
    color: #fff;
    margin: 0;
    font-size: 3.5rem;
    text-align: center;
    line-height: .9
}

@media (min-width: 540px) {
    .about-header h1 {
        font-size:6rem
    }
}

@media (min-width: 1024px) {
    .about-header h1 {
        font-size:9rem
    }
}

@media (min-width: 1440px) {
    .about-header h1 {
        font-size:11rem;
        padding: 7rem
    }
}

.about-header__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1
}

.about-header__video {
    position: absolute;
    height: 0
}

.hover-images .services__images {
    z-index: 1
}

body:not(.is-touch) .hover-images:hover .project-footer__title__clip,body:not(.is-touch) .hover-images:hover .project-footer__title__filled,body:not(.is-touch) .hover-images:hover .services__images>span>span {
    transform: translateY(0)
}

body:not(.is-touch) .hover-images:hover .services__images img {
    transform: translateY(0) scale(1)
}

.hover-images .services__images>span>span,.hover-images .services__images img {
    transition: transform .5s cubic-bezier(.19,1,.22,1)
}

.hover-images:hover .services__images>span>span,.hover-images:hover .services__images img {
    transition: transform 1.4s cubic-bezier(.19,1,.22,1)
}

.fourzerofour svg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80vw
}

@media (min-width: 540px) {
    .fourzerofour svg {
        width:50vw
    }
}

.fourzerofour svg path {
    fill: none;
    stroke: #3eceb3;
    stroke-miterlimit: 10;
    stroke-dasharray: 1140 130;
    -webkit-animation-name: fourZeroFourLoop;
    animation-name: fourZeroFourLoop;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@-webkit-keyframes fourZeroFourLoop {
    0% {
        stroke-dashoffset: 0%
    }

    to {
        stroke-dashoffset: 593.4%
    }
}

@keyframes fourZeroFourLoop {
    0% {
        stroke-dashoffset: 0%
    }

    to {
        stroke-dashoffset: 593.4%
    }
}

@-moz-document url-prefix() {
    [animate-from]:not(.bg-s-wrapper) {
        transform: rotate(.001deg)
    }
}


.site-header__logo__svg{
    height: 65px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    filter: brightness(0) invert(0);
}

/* White logo for services page only */
.services-page .site-header__logo__svg {
    filter: brightness(0) invert(1);
}

.site-header__logo {
    display: flex;
    align-items: center;
}

.site-header__logo a {
    display: flex;
    align-items: center;
}

/* Sticky Contact Buttons */
.sticky-contact-buttons {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background-color: #000;
    border-radius: 8px;
    padding: 10px 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 2px solid #000;
}

.contact-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    /* Make inner button perfectly round */
    border-radius: 50%;
    overflow: hidden;
}

.contact-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
    fill: white;
}

.whatsapp-btn {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
    border-radius: 50%;
    background-color: transparent;
}

.call-btn {
    padding-top: 0;
    border-radius: 50%;
    background-color: transparent;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sticky-contact-buttons {
        right: 0;
        padding: 8px 4px;
    }
    
    .contact-btn {
        width: 45px;
        height: 45px;
    }
    
    .contact-btn svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .whatsapp-btn {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .sticky-contact-buttons {
        right: 0;
        padding: 6px 3px;
    }
    
    .contact-btn {
        width: 40px;
        height: 40px;
    }
    
    .contact-btn svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .whatsapp-btn {
        padding-bottom: 6px;
        margin-bottom: 6px;
    }
}

/* Services Page Styles - Dark Theme */
.services-page {
    overflow-x: hidden;
    background-color: #000;
}

.services-main {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #000;
}

.services-container {
    display: flex;
    /* Fill full viewport; right image should sit flush under header */
    height: 100vh;
    /* Do not push the whole container down */
    margin-top: 0;
    padding-top: 0;
    background-color: #000;
}

.services-panel {
    width: 50%;
    background: #000;
    display: flex;
    align-items: center;
    /* Push ONLY the left content slightly down below the logo/header */
    padding: calc(60px + 80px) 40px 60px;
    /* Match container height */
    height: 100%;
}

.services-list {
    width: 100%;
}

.service-item {
    display: flex;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.service-item:last-child {
    border-bottom: none;
}

.service-item:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 20px;
}

.service-item.active {
    background: rgba(255, 255, 255, 0.1);
}

.service-number {
    font-size: 2rem;
    font-weight: 200;
    color: #ffcc2a;
    margin-right: 30px;
    min-width: 60px;
}

.service-content {
    flex: 1;
}

.service-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: #fff;
    letter-spacing: -0.5px;
}

.service-description {
    font-size: 1.1rem;
    color: #ccc;
    margin: 0;
    line-height: 1.5;
}

.service-arrow {
    font-size: 2rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.service-item:hover .service-arrow {
    transform: translateX(10px);
    color: #ffcc2a;
}

.services-image-panel {
    width: 50%;
    position: relative;
    overflow: hidden;
    /* Match container height */
    height: 100%;
}

.service-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Smooth crossfade + subtle parallax scale */
    transform: scale(1.04);
    filter: blur(1px) saturate(0.95);
    transition: opacity 0.6s ease, transform 0.9s ease, filter 0.6s ease;
    will-change: opacity, transform, filter;
}

.service-image.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
}

.service-image img {
    width: 100%;
    /* Force image to cover full viewport height */
    height: 100%;
    object-fit: cover;
}

.image-overlay {
    position: absolute;
    bottom: 60px;
    left: 60px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-overlay h3 {
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 10px 0;
}

.image-overlay p {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.9;
}

/* CSS-only hover switching of right images based on left list hover */
/* When hovering a specific service item, show the matching image */
.services-panel:has(.service-item[data-service="construction"]:hover) ~ .services-image-panel .service-image { opacity: 0; }
.services-panel:has(.service-item[data-service="construction"]:hover) ~ .services-image-panel .service-image[data-service="construction"] {
    opacity: 1; transform: scale(1); filter: blur(0) saturate(1);
}

.services-panel:has(.service-item[data-service="architecture"]:hover) ~ .services-image-panel .service-image { opacity: 0; }
.services-panel:has(.service-item[data-service="architecture"]:hover) ~ .services-image-panel .service-image[data-service="architecture"] {
    opacity: 1; transform: scale(1); filter: blur(0) saturate(1);
}

.services-panel:has(.service-item[data-service="interior"]:hover) ~ .services-image-panel .service-image { opacity: 0; }
.services-panel:has(.service-item[data-service="interior"]:hover) ~ .services-image-panel .service-image[data-service="interior"] {
    opacity: 1; transform: scale(1); filter: blur(0) saturate(1);
}

/* Full Screen Overlay - Dark Theme */
.service-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.service-fullscreen::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.service-fullscreen.active {
    transform: translateX(0);
}

/* CSS target-based activation (no JS) */
.service-fullscreen:has(.fullscreen-content:target) {
    transform: translateX(0);
}

/* Make header background dark when an overlay is open */
body:has(#service-fullscreen .fullscreen-content:target) .site-header {
    background: #000;
}
body:has(#construction:target) .site-header {
    background: #000;
    /* Ensure header stays above fullscreen overlay on Construction */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10050;
}

/* Black navbar background when fullscreen is active */
.service-fullscreen.active ~ .site-header {
    background: #000;
}

.fullscreen-back {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    color: #ffcc2a;
    transition: all 0.3s ease;
    line-height: 1;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
}

.fullscreen-back:hover {
    color: #fff;
    transform: translateY(-50%) translateX(-10px);
}

/* Show back button when overlay is active via :target */
body:has(#service-fullscreen .fullscreen-content:target) .fullscreen-back {
    opacity: 1;
    visibility: visible;
}

.fullscreen-content {
    display: none;
    padding: 160px 80px 80px;
    max-width: 1500px;
    margin: 0 auto;
}

.fullscreen-content.active {
    display: block;
}
.service-fullscreen .fullscreen-content:target {
    display: block;
}

.fullscreen-header {
    margin-bottom: 60px;
    text-align: center;
}

.fullscreen-header h1 {
    font-size: 4rem;
    font-weight: 200;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    color: #fff;
}

.fullscreen-subtitle {
    font-size: 1.5rem;
    color: #ccc;
    margin: 0;
    font-weight: 300;
}

.fullscreen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.fullscreen-text h3 {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 30px;
    color: #fff;
}

.fullscreen-text ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.fullscreen-text li {
    padding: 10px 0;
    border-bottom: 1px solid #333;
    font-size: 1.1rem;
    color: #fff;
}

.fullscreen-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ccc;
}

.fullscreen-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

/* Responsive Design */
@media (min-width: 1025px) and (max-width: 1200px) {
    .services-panel { padding: calc(60px + 60px) 30px 40px; }
    .service-title { font-size: 2.2rem; }
    /* Slightly reduce fullscreen content padding on medium-large screens */
    .fullscreen-content { padding: 140px 60px 70px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .services-container { height: auto; }
    .services-image-panel { height: 45vh; }
    .service-number { font-size: 1.6rem; margin-right: 20px; min-width: 48px; }
    .service-title { font-size: 2rem; }
    .service-description { font-size: 1rem; }
    .service-arrow { font-size: 1.6rem; }
}
@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
        height: auto;
    }
    
    .services-panel,
    .services-image-panel {
        width: 100%;
    }
    
    .services-image-panel {
        height: 300px;
    }
    
    .services-panel {
        padding: 40px 20px;
    }
    
    .service-title {
        font-size: 2rem;
    }
    
    .fullscreen-content {
        padding: 180px 40px 60px;
    }
    
    
    .fullscreen-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .fullscreen-header {
        margin-bottom: 40px;
    }
    
    .fullscreen-header h1 { 
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .fullscreen-subtitle {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .fullscreen-back { top: 80px; left: 16px; transform: none; font-size: 2.5rem; }
    /* Hide back arrow on small screens as requested */
    .fullscreen-back { display: none !important; }
}

@media (max-width: 576px) {
    .services-image-panel { height: 260px; }
    .service-number { font-size: 1.2rem; margin-right: 12px; min-width: 36px; }
    .service-title { font-size: 1.6rem; }
    .service-description { font-size: 0.9rem; }
    .fullscreen-back { top: 60px; font-size: 2rem; }
    
    .fullscreen-content {
        padding: 140px 20px 40px;
    }
    
    .fullscreen-header {
        margin-bottom: 30px;
    }
    
    .fullscreen-header h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .fullscreen-subtitle {
        font-size: 1rem;
        line-height: 1.4;
        padding: 0 10px;
    }
}

/* Construction Packages Styles */
.construction-packages {
    padding: 60px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.package-header {
    text-align: center;
    margin-bottom: 60px;
}

.package-header h1 {
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
    margin: 0;
    letter-spacing: -1px;
}

.packages-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    justify-content: center;
    flex-wrap: nowrap;
}

.package-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 1 1 25%;
    max-width: 25%;
}

.package-card:hover {
    transform: translateY(-5px);
    border-color: #ffcc2a;
    box-shadow: 0 10px 30px rgba(255, 204, 42, 0.1);
}

.package-card.featured {
    border-color: #ffcc2a;
    box-shadow: 0 0 20px rgba(255, 204, 42, 0.2);
}

.package-head {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    padding: 30px 20px;
    text-align: center;
    border-bottom: 2px solid #333;
    border-radius: 16px 16px 0 0;
}

.package-card.featured .package-head {
    background: linear-gradient(135deg, #ffcc2a 0%, #e6b800 100%);
}

.package-head h3 {
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    margin: 0 0 15px 0;
}

.package-card.featured .package-head h3 {
    color: #000;
}

.package-head h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #ffcc2a;
    margin: 0;
}

.package-card.featured .package-head h2 {
    color: #000;
}

.package-head small {
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.8;
}

.package-body {
    padding: 30px 20px;
    flex: 1;
    overflow: visible;
    border-radius: 0 0 16px 16px;
}

.package-section {
    margin-bottom: 15px;
    border-bottom: 1px solid #222;
    padding-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.package-section:last-child {
    border-bottom: none;
}

.package-section summary {
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    padding: 10px 0;
    list-style: none;
    position: relative;
    transition: color 0.3s ease;
}

.package-section summary::-webkit-details-marker {
    display: none;
}

.package-section summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffcc2a;
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease, content 0.3s ease;
}

.package-section[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}

.package-section summary:hover {
    color: #ffcc2a;
}

.package-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    transform: translateY(-10px);
}

.package-section[open] ul {
    opacity: 1;
    max-height: 2000px;
    padding: 15px 0 0 0;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.1s, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, transform 0.4s ease 0.1s;
}

.package-section li {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 5px 0 5px 20px;
    position: relative;
}

.package-section li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ffcc2a;
    font-weight: bold;
}

.package-section li b {
    color: #fff;
}

.package-footer {
    padding: 20px;
    border-top: 1px solid #333;
    text-align: center;
}

.package-btn {
    display: inline-block;
    padding: 12px 40px;
    background: #ffcc2a;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.package-btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 204, 42, 0.3);
}

/* Responsive Packages Design */
@media (min-width: 769px) and (max-width: 1024px) {
    .packages-grid { flex-wrap: wrap; gap: 18px; }
    .package-card { max-width: 32%; flex: 1 1 32%; }
}
@media (max-width: 1200px) {
    .packages-grid {
        gap: 15px;
    }
    
    .package-card {
        max-width: 25%;
    }

    /* Reduce overall padding for construction packages section */
    .construction-packages {
        padding: 50px 30px;
    }
}

@media (max-width: 768px) {
    .construction-packages {
        padding: 40px 20px;
    }
    
    .package-header h1 {
        font-size: 2rem;
    }
    
    .packages-grid {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .package-card {
        max-width: 48%;
        flex: 1 1 48%;
    }
    
    .package-head h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .packages-grid { flex-wrap: wrap; gap: 16px; }
    .package-card { max-width: 100%; flex: 1 1 100%; }
}

@media (max-width: 480px) {
    .package-header h1 {
        font-size: 1.5rem;
    }
    
    .package-head {
        padding: 20px 15px;
    }
    
    .package-head h3 {
        font-size: 1.2rem;
    }
    
    .package-head h2 {
        font-size: 1.8rem;
    }
    
    .package-body {
        padding: 20px 15px;
    }
    
    .package-section summary {
        font-size: 1rem;
    }
}


/* Services page – force navbar text to white only on this page */
.services-page .site-header .navbar a,
.services-page .site-header .navbar ul li a,
.services-page .site-header .navbar ul li span,
.services-page .site-header nav ul li a,
.services-page .site-header nav ul li span {
    color: #fff !important;
}

.services-page .site-header .navbar a:hover,
.services-page .site-header .navbar ul li a:hover,
.services-page .site-header .navbar ul li span:hover,
.services-page .site-header nav ul li a:hover,
.services-page .site-header nav ul li span:hover {
    color: #ffcc2a !important;
}

.services-page .site-header .navbar .active,
.services-page .site-header nav .active {
    color: #ffcc2a !important;
}

/* Services page nav button (hamburger menu) styling */
.services-page .site-header .nav-button__box {
    border-color: #fff !important;
}

.services-page .site-header .nav-button__box__line rect {
    fill: #fff !important;
}




/* Mobile menu toggle and overlay for Services page */
.mobile-menu-toggle {
    display: none;
    color: #ffcc2a;
    font-size: 1.8rem;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 204, 42, 0.4);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-left: auto;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 204, 42, 0.1);
    color: #fff;
    border-color: #ffcc2a;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: #0b0b0b;
    border-left: 1px solid #222;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 10060; /* above header when menu is open */
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.mobile-menu:target {
    transform: translateX(0);
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

.mobile-menu-close {
    align-self: flex-end;
    color: #ffcc2a;
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
    margin-bottom: 10px;
}

.mobile-menu-list {
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
}

.mobile-menu-list li {
    border-bottom: 1px solid #222;
}

.mobile-menu-list li a {
    display: block;
    padding: 16px 4px;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}

.mobile-menu-list li a:hover,
.mobile-menu-list li a.active {
    color: #ffcc2a;
}

/* Responsive navbar styling for services page */
@media (max-width: 768px) {
    /* Ensure header stays above fullscreen content and shows menu properly */
    .services-page .site-header { 
        position: sticky; 
        top: 0; 
        z-index: 10003; 
        background: #000; 
    }
    
    /* Make sure mobile nav button is visible on services page */
    .services-page .site-header .nav-button {
        display: block;
    }
    
    /* Show navbar when menu is open on services page */
    .services-page:not(.mobile-nav-open) .site-header .navbar ul {
        display: none;
    }
    
    .services-page.mobile-nav-open .site-header .navbar {
        visibility: visible;
        background: #fff;
    }
    
    .services-page.mobile-nav-open .site-header .navbar ul {
        display: flex !important;
    }
    
    /* White background with black text for mobile menu on services page */
    .services-page.mobile-nav-open .site-header .navbar a,
    .services-page.mobile-nav-open .site-header .navbar ul li a,
    .services-page.mobile-nav-open .site-header .navbar ul li span {
        color: #000 !important;
    }
    
    .services-page.mobile-nav-open .site-header .navbar a:hover,
    .services-page.mobile-nav-open .site-header .navbar ul li a:hover,
    .services-page.mobile-nav-open .site-header .navbar ul li span:hover {
        color: #ffcc2a !important;
    }
    
    /* Black hamburger icon when menu is open */
    .services-page.mobile-nav-open .site-header .nav-button__box {
        border-color: #000 !important;
    }
    
    .services-page.mobile-nav-open .site-header .nav-button__box__line rect {
        fill: #000 !important;
    }
    
    /* White background for navbar backgrounds */
    .services-page.mobile-nav-open .site-header .navbar__bg--light {
        background-color: #fff;
    }
}

/* Price Estimator Cards for Interior Section */
.price-estimator-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.estimator-card {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.estimator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 42, 0.1), transparent);
    transition: left 0.6s ease;
}

.estimator-card:hover::before {
    left: 100%;
}

.estimator-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255, 204, 42, 0.2);
    border-color: #ffcc2a;
}

.card-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #ffcc2a, #e6b800);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.estimator-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(255, 204, 42, 0.3);
}

.card-icon {
    width: 40px;
    height: 40px;
    color: #000;
}

.estimator-card h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.estimator-card p {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

.calculate-btn {
    background: #ffcc2a;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.calculate-btn span {
    margin-left: 8px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.calculate-btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 204, 42, 0.4);
}

.calculate-btn:hover span {
    transform: translateX(3px);
}

.calculate-btn:active {
    transform: translateY(0);
}

/* Responsive Design for Price Estimator */
@media (max-width: 1024px) {
    .price-estimator-cards {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        padding: 30px 15px;
    }
    
    .estimator-card {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .price-estimator-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px 10px;
    }
    
    .estimator-card {
        padding: 30px 20px;
        margin: 0 auto;
        max-width: 400px;
    }
    
    .estimator-card h3 {
        font-size: 1.3rem;
    }
    
    .card-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .card-icon {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .estimator-card {
        padding: 25px 15px;
    }
    
    .estimator-card h3 {
        font-size: 1.2rem;
    }
    
    .estimator-card p {
        font-size: 0.9rem;
    }
    
    .calculate-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    .card-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .card-icon {
        width: 30px;
        height: 30px;
    }
}

/* Architecture Packages Styling */
.architecture-packages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
    padding: 20px;
}

.arch-package-card {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-radius: 15px;
    padding: 30px 25px;
    text-align: center;
    border: 2px solid #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.arch-package-card.basic:hover {
    border-color: #4a90e2;
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2);
}

.arch-package-card.standard:hover {
    border-color: #50c878;
    box-shadow: 0 10px 30px rgba(80, 200, 120, 0.2);
}

.arch-package-card.premium:hover {
    border-color: #ffcc2a;
    box-shadow: 0 10px 30px rgba(255, 204, 42, 0.2);
}

.arch-package-card.ultra-premium:hover {
    border-color: #e74c3c;
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.2);
}

.package-badge {
    background: #ffcc2a;
    color: #000;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: inline-block;
    letter-spacing: 0.5px;
}

.arch-package-card.basic .package-badge {
    background: #4a90e2;
    color: #fff;
}

.arch-package-card.standard .package-badge {
    background: #50c878;
    color: #fff;
}

.arch-package-card.ultra-premium .package-badge {
    background: #e74c3c;
    color: #fff;
}

.package-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.package-price span {
    font-size: 1rem;
    color: #ccc;
    font-weight: 400;
}

.package-scope {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.4;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delivery-time {
    background: rgba(255, 204, 42, 0.1);
    color: #ffcc2a;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.arch-book-btn {
    background: #ffcc2a;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
}

.arch-book-btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 204, 42, 0.4);
}

/* Package Details Section */
.package-details-section {
    margin-top: 40px;
    padding: 0 20px;
}

.package-details-section h2 {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.comparison-table-wrapper {
    overflow-x: auto;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #333;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ffcc2a #333;
}

.comparison-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.comparison-table-wrapper::-webkit-scrollbar-track {
    background: #333;
    border-radius: 10px;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb {
    background: #ffcc2a;
    border-radius: 10px;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #ffd84d;
}

.package-comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    table-layout: fixed;
}

.package-comparison-table th {
    background: #333;
    color: #fff;
    padding: 15px 10px;
    text-align: center;
    font-weight: 700;
    border-bottom: 2px solid #ffcc2a;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.package-comparison-table th:first-child {
    text-align: left;
    width: 40%;
}

.package-comparison-table th:not(:first-child) {
    width: 15%;
}

.package-comparison-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #444;
    color: #ccc;
    font-size: 0.9rem;
    word-wrap: break-word;
}

.package-comparison-table td:first-child {
    text-align: left;
    color: #fff;
    font-weight: 500;
    padding-right: 15px;
}

.package-comparison-table tr:hover {
    background: rgba(255, 204, 42, 0.05);
}

.check {
    color: #50c878;
    font-size: 1.2rem;
}

.cross {
    color: #e74c3c;
    font-size: 1.2rem;
}

/* Responsive Design for Architecture Packages */
@media (max-width: 1024px) {
    .architecture-packages {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .arch-package-card {
        padding: 25px 20px;
        width: 100%;
    }
    
    .package-price {
        font-size: 2.2rem;
    }
    
    .package-scope {
        height: 50px;
    }
}

@media (max-width: 768px) {
    .architecture-packages {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    .arch-package-card {
        padding: 20px 15px;
        width: 100%;
    }
    
    .package-price {
        font-size: 2rem;
    }
    
    .package-scope {
        font-size: 0.9rem;
        height: 50px;
    }
    
    .comparison-table-wrapper {
        padding: 15px;
    }
    
    .package-comparison-table th,
    .package-comparison-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .package-comparison-table th:first-child,
    .package-comparison-table td:first-child {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .architecture-packages {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .arch-package-card {
        width: 100%;
        max-width: 100%;
    }
    
    .package-scope {
        height: 60px;
    }
    
    .package-comparison-table {
        min-width: 700px;
    }
    
    .package-comparison-table th,
    .package-comparison-table td {
        padding: 8px 5px;
        font-size: 0.75rem;
    }
    
    .package-details-section h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .architecture-packages {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .arch-package-card {
        padding: 20px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .package-price {
        font-size: 1.8rem;
    }
    
    .package-scope {
        height: 60px;
        font-size: 0.9rem;
    }
    
    .package-badge {
        padding: 6px 15px;
        font-size: 0.8rem;
    }
    
    .arch-book-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    .comparison-table-wrapper {
        padding: 10px;
    }
    
    .package-comparison-table {
        min-width: 600px;
    }
    
    .package-comparison-table th,
    .package-comparison-table td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
}

/* About Us Page Styles */
.about-hero {
    padding: 180px 40px 100px;
    text-align: center;
    background: linear-gradient(135deg, #f9f8f7 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 204, 42, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.about-hero h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
}

.about-hero p {
    font-size: 1.3rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: #333;
    position: relative;
    z-index: 1;
}

.about-section {
    padding: 100px 0;
}

.about-section--alt {
    background: #fff;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

.about-story-content h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    letter-spacing: -1px;
}

.about-story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
}

.about-story-image {
    position: relative;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.about-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-story-image:hover img {
    transform: scale(1.05);
}

.about-values-header {
    text-align: center;
    margin-bottom: 4rem;
}

.about-values-header h2 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -1px;
}

.about-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.about-value-card {
    text-align: center;
    padding: 3rem 2rem;
    background: #fff;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.about-value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.about-value-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.about-value-card:hover .about-value-icon {
    transform: scale(1.1) rotate(5deg);
}

.about-value-icon--yellow {
    background: linear-gradient(135deg, #ffcc2a, #ffd84d);
}

.about-value-icon--teal {
    background: linear-gradient(135deg, #3eceb3, #50d9c4);
}

.about-value-icon--blue {
    background: linear-gradient(135deg, #4aa7ff, #6bb8ff);
}

.about-value-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.about-value-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
}

.about-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

.about-team-member {
    text-align: center;
    transition: transform 0.3s ease;
}

.about-team-member:hover {
    transform: translateY(-5px);
}

.about-team-photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
}

.about-team-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 204, 42, 0.3) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.about-team-member:hover .about-team-photo::after {
    opacity: 1;
}

.about-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-team-member:hover .about-team-photo img {
    transform: scale(1.1);
}

.about-team-member h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.about-team-role {
    color: #3eceb3;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-team-member p {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    max-width: 350px;
    margin: 0 auto;
}

/* Responsive Design for About Page */
@media (min-width: 768px) {
    .about-story-grid {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
    
    .about-values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    
    .about-team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;
    }
}

@media (max-width: 767px) {
    .about-hero {
        padding: 140px 20px 80px;
    }
    
    .about-hero h1 {
        font-size: 2.5rem;
    }
    
    .about-hero p {
        font-size: 1.1rem;
    }
    
    .about-section {
        padding: 60px 0;
    }
    
    .about-story-content h2,
    .about-values-header h2 {
        font-size: 2rem;
    }
    
    .about-story-image {
        height: 350px;
    }
    
    .about-value-card {
        padding: 2rem 1.5rem;
    }
    
    .about-team-photo {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 480px) {
    .about-hero h1 {
        font-size: 2rem;
        letter-spacing: -1px;
    }
    
    .about-hero p {
        font-size: 1rem;
    }
    
    .about-story-content h2,
    .about-values-header h2 {
        font-size: 1.75rem;
    }
    
    .about-story-image {
        height: 280px;
    }
    
    .about-value-icon {
        width: 70px;
        height: 70px;
    }
    
    .about-team-photo {
        width: 160px;
        height: 160px;
    }
}

/* Quote Modal Styling */
.quote-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.quote-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.quote-modal-content {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 2px solid #ffcc2a;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(255, 204, 42, 0.3);
    animation: slideUp 0.4s ease;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 2px solid #ffcc2a;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.modal-close-btn:hover {
    background: #ffcc2a;
    transform: rotate(90deg);
}

.modal-close-btn svg {
    fill: #ffcc2a;
    transition: fill 0.3s ease;
}

.modal-close-btn:hover svg {
    fill: #000;
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header h2 {
    color: #ffcc2a;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.modal-header p {
    color: #ccc;
    font-size: 0.95rem;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.form-group input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #333;
    border-radius: 10px;
    padding: 15px 20px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input::placeholder {
    color: #666;
}

.form-group input:focus {
    border-color: #ffcc2a;
    background: rgba(255, 204, 42, 0.05);
    box-shadow: 0 0 0 4px rgba(255, 204, 42, 0.1);
}

.form-group input:valid {
    border-color: #50c878;
}

.quote-submit-btn {
    background: linear-gradient(135deg, #ffcc2a, #ffd84d);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(255, 204, 42, 0.3);
}

.quote-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 204, 42, 0.4);
}

.quote-submit-btn:active {
    transform: translateY(0);
}

/* Responsive Modal Styling */
@media (max-width: 768px) {
    .quote-modal-content {
        padding: 30px 25px;
        max-width: 450px;
    }
    
    .modal-header h2 {
        font-size: 1.75rem;
    }
    
    .modal-close-btn {
        width: 35px;
        height: 35px;
        top: 10px;
        right: 10px;
    }
    
    .form-group input {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .quote-submit-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .quote-modal-content {
        padding: 25px 20px;
        width: 95%;
        border-radius: 15px;
    }
    
    .modal-header h2 {
        font-size: 1.5rem;
    }
    
    .modal-header p {
        font-size: 0.9rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    .form-group input {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .quote-submit-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .quote-modal-content {
        padding: 20px 15px;
    }
    
    .modal-header {
        margin-bottom: 20px;
    }
    
    .modal-header h2 {
        font-size: 1.3rem;
    }
    
    .quote-form {
        gap: 15px;
    }
}