body {
    overflow: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* .main-w {
  will-change: opacity, transform;
  } */
/*hide webflow badge*/
.w-webflow-badge {
    display: none !important;
}

.w--redirected-checked+.btn-txt.checkbox-txt {
    color: var(--main-light);
}

/*preloader*/
.preloader {
    display: flex;
}

.w-editor .preloader {
    display: none;
}

/* page wipe */
html.dark .page-wipe-inner {
    background: var(--main-dark-alt);
}

html.light .page-wipe-inner {
    background: var(--main-light-alt);
}

.page-wipe-inner {
    overflow: clip;
}

.page-wipe-inner,
.page-wipe-object-w {
    will-change: transform;
}

html.dark .page-wipe-path {
    fill: none;
    stroke: var(--dark-grey);
    stroke-miterlimit: 10;
}

html.light .page-wipe-path {
    fill: none;
    stroke: var(--light-grey);
    stroke-miterlimit: 10;
}

div.btn-inner {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

div.btn-inner:hover {
    transition: none !important;
    animation: none !important;
}

html.light .st-x,
html.light .st-c {
    fill: none;
    stroke: var(--light-grey);
    stroke-width: 0.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    /* You may need to adjust this value based on the actual length of your paths */
    stroke-dashoffset: 1000;
    /* Same value as stroke-dasharray to make the line invisible initially */
}

html.light .ob-fill-fill {
    background: var(--main-dark);
}

html.dark .st-x,
html.dark .st-c {
    fill: none;
    stroke: var(--dark-grey);
    stroke-width: 0.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    /* You may need to adjust this value based on the actual length of your paths */
    stroke-dashoffset: 1000;
    /* Same value as stroke-dasharray to make the line invisible initially */
}

html.dark .ob-fill-fill {
    background: var(--main-light);
}

html.dark [data-nav-tl] [split-text] {
    text-shadow: 0px 1em 0px var(--main-light) !important;
}

html.light [data-nav-tl] [split-text] {
    text-shadow: 0px 1em 0px var(--main-dark) !important;
}

html.dark [data-nav-tl] .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px #ffffff !important;
}

html.light [data-nav-tl] .link-track-fill {
    background-color: var(--main-dark) !important;
}

html.dark [data-nav-tl] .link-track-fill {
    background-color: var(--main-light) !important;
}

html.dark .checkbox-toggle:focus {
    background-color: var(--main-dark-alt) !important;
}

html.light .checkbox-toggle:focus {
    background-color: var(--main-light-alt) !important;
}

/*overflow*/
[overflow="clip"] {
    overflow: clip;
}

[overflow="hidden"] {
    overflow: hidden;
}

[overflow="visible"] {
    overflow: visible;
}

/*true 100vh*/
[true-vh] {
    height: calc(var(--vh, 1vh) * 100) !important;
}

/*cursor*/
[data-cursor-wrap] {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

body:hover [data-cursor-wrap] {
    opacity: 1;
}

/* init */
[data-start="hidden"] {
    visibility: hidden;
}

/* orb */
.orb canvas {
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
}

/* animations */
[stagger-scroll] .line {
    overflow: hidden;
}

/* homepage grid animation */
[grid-anim] {
    height: 50vh !important;
}

.hg-grid-overlay .line {
    overflow: hidden;
}

.hg-grid {
    perspective: var(--perspective);
    transform-style: preserve-3d;
}

.hg-grid-w {
    display: grid;
    place-items: center;
    width: 100%;
    place-items: center;
    perspective: var(--perspective);
    will-change: transform;
    /* transform-style: preserve-3d; */
}

.hg-grid-item {
    aspect-ratio: 14 / 9;
    will-change: transform;
}

.hg-grid-item .text-small {
    position: absolute;
    /* backface-visibility: hidden; */
    /* perspective: 1000px; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0) !important;
}

.hg-grid-item-inner {
    position: relative;
    width: calc(1 / var(--grid-inner-scale) * 100%);
    height: calc(1 / var(--grid-inner-scale) * 100%);
    background-size: cover;
    background-position: 50% 50%;
}

/* homepage cross animation */
.s.is-hsc {
    overflow: clip;
}

@keyframes loopGradient {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

[gradient-evolve] {
    /* Initial gradient */
    background-image: linear-gradient(255deg, #facb0e, #f06ba8 30%, #78bae6 65%, #fff);
}

/* Pseudo element with final gradient */
[gradient-evolve]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Final gradient */
    background-image: linear-gradient(255deg, #f06ba8, #facb0e 30%, #78bae6 65%, #fff);
    animation: loopGradient 5s infinite;
    /* 5s is the duration; adjust as needed */
}

/* light/dark */
html.dark body {
    background-color: var(--main-dark);
}

html.dark body {
    color: var(--main-light);
}

html.dark .hud-menu-bg {
    background: var(--main-dark);
    border-color: var(--dark-grey);
}

html.dark .btn-w {
    background: var(--main-dark);
    border-color: var(--dark-grey);
}

html.dark [data-brand] {
    fill: var(--main-light);
}

html.dark .hud-social-img path {
    fill: var(--main-light);
}

html.dark .hud-menu-line,
html.dark .hud-scroll-dot {
    background: var(--main-light);
}

html.dark .hud-scroll-line-top,
html.dark .hud-scroll-line-btm {
    background: var(--dark-grey);
}

html.dark .btn-w [stagger-text] {
    text-shadow: 0px 1em 0px var(--main-light);
}

html.dark .btn-w .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-light);
}

html.dark .hud-menu-link [stagger-text],
/* .page-link-w [split-text] {
    text-shadow: 0px 1em 0px var(--main-light);
} */

html.dark .page-link-w [split-text] {
    text-shadow: 0px 1em 0px var(--main-light);
}

html.dark .hud-menu-link .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-light);
}

html.dark .hud-menu-link .link-track-fill {
    background: var(--main-light);
}

html.dark .hud-menu-link .link-track {
    background: var(--dark-grey);
}

html.dark .orb-outline {
    border-color: var(--dark-grey);
}

html.dark .mode-toggle-track {
    border-color: var(--dark-grey);
}

html.dark .hsc-img-path {
    fill: white;
}

html.dark .c.is-hsc {
    background: black;
    mix-blend-mode: multiply;
}

html.dark .s.is-hsc {
    mix-blend-mode: lighten;
}

html.dark .hg-img-overlay {
    background: rgba(29, 29, 29, 0.3);
}

html.dark .hsc-track .h-c {
    color: var(--main-dark);
}

html.dark .home-client__grid-img {
    filter: invert(0);
}

html.dark .home-client__corner-img {
    filter: invert(1) brightness(0.8);
}

/* light */
html.light .hud-menu-bg {
    background: var(--main-light);
    border-color: var(--light-grey);
}

html.light .btn-w {
    background: var(--main-light);
    border-color: var(--light-grey);
}

html.light [data-brand] {
    fill: var(--main-dark);
}

html.light .hud-social-img path {
    fill: var(--main-dark);
}

html.light .hud-menu-line,
html.light .hud-scroll-dot {
    background: var(--main-dark);
}

html.light .hud-scroll-line-top,
html.light .hud-scroll-line-btm {
    background: var(--light-grey);
}

html.light .btn-w [stagger-text] {
    text-shadow: 0px 1em 0px var(--main-dark);
}

html.light .btn-w .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-dark);
}

