/* Keep the project detail page visible when the shared menu opens. */
/* The Pegasus menu hides .project while open; the project page body also
   has that class, so keep the page visible when its menu is opened. */
body.project.hidden {
    display: block !important;
    visibility: visible !important;
}

/* Flickity sizes its viewport before the overview is scaled to 40%. Let the
   neighboring cells paint outside that scaled viewport, while slider-nav
   continues to clip the row at the browser edges. */
.slider-nav .slider-wrapper.zoomed-out .flickity-viewport {
    overflow: visible;
}

/* Keep the brand mark and the active project/service name readable over the
   selected slide. The slider script and Pegasus header observer apply .black
   when the background behind the header is light. */
.logoImage .logo-mark img,
.logoImage .project .case {
    transition: filter 0.3s ease, color 0.3s ease;
}

.logoImage .project .case {
    color: #ffffff !important;
}

body.bg-light .logoImage .logo-mark img,
.nav-container.black .logoImage .logo-mark img {
    filter: brightness(0) !important;
}

body.bg-light .logoImage .project .case,
.nav-container.black .logoImage .project .case {
    color: #111111 !important;
}
/* Add quiet contrast only after the page starts moving. */
.nav-container.is-scrolled {
    background-color: rgba(20, 20, 22, 0.62) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    backdrop-filter: blur(8px) saturate(110%);
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Keep every part of the shared header on the same contrast state. The
   legacy responsive theme contains conflicting breakpoint rules, so these
   selectors deliberately cover the logo, divider, view toggle, and menu. */
#desktop-nav.nav-container.white .logoImage .logo-mark img,
#desktop-nav.nav-container.is-scrolled .logoImage .logo-mark img {
    filter: brightness(0) invert(1) !important;
}

#desktop-nav.nav-container.white .logoImage .project .case,
#desktop-nav.nav-container.is-scrolled .logoImage .project .case {
    color: #ffffff !important;
}

#desktop-nav.nav-container.white .logoImage .project::before,
#desktop-nav.nav-container.white .burger-container .burger i,
#desktop-nav.nav-container.white .burger-container .burger i::before,
#desktop-nav.nav-container.white .burger-container .burger i::after,
#desktop-nav.nav-container.is-scrolled .logoImage .project::before,
#desktop-nav.nav-container.is-scrolled .burger-container .burger i,
#desktop-nav.nav-container.is-scrolled .burger-container .burger i::before,
#desktop-nav.nav-container.is-scrolled .burger-container .burger i::after {
    background-color: #ffffff !important;
    filter: none !important;
}

#desktop-nav.nav-container.white .burger-container .view-toggle .slider-icon,
#desktop-nav.nav-container.is-scrolled .burger-container .view-toggle .slider-icon {
    border-color: #ffffff !important;
    filter: none !important;
}

#desktop-nav.nav-container.black:not(.is-scrolled) .logoImage .logo-mark img {
    filter: brightness(0) !important;
}

#desktop-nav.nav-container.black:not(.is-scrolled) .logoImage .project .case {
    color: #111111 !important;
}

#desktop-nav.nav-container.black:not(.is-scrolled) .logoImage .project::before,
#desktop-nav.nav-container.black:not(.is-scrolled) .burger-container .burger i,
#desktop-nav.nav-container.black:not(.is-scrolled) .burger-container .burger i::before,
#desktop-nav.nav-container.black:not(.is-scrolled) .burger-container .burger i::after {
    background-color: #111111 !important;
    filter: none !important;
}

#desktop-nav.nav-container.black:not(.is-scrolled) .burger-container .view-toggle .slider-icon {
    border-color: #111111 !important;
    filter: none !important;
}

/* The open menu turns the three strokes into a white close icon over its
   dark overlay, regardless of the section underneath. */
#desktop-nav.nav-container .burger-container .navbar-toggle.burger.active i {
    background-color: transparent !important;
}

#desktop-nav.nav-container .burger-container .navbar-toggle.burger.active i::before,
#desktop-nav.nav-container .burger-container .navbar-toggle.burger.active i::after {
    background-color: #ffffff !important;
}

.component-coloured-text .project-description {
    text-align: left;
}

.component-coloured-text .project-description p {
    margin: 0 0 1.25em;
}

.component-coloured-text .project-description p:last-child {
    margin-bottom: 0;
}

/* The legacy slider and consecutive gallery blocks both use `.next`.
   Keep gallery sections full-width when slider navigation changes its width. */
.component-full-bleed-image.next {
    width: 100% !important;
}

/* The overview displays card labels only. Prevent a stale full-slide caption
   from appearing beneath the scaled cards on project and category routes. */
