@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/Metropolis-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('font/Metropolis-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 550;
    font-display: swap;
    src: url('font/Metropolis-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('font/Metropolis-Bold.woff') format('woff');
}

/*@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(font/Metropolis-Black.woff) format('woff');
}*/

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url('font/Metropolis-BlackItalic.woff') format('woff');
}


@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('font/Metropolis-SemiBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('font/Metropolis-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/SpaceGrotesk-Regular.woff2') format('woff');
}

:root {
    --font: 'Metropolis', sans-serif;
    --def-transition: all 0.2s ease-in-out;
}

*, *::before, *::after { box-sizing: inherit }

*::selection{
    background-color: #4218ff;
    color: #fff;
}
.chat-widget-form textarea::selection,
.chat-widget-form input::selection{ 
    background-color: #d4d0ff;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}
.fl--w {flex-wrap: wrap}
.ffl--c {flex-flow: column}
.flf--r {flex-flow: row}
.flf--rw {flex-flow: row wrap}
.fl--1 {flex: 1 1 0}
.gap--03 {gap: .3rem}
.gap--05 {gap: .5rem}
.gap--1 {gap: 1rem}
.gap--2 {gap: 2rem}
.gap--3 {gap: 3rem}
.gap--4 {gap: 4rem}
.gap--6 {gap: 6rem}
.p--0 {padding: 0}
.ac--center {align-content: center}
.align--center {text-align: center}
.align--middle {align-items: center}
.align--end {align-items: flex-end}
.align--start {align-items: flex-start}
.aself--center {align-self: center}
.aself--end {align-self: flex-end}
.jc--spb {justify-content: space-between}
.jc--c {justify-content: center}
.jc--start {justify-content: flex-start}
.jc--end {justify-content: flex-end}
.flf--c {flex-flow: column}
.flf--r {flex-flow: row}
.ma0 {margin: 0 auto;}
.pt--8 {padding-top: .5rem}
.pt--16 {padding-top: 1rem}
.pt--24 {padding-top: 1.5rem}
.pt--32 {padding-top: 2rem}
.pt--64 {padding-top: 4rem}
.pb--8 {padding-bottom: .5rem}
.pb--16 {padding-bottom: 1rem}
.pb--32 {padding-bottom: 2rem}
.pb--64 {padding-bottom: 4rem}
.pl--8 {padding-left: .5rem}
.pl--16 {padding-left: 1rem}
.pr--8 {padding-right: .5rem}
.pr--16 {padding-right: 1rem}
.mt--16 {margin-top: 1rem}
.mb--16 {margin-bottom: 1rem}
.p20 {width: 20%}
.p24 {width: 24%}
.p30 {width: 30%}
.p40 {width: 40%}
.p50 {width: 50%}
.p60 {width: 60%}
.p70 {width: 70%}
.p76 {width: 76%}
.p80 {width: 80%}
.p100 {width: 100%}
.fadeout {opacity: 0;}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 3rem);
    /*background: #000;*/
    /*color: #fff;*/
    font: 400 1rem/1.2rem var(--font);
    transition: all 500ms;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    margin: 0;
    padding: 0;
    font: 400 .9rem / 1.3rem var(--font);
}
figure {
    margin: 0;
    padding: 0;
}
picture img {
    width: 100%;
}
figure img {
    width: 100%;
    height: auto; 
}

.header-snippet {
    background: #18162E;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-snippet a {
    font: 400 .9rem var(--font);
    color: #fff;
}