html.light .hud-menu-link [stagger-text] {
    /* text-shadow: 0px 1em 0px var(--main-dark); */
}

/* html.light .page-link-w [split-text] {
    text-shadow: 0px 1em 0px var(--main-light); 
} */

html.light .hud-menu-link .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-dark);
}

html.light .hud-menu-link .link-track-fill {
    background: var(--main-dark);
}

html.light .hud-menu-link .link-track {
    background: var(--light-grey);
}

html.light .orb-outline {
    border-color: var(--grey-rotate);
}

html.light .mode-toggle-track {
    border-color: var(--light-grey);
}

html.light .hsc-img-path {
    fill: black;
}

html.light .hg-img-overlay {
    background: rgba(255, 255, 255, 0.3);
}

html.light .s.is-hsc {
    mix-blend-mode: darken;
}

html.light .c.is-hsc {
    background: white;
    mix-blend-mode: lighten;
}

html.light .hsc-track .h-c {
    color: var(--main-dark);
}

.line {
    white-space: nowrap
}

@media only screen and (max-width: 992px) {
    [data-orb-wrap] {
        position: absolute;
    }
}

/*  ---- ALL PAGES CSS  ---- */
/*  ---- ALL PAGES CSS  ---- */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: 1.0582010582010584vw;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ---- Main Variables ---- */
:root {
    --main-dark: #1d1d1d;
    --main-dark-alt: #252525;
    --main-light: #e5e4e0;
    --main-light-alt: #f1f0ec;
    --primary-color: #ff642f;
    --dark-grey: rgba(218, 218, 218, 0.2);
    --dark-grey60: rgba(218, 218, 218, 0.6);
    --light-grey: rgba(111, 111, 111, 0.2);
    --light-grey60: rgba(111, 111, 111, 0.6);
    --grey-rotate: #bfbebe;
    --large-radius: 6.25em;
    --med-radius: 1.375em;
    --small-radius: 0.625em;
    --perspective: 4000px;
    --grid-inner-scale: 1;
    --grid-item-ratio: 1.5;

    /* Theme transition properties */
    --theme-transition-duration: 0.5s;
    --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --ripple-color: var(--main-dark);
    --transition-delay: 0ms;
}