.slider-nav .slider-wrapper.zoomed-out + .captions-full {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* While a selected card grows from the picker into the hero, the legacy
   animation has removed `zoomed-out` but has not added `ready` yet. Keep the
   full caption hidden until the image actually fills the viewport. */
body.slider-scroll-locked .slider-nav .slider-wrapper:not(.zoomed-out):not(.ready) + .captions-full {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep slider pages at the hero until the active action button opens fresh content. */
html.slider-scroll-locked,
body.slider-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.slider-content-hidden #content {
    display: none !important;
}

/* Coming Soon slide/page scroll lock */
body.soon-active,
body.page-soon,
body.is-soon {
    overflow: hidden !important;
}

body.soon-active #wrapper,
body.page-soon #wrapper,
body.is-soon #wrapper {
    overflow: hidden !important;
}

.slider-nav .slides li.is-soon .inner,
.slider-nav .slides li[data-soon="true"] .inner {
    pointer-events: none;
}

.captions-full li.is-soon .loadpage,
.captions-full li[data-soon="true"] .loadpage,
.captions-full li.is-soon button,
.captions-full li[data-soon="true"] button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Adjacent Services & Projects Navigation ─────────────────────────────── */
.component-adjacent-cta {
    position: relative;
    width: 100%;
    display: block;
    background-color: #0b0b0d;
    overflow: hidden;
}

.component-adjacent-cta .adjacent-grid {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 44vh;
    position: relative;
}

.component-adjacent-cta .adjacent-item {
    position: relative;
    flex: 1 1 50%;
    min-height: 340px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: #ffffff !important;
    overflow: hidden;
    background-color: #0b0b0d;
    transition: background-color 0.4s ease;
}

.component-adjacent-cta .adjacent-item.prev {
    justify-content: flex-start;
    padding: 50px 6%;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.component-adjacent-cta .adjacent-item.next {
    justify-content: flex-end;
    padding: 50px 6%;
}

.component-adjacent-cta .adjacent-grid.single-item .adjacent-item {
    flex: 1 1 100%;
    border-right: none;
}

.component-adjacent-cta .adjacent-item .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.85;
    transform: scale(1.0);
    transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    z-index: 1;
    will-change: transform;
}

.component-adjacent-cta .adjacent-item .scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 11, 13, 0.58) 0%, rgba(11, 11, 13, 0.82) 100%);
    transition: background 0.5s ease;
    z-index: 2;
}

.component-adjacent-cta .adjacent-item:hover .background {
    opacity: 1;
    transform: scale(1.045);
}

.component-adjacent-cta .adjacent-item:hover .scrim {
    background: linear-gradient(180deg, rgba(11, 11, 13, 0.38) 0%, rgba(11, 11, 13, 0.65) 100%);
}

.component-adjacent-cta .adjacent-item .caption {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 580px;
}

.component-adjacent-cta .adjacent-item.prev .caption {
    text-align: left;
    align-items: flex-start;
}

.component-adjacent-cta .adjacent-item.next .caption {
    text-align: right;
    align-items: flex-end;
}

.component-adjacent-cta .direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Graphik", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.component-adjacent-cta .direction-badge .arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.component-adjacent-cta .adjacent-item.prev:hover .direction-badge .arrow {
    transform: translateX(-6px);
}

.component-adjacent-cta .adjacent-item.next:hover .direction-badge .arrow {
    transform: translateX(6px);
}

.component-adjacent-cta .direction-badge .badge-soon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    color: #ffffff;
    text-transform: uppercase;
    margin-left: 4px;
}

.component-adjacent-cta .category {
    font-family: "Graphik", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}

.component-adjacent-cta .caption .title {
    font-family: "Graphik", "Helvetica Neue", Arial, sans-serif;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 200;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease;
}

.component-adjacent-cta .adjacent-item:hover .caption .title {
    opacity: 0.95;
}

@media (max-width: 991px) {
    .component-adjacent-cta .adjacent-grid {
        min-height: 36vh;
    }
    .component-adjacent-cta .adjacent-item {
        min-height: 280px;
        padding: 40px 5%;
    }
    .component-adjacent-cta .caption .title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .component-adjacent-cta .adjacent-grid {
        flex-direction: column;
        min-height: auto;
    }
    .component-adjacent-cta .adjacent-item {
        flex: 1 1 auto;
        width: 100%;
        min-height: 200px;
        padding: 35px 25px;
    }
    .component-adjacent-cta .adjacent-item.prev {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .component-adjacent-cta .adjacent-item.next {
        text-align: left;
        justify-content: flex-start;
    }
    .component-adjacent-cta .adjacent-item.next .caption {
        text-align: left;
        align-items: flex-start;
    }
    .component-adjacent-cta .caption .title {
        font-size: 20px;
    }
}