.index {
    background: url('https://mxsn.space/images/index-background.jpg') no-repeat 0 0;
    background-size: contain;
}
.index section {
    animation: contentFadeIn ease .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.wrapper {
    margin: 0 auto;
    max-width: 1360px;
    width: 100%;
}
.intro {
    padding: 7rem 0;
}
.intro .mxprflindigo {
    width: 320px;
    height: 320px;
}
.light{
    background: #fff;
    color: #000;
}
.color-dark {
    background: #000;
}
.text-white {
    color: #fff;
}
.arrow-upright {
    --icon: url('https://mxsn.space/images/arrow-upright.svg');   
}
.icon {
    display: block;
    width: 16px;
    height: 16px;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #111;
}
a {
    font: 400 1rem var(--font);
    text-decoration: none;
    color: #111;
}
a.link {
    border-bottom: 1px solid transparent;
}
a.link:hover {
    border-bottom: 1px solid #111;
}
h1 {
    margin: 0;
    font: 700 4rem var(--font);
    max-width: 30ch;
}
.index h1 {
    text-transform: uppercase;
}
h1 span {
    font-weight: 500;
}
h2 {
    margin: 0;
    padding: 0 0 .8rem;
    font: 700 2.8rem var(--font);
}
figcaption {
    padding-top: .5rem;
    font: 400 .9rem var(--font);
    text-align: center;
    opacity: .8;
}
.figure-100 img {
    width: 100%;
    height: auto;
}

header {
    display: flex;
    flex-flow: row;
    padding: 1.5rem 1.5rem;
    width: 100%;
    justify-content: space-between;
}
.header-logo {
    display: block;
    width: 77px;
    height: 20px;
    -webkit-mask-image: url('../images/mxsn-logo.svg');
    mask-image: var('../images/mxsn-logo.svg');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #000;
}
.light .logo {
    background: #000;
}
header input[type=checkbox] {
    display: none;
}


header nav {
    padding-right: 2rem;
    display: flex;
    flex-flow: row;
    gap: 4rem;
    align-items: center;
}
header nav a {
    position: relative;
    display: flex;
    flex-flow: column;
    text-decoration: none;
    gap: .1rem;
}
header nav a.active::before {
    content: '';
    display: block;
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #8261f6;
}
header nav a span {
    font: 400 1rem/1rem var(--font);
    /*color: #fff;*/
}
.nav--active {
    position: relative;
    /*margin-top: -1.5rem;
    padding-top: 1.5rem;*/
}
.nav--active::before {
    content: '';
    display: block;
    background: #fff;
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: 2rem;
    height: 2px;
 /*   margin-top: -1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #fff;*/
    /*box-shadow: 0 0 90px 0px #fff, 0 0 60px 40px #4100eb, 0 0 300px 50px #28009f;*/
    /*background: #5524dd;*/
}
.light header nav a span {
    color: #000;
}
.navigation > span {
    background: #000;
}
header nav a span:nth-of-type(1) {
    font-weight: 700;
}
header nav a span:nth-of-type(2) {
    font-size: .9rem;
    opacity: .8;
}
header nav.dark a span {
    color: #000;
}

button {
    cursor: pointer;
    margin: 0;
    text-align: center;
    border: none;
    box-shadow: none;
    outline: none;
    white-space: nowrap;
    overflow: hidden;   
}
.button {
    flex: 0 0 auto;
}
.intro .button-outline {
    position: relative;
    margin: 0 0 1.5rem;
    display: inline-block;
    align-self: flex-start;
    padding: 6px;
    background: #DDD7FF;
    border-radius: 12px;
}
.intro .button-border {
    padding: 1px;
    background-image: linear-gradient(180deg, #EAE7F5 0%, #9984BE 100%);
    border-radius: 8px;
}
.intro .button {
    /*margin: 1rem 0;*/
    flex-direction: unset;
    padding: 0 20px;
    gap: .6rem;
    align-self: center;
    /*border: 6px solid #DDD7FF;*/
    border-radius: 8px;
    font: 800 1.2rem/57px var(--font);
    /*text-transform: uppercase;*/
    color: #070524;
    height: unset;
    background: #D4CDFF;
    transition: background 0.1s ease-in-out;
    box-shadow: none;
    background-image: linear-gradient(204deg, #8B83FF 0%, #FEC75C 72%, #FFB35B 77%, #FFD3FA 89%, #FF9DC1 100%);
}
.intro .button span {
    padding: .3rem .5rem;
    display: block;
    background: #ffe9c6;
    height: 1.5rem;
    font: 500 .9rem/1rem var(--font);
    border-radius: 1rem;
    color: #262b67;
}
/*.intro .button::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #F0E0FF;
    border-radius:4px;
}*/
.intro .button:hover {
    /*background: #e1ddf8;*/
    background-image: linear-gradient(202deg, #9992FF 0%, #FFD177 69%, #FFBF74 77%, #FFD3FA 91%, #FF9DC1 100%);
}
.intro .button:active {
    /*background: #b9b0ec;*/
    background-image: linear-gradient(202deg, #9992FF 0%, #FFD177 69%, #FFBF74 77%, #FFD3FA 91%, #FF9DC1 100%);
}
.intro .button:active::before {
    top: 0;
    bottom: 1px;
}

.currently {
    padding: 1rem 0 1.2rem;
    font: 500 .9rem/1.1rem var(--font);
    text-transform: uppercase;
}

.index h2 {
    font: 600 44px var(--font);
}

.index h2 {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: .8rem;
}

.arrow-down {
    margin-top: 6px;
    display: block;
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../images/arrow-down.svg');
    mask-image: var('../images/arrow-down.svg');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #111;
}

.case-study-content img {
    width: 100%;
}

footer {
    /*position: absolute;*/
    /*bottom: 0;*/
    padding: 1rem 0 1rem;
    display: flex;
    justify-content: center;
    width: calc(100% - 2rem);
    font: 400 .9rem/1rem var(--font);
    color: #111;
}
.light footer{
    color: rgb(0 0 0 / 70%);
}
section {
    margin: 0 auto;
    padding: 2rem 0;
    width: clamp(240px, calc(100% - 3rem), 1360px);
    transition: var(--def-transition);
}
.section-full-width {
    margin: 0 2rem;
    padding: 2rem;
    width: calc(100% - 4rem);
    border-radius: .5rem;
}
.section-edge-to-edge {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}
.section-edge-to-edge .wrapper {
    padding: 2rem 0 1rem;
    width: clamp(240px, calc(100% - 3rem), 1360px);
}
.section-edge-to-edge figure {
    margin: 0;
}
.section-edge-to-edge .case-intro-image {
    /*margin-top: -3rem;*/
}
header a {
    color: #000;
    text-decoration: none;
}
.avatar {
    width: 44px;
    height: 44px;
}

.case-study-text {
    margin: 0;
    max-width: 56ch;
    font: 400 22px/28px var(--font);
}

.button-view-case {
    display: flex;
    align-items: center;
    padding: 3px 20px 5px;
    height: 56px;
    border: 3px solid #ECEAF1;
    border-radius: 8px;
    font: 600 16px/44px var(--font);
    color: #28233B;
    text-align: center;
    text-decoration: none;
    transition: var(--def-transition);
}
.button-view-case:hover {
    background: #ECEAF1;
}


.project-title {
    font: 600 2rem var(--font);
}

.case-studies .more-link i {
    width: 10px;
    height: 10px;
}

.design-process {
    margin-top: 2rem;
    padding-top: 3rem;
    background: #F6F4F0;
}
.design-process picture img {
    margin-top: 4rem;
}

.index .feedback {
    padding-top: 8rem;
}

blockquote {
    margin: 0;
}
.feedback-cards {
    flex-wrap: wrap !important;
}
.feedback-cards > div {
    width: calc(33% - 3rem) !important;
}
.feedback > .wrapper > .flex > .flex {
    width: 33%;
}
.feedback-card {
    display: flex;
    flex-flow: column;
    gap: .5rem;
    /*padding: 4.4rem 1.5rem 1.4rem;*/
    /*background: #fff url('../images/lps/design-redefined/quote.svg') no-repeat 1.5rem 1.5rem;*/
    /*border-radius: .6rem;*/
    /*border: 1px solid #ece4df;*/
}
.feedback-card blockquote {
    padding: 0;
    margin: 0;
    font: 500 italic 1.1rem/1.8rem var(--font);
    /*font-style: italic;*/
}
.feedback-card p {
    margin: 0;
    padding: 0 0 .5rem;
    font: 400 .9rem/1.1rem var(--font);
    opacity: .6;
}
.feedback-card .feedback-my-role {
    /*padding-bottom: .5rem;*/
    margin-top: .5rem;
    font: 600 1.1rem/1.4rem var(--font);
    color: #000;
    opacity: 1;
}
.feedback-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
}
.feedback-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.feedback-avatar span {
    font: 500 1rem/1rem var(--font);
}
.feedback-card .feedback-name {
    margin: 0;
    padding: 0;
    font: 500 1rem/1rem var(--font);
    opacity: 1;
}
.feedback-card .align--center .feedback-name {
    padding: 0;
}
.feedback-card .feedback-role {
    margin: 0;
    padding: .5rem 0 0;
    font: 400 .9rem/1rem var(--font);    
    opacity: 1;
}

.text-highlight {
    padding: .1rem 0;
    /*opacity: .5;*/
}
.highlight-purple {
    background: #D2B6FF;
}
.highlight-orange {
    background: orange;
}
.highlight-yellow {
    background: #FFCC3E;
}
.highlight-green {
    background: #9edc9a;
}


/* PORTFOLIO */
.portfolio section {
    animation: contentFadeIn ease .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.portfolio .project-list .project {
    margin-top: 4rem;
}
.case-studies {
    padding-top: 4rem;
}
.case-studies .case-study {
    margin: 0 0 2rem;
    width: 100%;
}
.case-studies .project-title {
    padding-bottom: .6rem;
}
.case-studies .project-title h2 {
    font: 600 2.4rem var(--font);
}
.case-studies .project-info {
    padding-right: 2rem;
    width: 35%;
}
.case-studies .project-info time {
    display: block;
    font: 400 1rem var(--font);
    opacity: .8;
}
.case-studies .project-description {
    padding: .6rem 0 2rem;
    font: 400 1rem/1.3rem var(--font);
}
.case-studies .button-view-case {
    display: inline-block;
}
.case-studies .case-study-figure {
    margin: 0;
    width: 65%;
    max-height: 520px;
    border-radius: .3rem;
    overflow: hidden;
}
.case-studies .case-study-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .9s ease-in-out 0s;
}
.case-studies .case-study-figure a:hover img {
    transform: scale(1.03);
}


/* CASE STUDY */

.case-study {
    /*margin-bottom: 8rem;*/
    width: 100%;
}
.case-study-label,
.pre-headline {
    font: 600 .9rem var(--font);
    text-transform: uppercase;
    opacity: .7;
}
.case-study-title {
    font: 400 1.8rem var(--font);
}
body.case-study img {
    width: 100%;
    opacity: 0;
}
body.case-study .light-mode img {
    opacity: 1;
}
.noscript {
    background: #fff;
}
.noscript img {
    opacity: 1;
}
.case-study .case-intro-image {
    animation: floatUp ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes floatUp {
    0% {
        opacity: 0;
        /*transform: translateY(1rem);*/
    }
    20% {
        opacity: 1;
    }
    100% {
        /*opacity: 1;*/
        transform: translateY(-.6rem);
    }
}
.case-study .case-intro-image img {
    border-radius: 12px;
}
.case-study .briefly {
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    align-items: baseline;
}
.case-study .briefly p {
    margin: 0;
}
.case-study .briefly p:nth-of-type(1){
    font-weight: 700;
}
.case-study h1 {
    font: 700 1.5rem var(--font);
}
.case-study h2 {
    font: 700 2.5rem var(--font);
}
.case-study h3 {
    margin: 0;
    padding: 1rem 0 0;
    font: 600 1.8rem var(--font);
}
.case-study p {
    margin: 0;
    padding: .5rem 0;
    max-width: 72ch;
    font: 400 1rem/1.3rem var(--font);
}
.case-study p.big {
    max-width: 64ch;
    font: 400 1.4rem/2rem var(--font);
}
.case-study section {
    padding-bottom: 6rem;
}
.case-study .credentials-avatar img {
    width: 80px;
    height: 80px;
}

/* BLOG */
.blog section {
    padding-top: 4rem;
    max-width: 760px;
}
.blog section > div:nth-of-type(1) {
    margin-top: 2rem;
}
.blog a {
    font: 600 1.3rem/1.5rem var(--font);
}
.post-desc {
    margin: 0;
    padding: .2rem 0 2rem;
    max-width: 64ch;
    font: 400 .96rem/1.2rem var(--font);
    opacity: .7;
}

/* BLOG POST  */

.publication-info {
    padding-top: 1rem;
}
.publication-info img {
    margin-right: .5rem;
    width: 24px;
    height: 24px;
}
.blog-post a {
    font-size: inherit;
}

.blog-post {
    display: flex;
    gap: 3rem;
}
.blog .blog-post {
    max-width: 1160px;
}
.blog-post aside {
    width: 28%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
.blog-post aside .subscription {
    margin-top: 1rem;
    padding: 2rem;
    display: flex;
    flex-flow: column;
    gap: .3rem;
    background: #271d56;
    border-radius: .8rem;
    /*box-shadow: 0 0 0 2px inset #4218ff;*/
}
.blog-post aside .subscription h2 {
    margin: 0;
    padding: 0;
    font: 700 1.4rem/1.6rem var(--font);
    color: #fff;
}
.blog-post aside .subscription ul li {
    margin-left: .7rem;
    padding: .2rem 0 .2rem .1rem;
    font: 400 .9rem/1.1rem var(--font);
    list-style: circle;
    color: #fff;
}
.blog-post aside .subscription input {
    position: relative;
    margin: .2rem 0 .2em 0;
    padding: 0 .6em;
    max-width: 480px;
    height: 2.5em;
    font: 400 1rem / 1.4rem var(--font);
    color: #111;
    background: #fff;
    border: 1px solid transparent;
    border-radius: .4em;
}
.blog-post aside .subscription input:focus {
    background: #fff;
    border: 1px solid #000;
}
.blog-post aside .subscription input:not(:placeholder-shown) {
    background: #fff;
    border: 1px solid #a4a7d3;
}
.blog-post aside .subscription button {
    padding: 0 1rem;
    display: inline-block;
    align-self: flex-start;
    font: 700 1rem/2.6rem var(--font);
    color: #fff;
    background: #4218ff;
    border-radius: .4em;
    height: 2.5em;
    transition: var(--def-transition);
}
.blog-post aside .subscription button:hover {
    background-color: #8519ff;
}
.blog-post aside .subscription .small {
    padding: .2rem 0 0;
    font: 400 .8rem/1rem var(--font);
    opacity: .8;
    color: #fff;
}
.blog-post aside {
    display: flex;
    flex-flow: column;
    gap: 2rem;
}
.blog-post aside .interactions {
    display: none; /*display: flex;*/
    flex-flow: column;
    gap: .8rem;   
}
.blog-post aside .interactions button {
    position: relative;
    overflow: visible;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    border: 1px solid #111;
    background: transparent;
}

.article-container {
    width: 72%;
}
.single-article {
    margin: 0 auto;
    padding: 0 1rem 1rem;
    /*max-width: 88ch;*/
    animation: contentFadeIn ease .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.single-article .publication-info span {
    opacity:.7;
}
.single-article .publication-info img {
    width: 32px;
    height: 32px;
    margin-right: .3rem;
}
.single-article h1 {
    margin: 0;
    padding: .5rem 0;
    font: 700 3.2rem/3.4rem var(--font);
}
.single-article h2 {
    margin: 0;
    padding: 1.5rem 0 .5rem;
}
.single-article h3 {
    margin: 0;
    padding: 1rem 0 .5rem;
}
.single-article p {
    padding: .5rem 0;
}
.single-article p,
.single-article a,
.single-article li {
    max-width: 68ch;
    /*font: 400 1rem/1.4rem var(--font);*/
    font: 400 1.1rem/1.4rem var(--font);
}
.single-article a {
    font-weight: 700;
}
.single-article ol{
    padding-left: 1.2rem;
}
.single-article ol li {
    padding: .2rem 0;
    list-style: decimal;
}
.single-article ul {
    padding-left: 1rem;
}
.single-article ul li {
    padding: .2rem 0 .2rem .4rem;
    list-style: circle;
    /*list-style: inside circle;*/
}
.single-article figure {
    padding: 1.2rem 0 1rem;
}
.single-article figure:nth-of-type(1) {
    padding-top: 0;
}
.single-article figure figcaption {
    padding: .2rem 0 0;
    font: 400 .8rem/1.2rem var(--font);
    color: #555;
}
.single-article blockquote {
    margin: .7rem 0;
    padding: .2rem 0 .2rem 1rem;
    border-left: 3px solid #000;
    font: 700 1.1rem/1.4rem var(--font);
}
.related-posts a img {
    border-radius: .3rem;
}
.blog-post .interactions {
    display: none;
}


/* COMMENTS AREA */
.comments .comment-new,
.comment-new-email input,
.comment-website input {
    padding: .5rem;
    width: 100%;
    height: 44px;
    transition: var(--transition);
    background: rgba(240, 240, 240);
    border-radius: .4rem;
    border: none;
    resize: none;
    font: 400 1rem/1.3rem var(--font);
}

.comment-new-email {
    padding: .5rem 0;
}
.comment-website {
    padding: 0 0 .5rem;
}

input {
    max-width: 480px;
}

.comment-new-email .small {
    padding: .5em 0;
    max-width: 480px;
    font: 400 .8em/1.4em var(--p-font);
    color: rgba(0, 0, 0, 0.5);
}

textarea:focus,
input:focus,
.comments .comment-new:focus {
    background: rgba(0, 0, 0, 0.02);
    border: 2px solid rgba(0, 0, 0, 0.9);
    outline: none;
}

.comments .small {
    font: 400 .8rem/1.1rem var(--font);
    word-break: auto-phrase;
    color: var(--dark);
    opacity: 0.6;
}

.comments .buttons {
    gap: .8rem;
}
.comments .buttons > * {
    box-shadow: none;
    border-radius: .4rem;
    background: #111;
}
.comments .button-cancel {
    display: none;
}
.comment-name {
    font: 500 1rem/1rem var(--font);
}
.comment-date {
    font: 400 1rem/1rem var(--font);
    opacity: .5;
}
/* end COMMENTS */

.page-layout {
    margin: 0 auto;
    padding: 3rem 0;
    max-width: 980px;
    width: 100%;
    animation: contentFadeIn ease .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.page-layout h1 {
    margin: 0;
    padding: 2rem 0 2rem;
}
.page-layout h2 {
    margin: 0;
    padding: 2rem 0 0;
    font: 600 1.9rem/2.2rem var(--font);
}
.page-layout h3 {
    margin: 0;
    padding: 1.3rem 0 .5rem;
    font: 600 1.5rem/1.8rem var(--font);
}
.page-layout p {
    /*max-width: 940px;*/
    font: 400 1.1rem/1.4rem var(--font);
}
.page-layout .p50 >p,
.page-layout .p50 ul li {
    font: 400 1rem/1.4rem var(--font);
}
.page-layout ul {
    margin: 0;
    padding: 0;
}
.page-layout ul li {
    padding: .3rem 0 .5rem;
    list-style: none;
}
.page-layout blockquote {
    margin: .5rem 0;
    padding: .5rem .6rem;
    background: rgba(0, 0, 0, .07);
    border-radius: .6rem;
    font: 400 1rem/1.3rem var(--font);
}
.page-layout a {
    font: 400 1.1rem/1.4rem var(--font);
    border-bottom: 1px solid transparent;
}
.page-layout a:hover {
    border-color: #000;
}

.services article ul {
    padding-top: .9rem;
}

.services-cta {
    margin: 3rem 0;
    padding: 3rem 4rem;
    width: 100%;
    background: #2c2a34;
    color: #fff;
    border-radius: 1rem;
}
.services-cta h2 {
    padding: 0;
}
.services-cta a {
    color: #fff;
}
.services-cta .button {
    display: inline-block;
    margin-right: .2rem;
    padding: .6rem .7rem .5rem;
    background: #fff;
    border: none;
    border-radius: .5rem;
    font: 600 1.1rem var(--font);
    text-decoration: none;
    color: #2c2a34;
}
.services-cta .button:hover {
    background: #8261f6;
    color: #fff;
}

.quote-button {
    display: none;
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 3;
    padding: 6px;
}

.quote-button .button-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*filter: blur(5px);*/
    /*background: #A4A7FF;*/
    z-index: 2;
    border-radius: 1rem;

    background: rgba(255, 255, 255, 0.1); /* Light transparent background */
    /*border-radius: 16px;*/
    /*padding: 2rem;*/
    /*box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);*/
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.02), 0 5px 8px 0 rgba(0, 0, 0, 0.03), 0 12px 18px 0 rgba(0, 0, 0, 0.04), 0 40px 60px 0 rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
}

.quote-button button,
.portfolio.light .quote-button {
    position: relative;
    flex-direction: row-reverse;
    align-items: center;
    gap: .4rem;
    padding: 0 1.1rem;
    height: 52px;
    border-radius: 0.7rem;
    /*background: #ae9afd;*/
    background-image: linear-gradient(136deg, #0E0BBE 0%, #1F16C3 71%, #BD80F1 90%, #FFD8A1 100%, #FF8247 100%);
    color: #fff;
    
    font: 700 1rem / 1rem var(--font);
    z-index: 3;
    transition: var(--def-transition);
}

.quote-button button:hover,
.portfolio.light .quote-button:hover {
    /*background: #9fb0ff;*/
    background-image: linear-gradient(136deg, #0400F0 0%, #1A10EB 71%, #F180D1 90%, #FFD8A1 100%, #FF8247 100%, #FFB448 100%);
}

.quote-button button i {
    width: 20px;
    height: 20px;
    background: #1F1E41;
    --chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='chat' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M19.5,2.41690045 C21.709139,2.41690045 23.5,4.20776145 23.5,6.41690045 L23.5,15.6435483 C23.5,17.8526873 21.709139,19.6435483 19.5,19.6435483 L13.5916087,19.6435483 L8.03501072,23.8305105 L8.03501072,19.6435483 L4.63438491,19.6435483 C2.42524591,19.6435483 0.634384913,17.8526873 0.634384913,15.6435483 L0.634384913,6.41690045 C0.634384913,4.20776145 2.42524591,2.41690045 4.63438491,2.41690045 L19.5,2.41690045 Z M6.5,14 L4.5,14 L4.41012437,14.0080557 C4.17687516,14.0503916 4,14.2545401 4,14.5 C4,14.7454599 4.17687516,14.9496084 4.41012437,14.9919443 L4.5,15 L6.5,15 L6.58987563,14.9919443 C6.82312484,14.9496084 7,14.7454599 7,14.5 C7,14.2545401 6.82312484,14.0503916 6.58987563,14.0080557 L6.5,14 Z M14.5,14 L8.5,14 L8.41012437,14.0080557 C8.17687516,14.0503916 8,14.2545401 8,14.5 C8,14.7454599 8.17687516,14.9496084 8.41012437,14.9919443 L8.5,15 L14.5,15 L14.5898756,14.9919443 C14.8231248,14.9496084 15,14.7454599 15,14.5 C15,14.2545401 14.8231248,14.0503916 14.5898756,14.0080557 L14.5,14 Z M15.5,11 L4.5,11 L4.41012437,11.0080557 C4.17687516,11.0503916 4,11.2545401 4,11.5 C4,11.7454599 4.17687516,11.9496084 4.41012437,11.9919443 L4.5,12 L15.5,12 L15.5898756,11.9919443 C15.8231248,11.9496084 16,11.7454599 16,11.5 C16,11.2545401 15.8231248,11.0503916 15.5898756,11.0080557 L15.5,11 Z M19.5,11 L17.5,11 L17.4101244,11.0080557 C17.1768752,11.0503916 17,11.2545401 17,11.5 C17,11.7454599 17.1768752,11.9496084 17.4101244,11.9919443 L17.5,12 L19.5,12 L19.5898756,11.9919443 C19.8231248,11.9496084 20,11.7454599 20,11.5 C20,11.2545401 19.8231248,11.0503916 19.5898756,11.0080557 L19.5,11 Z M13.5,6.5 L5,6.5 L4.88337887,6.50672773 C4.38604019,6.56449284 4,6.98716416 4,7.5 C4,8.01283584 4.38604019,8.43550716 4.88337887,8.49327227 L5,8.5 L13.5,8.5 L13.6166211,8.49327227 C14.1139598,8.43550716 14.5,8.01283584 14.5,7.5 C14.5,6.98716416 14.1139598,6.56449284 13.6166211,6.50672773 L13.5,6.5 Z' id='Shape' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: var(--chat);
    mask-image: var(--chat);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.chat-widget-content {
    /*opacity: 0;*/
    position: fixed;
    top: 0;
    /*right: -1500px;*/
    /*animation: movein .3s forwards;*/
    /*opacity: 0;*/
    
    padding: 1rem;
    width: 100%;
    height: 100%;
    z-index: 100;
    flex-flow: column;
    display: flex;
    /*background: #000;*/
    background: rgb(0 0 0 / 50%);
    /*background: rgb(0 0 0 / 50%);*/
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein;
        animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein;
}

.chat-widget-container {
    position: fixed;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    background: #fff;
    border-radius: .5rem;
    animation: movein 0.3s both;
}

@keyframes movein {
        0% {
            top: 32px;
        }

        100% {
            top: 16px;
            opacity: 1;
        }
    }

.chat-widget-header {
    width: 100%;
    height: 80px;
}

.chat-widget-logo-container {
    align-items: center;
    align-self: flex-start;
    color: #2C3E56;
}

.chat-widget-logo {
    width: 77px;
    height: 20px;
    padding: .4rem;
    background: #000;
    -webkit-mask-image: url('../images/mxsn-logo.svg');
    mask-image: var('../images/mxsn-logo.svg');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.chat-widget-form {
    margin: 0 auto;
    /*position: absolute;*/
    /*top: 50%;*/
    align-items: flex-start;
    width: clamp(320px, 100%, 620px);
    /*transform: translateY(-50%);*/
    gap: 1.5rem;
}

.light .chat-widget-form, .light .chat-widget-content h1, .light .input-label label, .light .input-label .helper-text {
    color: #fff;
}

.chat-widget-content h1 {
    margin: 0;
    padding: 1rem 0 1rem 0;
    font: 700 3.2rem/2.4rem var(--font);
    text-transform: none;
    color: #000;
}

.input-label {
    display: flex;
    flex-flow: column;
    gap: .5rem;
    width: 100%;
}

.input-label label {
    font: 400 1rem/1.2rem var(--font);
    color: #000;
}

.input-label * {
    width: 100%;
}

.input-label input,
select {
    padding: 0 .8rem;
    width: 100%;
    height: 3rem;
    font: 400 1rem/1rem var(--font);
}

.input-label label span,
.input-label input::placeholder {
    opacity: .5;
}

select {
    padding: 0 .8rem;
}

.input-label input,
.input-label textarea,
select {
    background: #e7e8f5;
    border: 2px solid transparent;
    border-radius: .4rem;
    -webkit-appearance: none;
    outline: none;
}

.input-label input::placeholder,
.input-label textarea::placeholder,
select::placeholder {
    color: #968ebf;
}

.input-label input:focus,
.input-label textarea:focus,
select:focus {
    background: #fff;
    border: 2px solid #3a00ff;
}
.input-label input:not(:placeholder-shown),
.input-label textarea:not(:placeholder-shown),
select:not(:placeholder-shown) {
    background: #fff;
    border: 2px solid #000;
}

.input-label textarea {
    padding: .5rem .8rem;
    height: 120px;
    font: 400 1rem/1.3rem var(--font);
    border-radius: .3rem;
}

.input-label .helper-text {
    font: 400 .9rem/1.2rem var(--font);
    opacity: .8;
    color: #000;
}

.button-chat-submit {
    position: relative;
    /*padding: 0 1.2rem;*/
    /*width: auto;*/
    /*color: #fff;*/
    /*background: #0A08AE;*/
    font: 700 1rem/1rem var(--font);
    /*background-image: linear-gradient(225deg, #9cbfff 0%, #5c18ff 100%);*/
    /*background-image: linear-gradient(225deg, #6853ff 30%, #ff7822 100%);*/
    /*display: flex;*/
    /*flex-flow: row;*/
    align-items: center;
    min-width: 188px;
    padding: 0 1rem 0 .9rem;
    height: 56px;
    border-radius: 0.8rem;
    background: #ae9afd;
    color: #1F1E41;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.02), 0 5px 8px 0 rgba(0, 0, 0, 0.03), 0 12px 18px 0 rgba(0, 0, 0, 0.04), 0 40px 60px 0 rgba(0, 0, 0, 0.07);
    z-index: 3;
    font: 700 1rem / 1rem var(--font);
    text-align: left;
    border: 6px solid #e5e2fe;
}
.button-chat-submit i.arrow-long-moving-x {
    position: absolute;
    top: calc(50% - 9px);
    left: unset;
    right: 1rem;
    margin: 0;
    padding: 0;
    display: flex;
    width: 18px;
    height: 18px;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-image: url('../images/arrow-long.svg');
    mask-image: url('../images/arrow-long.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /*background: #000;*/
    background: #1F1E41;
    /*left: calc(50% - 10px);*/
    transition: var(--def-transition);
}

.button-chat-submit:hover i.arrow-long-moving-x {
    transform: translateX(4px);
    transform-origin: left;
}

.close-quote {
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #f0ecfb;
    height: 2rem;
    color: #968ebf;
    padding: 0.2rem 0.9rem;
    font: 500 0.96rem/27px var(--font);
    text-transform: lowercase;
    border-radius: .3rem;
}

.moveout {
    /*animation: moveout .3s forwards;*/
    display: none;
}

.prefix {
    padding: 0 0 1rem;
    font: 500 .9rem var(--font);
    color: #000000;
    text-transform: uppercase;
    opacity: .7;
}
.portfolio .prefix:nth-of-type(2) {
    padding: 0;
}


/* Gallery Container */
.image-gallery-container {
    position: relative;
    width: 100%;
}
.image-gallery-container::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 70%, white 100%);   
}
.image-gallery {
    position: relative;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0;
  gap: 1rem;
  scrollbar-width: none;
}
.image-gallery::-webkit-scrollbar {
  display: none;
}
.image-gallery figure {
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    width: 250px;
    height: 187px;
    border-radius: .3rem;
    overflow: hidden;
}
.image-gallery figure img {
  /*height: 200px;*/
  transition: transform 0.2s;
  /*object-fit: contain;*/
  width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-gallery img:hover {
  transform: scale(1.05);
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.modal-content {
  /*position: relative;*/
  max-width: 90%;
  max-height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.arrow {
  position: absolute;
  top: 50%;
  font-size: 3rem;
  color: white;
  cursor: pointer;
  user-select: none;
  margin-top: -20px;
  padding: 0 15px;
  transform: translateY(-50%);
  text-indent: -999px;
    --icon: url('../images/arrow-chevron.svg');   
    display: block;
    width: 40px;
    height: 40px;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #fff;
}
.arrow.left {
  left: 1rem;
  transform: rotate(180deg);
}
.arrow.right {
  right: 1rem;
}

.close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

/* Thumbnail Bar */
.thumbnail-bar {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-top: 20px;
  padding: 10px;
  max-width: 90%;
}
.thumbnail-bar img {
  height: 60px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
.thumbnail-bar img.active,
.thumbnail-bar img:hover {
  opacity: 1;
  transform: scale(1.1);
}

.services-headline {
    /*margin-left: calc(-10% + 1.5rem) !important;*/
    padding-top: 3rem !important;
    font: 600 .9rem var(--font) !important;
    text-transform: uppercase;
}
.services-showcase {
    padding: 1rem;
    margin: 1.5rem -10% 2rem -10%;
    display: flex;
    width: 120%;
    flex-flow: row;
    flex-wrap: nowrap;
    gap: .8rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgb(210 210 210);
    border-radius: 1rem;
}
.service-item {
    padding: .5rem;
    display: flex;
    flex-flow: column;
    flex: 1 0 auto;
    max-width: 320px;
    background: #fff;
    border-radius: .8rem;
}
.service-item:hover {
    cursor: pointer;
    transform: scale(1.01);
}
.service-item figure {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 56%;
    background: rgb(56 56 56);
    border-radius: .4rem;
    overflow: hidden;
}
.service-item figure img {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.service-title {
    padding: .5rem 0 0;
    font: 600 1rem var(--font);
}
.service-description {
    padding: .2rem 0 .2rem;
    font: 400 .9rem/1.1rem var(--font);
}
.service-time,
.service-price {
    font: 400 .9rem/1.1rem var(--font);
}

.chat-widget-form .add-ons {
    width: 100%;
}
.chat-widget-form .service-item {
    max-width: 100%;
    width: 100%;
    min-height: 120px;
    flex-flow: row;
    gap: 1rem;
}
.chat-widget-form .service-item:hover {
    cursor: default;
    transform: none;
}
.chat-widget-form .service-item > div {
    padding: 0 .3rem .3rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;   
}
.chat-widget-form .service-item figure {
    width: 35%;
    padding-bottom: unset;
}


/* DARK MODE */
@media (prefers-color-scheme: dark) {
    body, .index, .portfolio {
        background: #000;
        color: #fff;
    }
    .prefix { 
        color: #fff;
    }
    .link {
        color: #fff;
    }
    a.link:hover {
        border-bottom-color: #fff;
    }
    .blog a {
        color: #fff;
    }
    .index {
        background: #000 url('../images/mxsn-background-dark.jpg') no-repeat center 0;
        background-size: contain;
    }
    .header-logo {
        background: #fff;
    }
    header a {
        color: #fff;
    }

    .navigation > span {
        background: #fff;
    }
    .case-study .navigation > span {
        background: #000;
    }
    .light .navigation > span {
        background: #000;
    }
    .intro .button-outline {
        background: #51439C;
    }
    .button-view-case {
        color: #fff;
        border-color: rgba(255, 255, 255, .4) !important;
    }
    .button-view-case:hover {
        color: #000;
    }
    .index .arrow-upright {
        background: #fff;
    }
    .feedback-card .feedback-my-role {
        color: #fff;
    }
    .text-highlight {
        color: #000;
    }
    body.case-study,
    body.case-study header a {
        color: #000;
    }
    body.case-study .header-logo {
        background: #000;
    }
    footer {
        color: rgb(255 255 255 / 70%);
    }
    .case-studies .button-view-case {
        display: inline-block;
        border: 2px solid #fff;
    }
    .design-process {
        background: #000;
    }
    .comments .comment-new, .comment-new-email input, .comment-website input {
        background: transparent;
        border: 2px solid #a996ff;
        color: #fff;
    }
    textarea:focus, input:focus, .comments .comment-new:focus {
        border: 2px solid #fff;   
    }
    .comments .buttons > * {
        background: #fff;
        color: #000;
    }
    .quote-button .button-outline {
        background: rgba(185, 177, 255, 0.7);
    }

    .chat-widget-container,
    .chat-widget-header {
        background: #2a2642 !important;
    }
    .chat-widget-logo {
        background: #fff;
    }
    .chat-widget-container h1,
    .chat-widget-container label,
    .chat-widget-container .helper-text {
        color: #fff;
    }
    .chat-widget-container .input-label input, 
    .chat-widget-container .input-label textarea, 
    .chat-widget-container select {
        background: #000;
        color: #fff;
    }
    .chat-widget-container .input-label input:focus, 
    .chat-widget-container .input-label textarea:focus, 
    .chat-widget-container select:focus {
        border: 2px solid #5c5bb8;
    }
    .chat-widget-container .button-chat-submit {
        border-color: #5d5697;
    }
    .chat-widget-container .close-quote {
        background: #170d3e;
    }
    .image-gallery-container::before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%, black 100%);   
    }

    .page-layout blockquote {
        background: #272727;
    }
    .page-layout a {
        color: #fff;
    }
    .page-layout a:hover {
        border-color: #fff;
    }
    .services-cta {
        background: #fff;
        color: #000;
    }
    .services-cta .button {
        background: #000;
        color: #fff;
    }
    .services-cta .link {
        color: #000;
        border-color: #000;
    }
    .services-showcase {
        background: rgb(64 64 64);        
    }
    .service-item {
        background: rgb(30 30 30);
    }
}

@media screen and (max-width: 1440px) {
    section {
        max-width: 1280px;
    }
}
@media screen and (max-width: 1220px) {
    .services-showcase {
        margin: 1.5rem 0 2rem 0;
        width: 100%;
    }
}
@media screen and (max-width: 940px) {
    .intro {
        padding-top: 0;
    }
    .intro .mxprflindigo {
        width: 30%;
        height: auto;
        align-self: center;
    }
    .intro-content {
        flex-flow: column;
        gap: 2rem;  
    }
    .case-studies .case-study {
        flex-flow: column;
    }
    .case-studies .case-study-figure {
        order: 1;
        width: 100%;
    }
    .case-studies .project-info {
        order: 2;
        width: 100%;
    }
    .article-container {
        width: 100%;
    }
    .single-article {
        padding: 0;
    }
    .blog-post {
        flex-flow: column;
        gap: 0;
    }
    .blog-post aside {
        width: 100%;
    }
    .services-cta {
        background: #fff;
        color: #000;
        margin: 0 1rem;
        width: calc(100% - 2rem);
    }
}

@media screen and (max-width: 860px) {
    header .navigation {
        top: 1.4rem;
        right: 1.5rem;
        cursor: pointer;
        display: block;
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 2;
        -webkit-user-select: none;
        user-select: none;
    }
    header nav {
        display: none;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        padding: 160px 0 0 0;
        width: 100%;
        height: 100vh;
        text-align: center;
        z-index: 1;
        /*background: var(--light);*/
        -webkit-animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein;
        animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein;
        background: #000;
    }
    header input[type=checkbox] {
        display: block;
    }
    .navigation nav {
        display: none;
    }
    .navigation nav a span:nth-of-type(1) {
        font: 700 1.5rem/1.7rem var(--font);
    }
    .navigation input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        z-index: 3;
        -webkit-touch-callout: none;
    }
    .navigation > span {
        display: block;
        width: 30px;
        height: 3px;
        margin-bottom: 5px;
        position: relative;
        border-radius: 2px;
        z-index: 2;
        transform-origin: 4px 0;
        transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease;
    }
    .light .navigation > span {
        background: #000;
    }
    .navigation > span:nth-last-child(2) {
        transform-origin: 0 100%;
    }
    .navigation > span:first-child {
        transform-origin: 0 0
    }

    .navigation > span:nth-last-child(2) {
        transform-origin: 0 100%
    }

    .navigation input:checked {
        border: 1px solid red;
    }

    .navigation input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(2px, -4px);
    }

    .navigation input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0) scale(.2, .2)
    }

    .navigation input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(4px, 4px)
    }

    .navigation input:checked~nav {
        display: flex;
        flex-flow: column;
        gap: 1.8rem;
        opacity: 1;
        -webkit-animation: .5s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein;
        animation: .5s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein
    }
    .navigation input:checked~nav a span {
        color: #fff;
    }
    .navigation input:checked~span {
        background: #fff;
    }
    header .logo:has(+ .navigation input:checked) {
        background: #fff;
        z-index: 3;
    }

    h1 {
        font-size: 2.5rem;
    }


   

    .case-studies .project-title h2 {
        font: 600 2.2rem/2rem var(--font);
    }

    .button-and-text {
        flex-flow: column;
    }
    .button-and-text .button {
        order: 2;
    }

    .feedback-cards .feedback-column {
        width: calc(50% - 2rem) !important;
    }
    .feedback-cards .feedback-column:nth-of-type(3) {
        display: none;
    }
    .feedback-card {
        width: 100%;
    }
    .case-study .flf--r {
        flex-flow: column;
    }
    .case-study section .p20,
    .case-study section .p24,
    .case-study section .p30,
    .case-study section .p40,
    .case-study section .p50,
    .case-study section .p60,
    .case-study section .p70,
    .case-study section .p76,
    .case-study section .p80 {
        width: 100%;
    }
    .case-study .briefly {
        flex-direction: column;
    }
    .case-study .credentials > div {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .case-study-label {
        margin-bottom: .5rem;
    }

    .page-layout .flf--r {
        gap: 3rem;
    }
}

@media screen and (max-width: 640px) {
    h1 {
        font-size: 2.2rem;
    }
    .case-studies .project-title h2 {
        font: 600 1.8rem/2rem var(--font);
    }
    .case-studies .project-description {
        padding: .4rem 0 1.5rem;
    }
    .feedback-cards {
        gap: 2rem;
    }
    .feedback-cards blockquote {
        font: 400 italic 1rem/1.4rem var(--font);
    } 
    .feedback-card .feedback-my-role {
        font: 600 1rem/1.2rem var(--font);
    }

    .quote-button {
        right: 8px;
        bottom: 12px;
        width: calc(100% - 16px);
    }
    .quote-button button {
        width: 100%;
        height: 52px;
    }
    .chat-widget-content {
        padding: .5rem;
    }
    .chat-widget-container {
        width: calc(100% - 1rem);
    }
    .chat-widget-header {
        height: 56px;
    }
    .button-chat-submit {
        min-width: 100%;
        width: 100%;
        height: 62px;
        box-shadow: none;
    }
    .page-layout .flf--r {
        flex-flow: column;
        gap: unset;
    }
    .page-layout .flf--r .p50 {
        width: 100%;
    }
}

@media screen and (max-width: 414px) {
    .index h2 {
        font-size: 34px;
    }
    .case-studies .case-study {
        margin-top: 0;
    }
    .feedback-cards {
        flex-flow: column;
    }
    .feedback-cards .feedback-column {
        width: 100% !important;
    }
    .section-full-width {
        margin: 2rem .5rem 0;
        padding: 1.6rem;
        width: calc(100% - 1rem);
    }
    .design-process picture img {
        margin-top: 2rem;
    }
    footer {
        padding-bottom: 6rem;
        width: 100%;
    }
    footer .flex {
        width: 100%;
    }
    footer .flex > div:nth-of-type(1) {
        width: 100%;
        text-align: center;
    }
    footer .flex > div:nth-of-type(2) {
        display: none;
    }
    .chat-widget-form {
        padding-top: 3rem;
        width: 100%;
    }
    .chat-widget-container {
        overflow-y: scroll;
    }
    .chat-widget-header {
        width: calc(100% - 3.5rem);
        position: fixed;
        background: #fff;
        top: 1rem;
        padding-top: 1.5rem;
    }
    .input-label textarea {
        width: 100%;
    }
    .close-quote {
        right: 0rem;
    }
    .section-edge-to-edge .case-intro-image {
        margin-top: -1rem;
    }
    .case-study h2 {
        font: 700 2.2rem/2.4rem var(--font);
    }
    .case-study h3 {
        font: 600 1.6rem/1.9rem var(--font);
    }
}