/* ---- Global Styles ---- */
::selection {
    background: var(--main-dark);
    color: var(--main-light);
    text-shadow: none;
}

img::selection,
svg::selection {
    background: transparent;
}

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

[display-none] {
    display: none !important;
}

[data-blur] {
    box-shadow: 0 0 10px 0 hsla(0, 0%, 11.37%, 0.1);
}

:where(:focus-visible) {
    outline: 2px solid var(--focus-color, Highlight);
    outline-offset: 2px;
}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Lenis ---- */
[data-lenis-prevent] {
    overscroll-behavior-y: contain;
}

/* ---- Lightboxes ---- */
.w-lightbox-close {
    right: 5em;
    height: 5em;
    outline: transparent;
}

/* ---- Line Clamp ---- */
[line-clamp] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

[line-clamp="2"] {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ---- Pointer Events ---- */
[pointer-none] {
    pointer-events: none !important;
    user-select: none;
}

[pointer-auto] {
    pointer-events: auto;
}

/*  ---- Custom Mouse  ---- */
[data-cursor-wrap] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: difference;
}

[data-cursor] {
    border-radius: 50%;
    position: absolute;
    background-color: #fff9;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    transition: scale 0.3s;
}

[data-cursor].hover {
    transform: scale(0.55);
}

/* ---- Orb ---- */
[data-orb],
[orb-out-w],
[orb-outline],
[data-cursor] {
    will-change: transform;
}

[data-orb-wrap] {
    overflow-x: clip
}

/* ---- Menu ---- */
.hud-menu-o.is-edit .hud-menu-content {
    pointer-events: auto;
    opacity: 1;
}

/* Closed (in breakpoints) */
/* Open */
.hud-menu-w.is-open .hud-menu-line.is-1 {
    transform: translate(0em, 0em) rotate(45deg);
}

.hud-menu-w.is-open .hud-menu-line.is-2 {
    transform: translate(0em, 0em) scale3d(0, 1, 1);
}

.hud-menu-w.is-open .hud-menu-line.is-3 {
    transform: translate(0em, 0em) rotate(-45deg);
}

/* ---- Buttons ---- */
/* Main Buttons */
.btn-w [stagger-text] {
    text-shadow: 0px 1em 0px var(--main-dark);
}

.btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-dark);
    transition-property: transform;
    transition-duration: 1200ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Simple Buttons */
/* .hud-menu-link [stagger-text],
.page-link-w [split-text] {
    text-shadow: 0px 1em 0px var(--main-dark);
} */

.hud-menu-link .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-dark);
    transition-property: transform;
    transition-duration: 1200ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hud-menu-link .link-track-fill {
    background: var(--main-dark);
}

/* Page Link Buttons */
.page-link-w .btn-icon-w .btn-txt {
    transition-property: transform;
    transition-duration: 1200ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mbm-diff .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-light);
}

.btn-icon-w .text-small {
    backface-visibility: hidden;
}

/* Colour Toggle  */
.hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-track {
    background: var(--main-light);
}

.hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-btn {
    background: var(--main-dark);
    transform: translate(2.5em, 0px);
}

.hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-track {
    background: var(--main-dark);
}

.hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-btn {
    background: var(--main-light);
    transform: translate(0em, 0px);
}

/* Hud scroll indicator */
.hud-scroll-line-top {
    animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale3d(1, 0, 1);
    }

    50% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }

    100% {
        transform: scale3d(1, 0, 1);
    }
}

/* preloader */
.ob-fill-mask,
.hsc-fill-mask {
    mask-image: url("https://cdn.prod.website-files.com/61e0406d0ccbda9d6f89df7f/64ce56bd39c2f116181f1aa5_ob-2023-logomark-svg.svg");
    -webkit-mask-image: url("https://cdn.prod.website-files.com/61e0406d0ccbda9d6f89df7f/64ce56bd39c2f116181f1aa5_ob-2023-logomark-svg.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

[preloader] {
    visibility: hidden;
}

/* ----- Home Headlines ----- */
.hh-text-block {
    mix-blend-mode: difference;
    color: var(--main-light);
    user-select: none;
}

html.dark .mbm-diff {
    /* mix-blend-mode: difference; */
    color: var(--main-light);
    user-select: none;
}
html.light .mbm-diff {
    /* mix-blend-mode: difference; */
    color: var(--main-dark);
    user-select: none;
}

[no-mbm] {
    color: var(--main-dark);
    mix-blend-mode: normal;
}

html.dark [no-mbm] {
    color: var(--main-light);
    mix-blend-mode: normal;
}

html.light [no-mbm] {
    color: var(--main-dark);
    mix-blend-mode: normal;
}

/* home hero */
[hh-tb],
[hh-tb] .char {
    will-change: transform;
}

/* home scroll animation*/
.s.is-hsc,
.c.is-hsc,
.hsc-rotate {
    will-change: transform;
}

[hsc-img] {
    will-change: transform, height, width;
    transform: translateZ(0);
}

/* home grid animation */
[grid-anim],
.hg-grid-item,
.hg-grid-inner {
    will-change: transform;
}

/* ----- Work Page ----- */
/* ----- Work Page ----- */
/* hero text */
.ow-hl-row {
    will-change: transform;
}

/* ----- Work Case Study Items ----- */
.hg-img-w {
    pointer-events: none;
}

.hcs-item-w {
    aspect-ratio: 1 / 1;
    will-change: transform, opacity;
}

/* ----- Contact Page ----- */
.cp-form {
    display: flex !important;
}

.checkbox-box .btn-txt {
    pointer-events: none;
}

.form-input.is-textarea {
    resize: vertical;
}

html.light [data-check="true"] .checkbox-toggle {
    border-color: var(--light-grey);
    background: var(--main-dark);
}

html.light [data-check="true"] .btn-txt {
    color: var(--main-light);
}

html.dark .checkbox-toggle {
    border-color: var(--dark-grey);
    background: var(--main-dark);
}

html.dark .cp-form-w .btn-txt {
    color: var(--main-light);
}

html.dark [data-check="true"] .checkbox-toggle {
    border-color: var(--dark-grey);
    background: var(--main-light);
}

html.dark [data-check="true"] .btn-txt {
    color: var(--main-dark);
}

html.dark .cp-form-w {
    background: var(--main-dark-alt);
}

html.dark .form-input {
    background-color: var(--dark-grey);
    color: var(--main-light);
}

html.dark .form-input:focus {
    background-color: var(--main-dark);
    border-color: var(--main-light-alt);
}

/* ----- Services Page ----- */
/* ----- Services Page ----- */
.ser-grid-item {
    background: var(--main-light-alt);
    border-radius: var(--small-radius);
    border: 1px solid var(--light-grey);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.is-ser-title {
    transition-duration: 600ms;
    transition-property: color;
    transition-timing-function: ease;
}

.ser-cross-w {
    transition-duration: 600ms;
    transition-timing-function: ease;
    transition-property: transform, opacity;
}

.ser-cross-w {
    transform: scale(0.8);
    opacity: 0.8;
}

.is-ser-title {
    transform-origin: 0% 50%;
}

.ser-content-w,
.ser-grid-item {
    overflow: clip;
}

.ser-grid-item.is--active .btn-w {
    background: black;
}

html.dark .ser-grid-item.is--active .btn-w {
    background: white;
    color: black;
}

html.dark .ser-grid-item .btn-w [stagger-text] {
    text-shadow: 0px 1em 0px var(--main-dark);
}

html.dark .ser-grid-item .btn-w .btn-icon-w .btn-txt {
    text-shadow: -1em 0px 0px var(--main-dark);
}

html.dark .ser-grid-item {
    background: var(--main-dark-alt);
    border: 1px solid var(--dark-grey);
}

html.light .ser-grid-item.is--active .ser-cross-svg {
    fill: var(--main-dark);
}

html.dark .ser-grid-item.is--active .ser-cross-svg {
    fill: var(--main-light);
}

html.dark .ser-grid-item.is--active .is-ser-title {
    color: var(--main-light);
}


/* ----- About Page ----- */
/* ----- About Page ----- */
.team-titles .text-small {
    line-height: 1;
}

/* team card hover*/
.team-cross-w,
.team-cross {
    transition-duration: 600ms;
    transition-timing-function: ease;
    transition-property: transform, opacity;
}

.team-title-w {
    transition-duration: 600ms;
    transition-timing-function: ease;
    transition-property: opacity;
}

/* team card active */
.team-item-w.is--active .team-img-w {
    transform: scale(1.1);
}

.team-item-w.is--active .team-title-w {
    opacity: 1;
}

.team-item-w.is--active .team-cross-w {
    transform: scale(1);
    opacity: 1;
}

.team-item-w.is--active .team-cross {
    transform: rotate(45deg);
}

/* bento blocks */
.abt-block-w.is-2 {
    aspect-ratio: 1 / 1;
}

.abt-block-w.is-1 .abt-block-info-w {
    color: var(--main-light);
}

.abt-block-w.is-4 .abt-block-info-w {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.abt-anim-label .text-small {
  transition: transform 0.3s ease;
}*/
[abt-vid] {
    height: 100%;
    width: 100%;
}

.abt-block-w.is-1 .abt-txt,
.abt-block-w.is-1 .span-small {
    color: var(--main-dark) !important;
}

.text-small.flip-text {
    transform: rotate(180deg);
    display: inline-block;
    /* Needed to apply the transformation */
}

.abt-cross-svg {
    fill: var(--main-dark);
}

html.dark .abt-cross-svg {
    fill: var(--main-light);
}

.abt-rotator-svg {
    fill: var(--main-light-alt);
}

html.dark .abt-rotator-svg {
    fill: var(--main-dark-alt);
}

.abt-block-w.is-2 {
    background: var(--main-light-alt);
    border: 1px solid var(--light-grey);
}

html.dark .abt-block-w.is-2 {
    background: var(--main-dark-alt);
    border: 1px solid var(--light-grey);
}

[case-hero] [split-hero] .word {
    overflow: hidden;
}

.cs-embed.is-large {
    aspect-ratio: 4 / 3;
}

.cs-embed.is-mobile {
    aspect-ratio: 9 / 16;
}

[aspect-ratio="4-3"] {
    aspect-ratio: 4 / 3;
}

[aspect-ratio="9-16"] {
    aspect-ratio: 9 / 16;
}

.cs-feature-w,
.cs-element-embed {
    background: var(--main-light-alt);
    /*border: 1px solid var(--light-grey);*/
}

html.dark .cs-feature-w,
html.dark .cs-element-embed {
    background: var(--main-dark-alt);
    /*border: 1px solid var(--dark-grey);*/
}

[gradient-evolve] {
    /* Initial gradient */
    background-image: linear-gradient(255deg, #facb0e, #f06ba8 30%, #78bae6 65%, #fff);
}

/* ----- careers ----- */
html.dark .car-item-w {
    background: var(--main-dark-alt);
    border-color: var(--dark-grey);
    color: var(--main-light);
}


/* ----- WF Ent ----- */
/* ----- WF Ent ----- */
/* ------------------------------------- work slider*/
.ps__slider--slide.light .h-eyebrow {
    color: var(--black) !important;
}

.ps__slider--slide.dark .h-eyebrow {
    color: var(--white) !important;
}

.ps__slider--slide.light .ps-cross path {
    fill: var(--black) !important;
}

.ps__slider--slide.dark .ps-cross path {
    fill: var(--white) !important;
}

.ps__slider--slide.light .btn-w.is--outline {
    border-color: var(--black) !important;
    color: var(--black) !important;
}

.ps__slider--slide.light .btn-w.is--outline .btn-txt {
    color: var(--black) !important;
}

.ps__slider--slide.dark .btn-w.is--outline {
    border-color: var(--white) !important;
    color: var(--white) !important;
}

.ps__slider--slide.dark .btn-w.is--outline .btn-txt {
    color: var(--white) !important;
}

.ps__slider--slide .btn-w.is--outline {
    background: none !important;
}

.ps__slider--slide .btn-w .o-hidden [stagger-text] {
    text-shadow: 0px 1em 0px var(--main-light) !important;
}

/* ------------------------------------- faq */
.load-btn__fill {
    transition: transform 0.6s ease;
}

._wf-ent__load-btn:hover .load-btn__fill {
    transform: scale3d(1, 1, 1);
}

.slider-main_button.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

._wf-ent__faq--col-list ._wf-ent__faq--item:first-child ._wf-ent__faq--trigger {
    border: none;
}

/* showreel 
  ._wf-ent__vid--w:hover ._wf-ent__vid--tt {
  	opacity: 1;
  }*/
/* ------------------------------------- light dark */
html.dark ._wf-ent__why--card {
    background-color: var(--main-dark-alt);
}

html.dark ._wf-ent__why--card:hover {
    background-color: var(--main-dark);
}

html.dark .swiper-slide.is-slider-main {
    background-color: var(--main-dark-alt);
}

html.dark .swiper-drag.is-slider-main {
    background-color: var(--main-light-alt);
}

html.dark .slider-main_button {
    color: var(--dark-grey);
}

html.dark .slider-main_button:hover {
    color: var(--main-light);
}

html.dark [faq-svg] path {
    fill: var(--main-light);
}

._wf-ent-hero__emb-y video::-webkit-media-controls-panel {
    background-color: rgba(0, 0, 0, 0.5);
}

._wf-ent-hero__emb-y video::-webkit-media-controls-play-button,
._wf-ent-hero__emb-y video::-webkit-media-controls-volume-slider,
._wf-ent-hero__emb-y video::-webkit-media-controls-mute-button,
._wf-ent-hero__emb-y video::-webkit-media-controls-timeline {
    filter: invert(0);
}


/*  ----- css variations ----- */
/*  ----- css variations ----- */
/* ----------------------------------------- desktop */
/* ----------------------------------------- desktop */
/* ----------------------------------------- desktop */
@media only screen and (min-width: 992px) {

    /* buttons */
    .btn-w:hover .btn-icon-w .btn-txt {
        transform: translate(1em, 0em);
    }

    /* Simple Buttons */
    .hud-menu-link [stagger-text],
    .page-link-w [split-text] {
        text-shadow: 0px 1rem 0px var(--main-dark);
    }

    .hud-menu-link .btn-icon-w .btn-txt {
        text-shadow: -1rem 0px 0px var(--main-dark);
    }

    .hud-menu-link:hover .btn-icon-w .btn-txt {
        transform: translate(1rem, 0em);
    }

    /* Page Link Buttons */
    /* .page-link-w:hover .btn-icon-w .btn-txt {
    transform: translate(1rem, 0em);
  } */
    /* Page Link Buttons */
    .page-link-w:hover .btn-icon-w .btn-txt {
        transform: translate(1rem, 0em);
    }

    .page-link-w:hover .link-track-fill {
        transform: scale3d(1, 1, 1);
    }

    .mbm-diff .btn-icon-w .btn-txt {
        text-shadow: -1rem 0px 0px var(--main-light);
    }

    /* hud menu */
    /* general */
    .hud-menu-link:hover .btn-icon-w .btn-txt {
        transform: translate(1em, 0em);
    }

    .hud-menu-link:hover .link-track-fill {
        transform: scale3d(1, 1, 1);
    }

    /* closed */
    .hud-menu-w:not(.is-open):hover .hud-menu-line.is-1 {
        transform: translate(0em, -0.6em);
    }

    .hud-menu-w:not(.is-open):hover .hud-menu-line.is-2 {
        transform: translate(0em, 0em);
    }

    .hud-menu-w:not(.is-open):hover .hud-menu-line.is-3 {
        transform: translate(0em, 0.6em);
    }

    /* open */
    .hud-menu-w.is-open:hover .hud-menu-line.is-1 {
        transform: translate(0em, 0em) rotate(35deg);
    }

    .hud-menu-w.is-open:hover .hud-menu-line.is-2 {
        transform: translate(0em, 0em) scale3d(0, 1, 1);
    }

    .hud-menu-w.is-open:hover .hud-menu-line.is-3 {
        transform: translate(0em, 0em) rotate(-35deg);
    }

    /*service page*/
    .ser-grid-slot:not(.is--active) {
        height: 16em;
    }

    .ser-grid-item:hover .ser-cross-w {
        transform: scale(1);
        opacity: 1;
    }

    /* ----- Work Case Study Items ----- */
    .hcs-item-w:hover .hcs-img-w {
        transform: scale(1.1);
    }

    .hcs-item-w:hover .hcs-info-w {
        transform: translate(0px, 0em);
    }

    /* contact form page */
    html.light [data-check="true"] .checkbox-toggle:hover {
        border-color: var(--light-grey60);
    }

    html.dark [data-check="true"] .checkbox-toggle:hover {
        border-color: var(--dark-grey60);
    }

    /* ----- About Page ----- */
    .team-item-w:hover .team-img-w {
        transform: scale(1.1);
    }

    /* team card hover*/
    .team-item-w:hover .team-cross-w {
        transform: scale(1);
        opacity: 1;
    }

    .team-item-w:hover .team-title-w {
        opacity: 1;
    }
}

/* ----------------------------------------- tablet */
/* ----------------------------------------- tablet */
/* ----------------------------------------- tablet */
@media only screen and (max-width: 992px) {
    [data-hide="tab"] {
        display: none;
    }

    body {
        overflow: visible;
    }

    :root {
        --small-radius: 0.4rem;
        --med-radius: 0.8rem;
    }

    .home-hero-tablet-text {
        width: calc(100% - 4vw);
    }

    .span-tablet-hero.is-3 {
        display: none !important;
    }

    /* Colour Toggle  */
    .hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-btn {
        transform: translate(2.5rem, 0px);
    }

    .hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-btn {
        transform: translate(0rem, 0px);
    }

    /* --- work page --- */
    .hcs-item-w .hcs-info-w {
        transform: translate(0px, 0em);
    }

    .hcs-item-w .text-small {
        font-size: 1rem;
    }

    /* --- hud menu -- */
    .hud-menu-link {
        padding-bottom: .3rem;
    }

    .hud-menu-link .text-small {
        font-size: 1rem;
    }

    .hud-menu-link .text-mini {
        font-size: 0.85rem;
    }

    /* ---- Services Page ----   */
    /*.ser-grid-item:not(.is--active) {
	height: 10em;
}*/
}

/* above mobile landscape */
@media screen and (min-width: 767px) {
    .checkbox-box .range-icon {
        transition-duration: 400ms;
        transition-property: transform, background;
    }

    .checkbox-box:hover .range-icon {
        transform: scale(1.3);
    }

    .checkbox-box.is-range .checkbox-txt {
        transition-duration: 400ms;
        transition-property: color;
    }

    .checkbox-box .range-active {
        transition-duration: 400ms;
        transition-property: opacity;
    }

    .checkbox-box.is--active .range-active {
        opacity: 1;
    }

    .checkboxes-w:hover .range-active {
        opacity: 1 !important;
    }

    html.light .checkbox-box.is--active .range-icon {
        background: var(--main-dark);
    }

    html.light .range-active {
        background: var(--main-dark);
    }

    html.light .checkbox-box.is-range .checkbox-txt {
        color: var(--light-grey);
    }

    html.light .checkbox-box.is-range.is--active .checkbox-txt {
        color: var(--main-dark);
    }

    html.dark .checkbox-box .range-icon {
        background: var(--dark-grey);
    }

    html.dark .checkbox-box.is--active .range-icon {
        background: var(--main-light);
    }

    html.dark .range-active {
        background: var(--main-light);
    }

    html.dark .checkbox-box.is-range .checkbox-txt {
        color: var(--dark-grey);
    }

    html.dark .checkbox-box.is-range.is--active .checkbox-txt {
        color: var(--main-light);
    }
}

/* mobile landscape */
@media screen and (max-width: 767px) {
    .span-tablet-hero.is-3 {
        display: inline-block !important;
    }

    /* --- radio --- */
    html.dark .checkbox-toggle.is-radio.is-range {
        border-color: var(--dark-grey);
        background: var(--main-dark);
    }

    html.dark [data-check="true"] .checkbox-toggle.is-radio.is-range {
        border-color: var(--dark-grey);
        background: var(--main-light);
    }
}

/* mobile  */
@media screen and (max-width: 497px) {
    [data-hide="m"] {
        display: none;
    }
}


/*  ----- edit mode ----- */
/*  ----- edit mode ----- */
[data-edit="true"] .ps__slider--slide {
    position: relative;
}

[data-edit="true"] .ps__slider--track {
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
}

[data-edit="true"] ._wf-ent__client--g {
    position: relative;
    top: 0em;
}

[data-edit="true"] ._wf-ent__faq--reveal {
    height: auto;
}

.home-hero {
    grid-area: 4 / 7 / 5 / 14;
}

/* Dynamic Authentication Button Styles */
.auth-button-loading {
    opacity: 0.7;
    pointer-events: none;
}

.auth-button img {
    transition: all 0.3s ease;
}

.auth-button:hover img {
    transform: scale(1.1);
}

/* Profile image styling for auth buttons */
.btn-icon-w img {
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-icon-w img:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

/* CTA button authentication states */
.cta-auth-authenticated {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.cta-auth-authenticated:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
}

/* Menu auth button states */
.menu-auth-button {
    position: relative;
}

.menu-auth-button.authenticated {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Animation for button state changes */
@keyframes buttonStateChange {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-button-updated {
    animation: buttonStateChange 0.3s ease-out;
}

/* User name display in auth buttons */
.auth-button .btn-txt,
.auth-user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-button.authenticated .btn-txt {
    font-weight: 500;
    text-transform: uppercase;
}

/* Profile image in auth buttons */
.auth-button .btn-icon-w img {
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.auth-button.authenticated:hover .btn-icon-w img {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

/* User welcome message in CTA buttons */
.cta-auth-welcome .btn-txt,
.cta-user-name {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    max-width: 280px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
}

/* Hover effect for authenticated buttons */
.auth-button.authenticated:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {

    .auth-button .btn-txt,
    .auth-user-name {
        max-width: 120px;
        font-size: 0.9rem;
    }

    .cta-user-name {
        max-width: 220px;
        font-size: 0.9rem;
    }

    .auth-button .btn-icon-w img {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width: 480px) {

    .auth-button .btn-txt,
    .auth-user-name {
        max-width: 100px;
        font-size: 0.8rem;
    }

    .cta-user-name {
        max-width: 200px;
        font-size: 0.8rem;
    }

    .auth-button .btn-icon-w img {
        width: 14px;
        height: 14px;
    }
}

/* Footer */
#w-node-b2deac9f-48fc-2cd0-3331-af319f49ee25-9f49edfa {
    grid-area: span 1 / span 5 / span 1 / span 5;
}

.grid-main.ft-nav-w {
    grid-template-columns: 1fr 1fr;
    padding-left: 3em;
}

/* Remove hover effects from card text elements */
.recognition-card:hover .card-name,
.recognition-card:hover .card-title,
.recognition-card:hover .card-badge {
    transform: none;
}

.card-name,
.card-title,
.card-badge {
    transition: none;
}

/* Keep only the card container hover effect */
.recognition-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

html.light .recognition-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Keep image hover effect but remove text transforms */
.recognition-card:hover .card-image {
    border-color: var(--primary-color);
}

.recognition-card:hover .card-image img {
    transform: scale(1.1);
}

/* Badge Image Styles */
.hcs-img-w.level1 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level2 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level3 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level4 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level5 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level6 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level6.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level7 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level7.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level8 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level8.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level9 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level9.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hcs-img-w.level10 {
    background-image: url('https://cdn.devsync.club/devsync-assets/Badges/level10.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Badge hover effects */
.hcs-item-w:hover .hcs-img-w {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Text truncation utility classes */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

.text-truncate-md {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.text-truncate-lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.text-truncate-xl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* Header and navigation truncation */
.header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

.nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .text-truncate-lg {
        max-width: 150px;
    }

    .text-truncate-xl {
        max-width: 200px;
    }

    .header-title {
        max-width: 180px;
    }

    .nav-item-text {
        max-width: 140px;
    }
}

@media screen and (max-width: 480px) {
    .text-truncate-md {
        max-width: 100px;
    }

    .text-truncate-lg {
        max-width: 120px;
    }

    .header-title {
        max-width: 140px;
    }

    .nav-item-text {
        max-width: 110px;
    }
}

/* Text truncation utility classes */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

.text-truncate-md {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.text-truncate-lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.text-truncate-xl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}