/*
Theme Name: KammCommunnication
Author: EcomFroge
Description: Child of 20-20
Version: 1.0
Template: twentytwentyone

This is the child theme for Twenty Twenty-One theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/



@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: "IBM Plex Sans", sans-serif;
    background:#fff;
    color: #202020;
    font-size: clamp(16px, calc((17/1512) * 100vw), 18px); 
    line-height: 1.45;
}

/* =========================
   CONTAINER
========================= */

.container{
    width:100%;
    /* max-width:1500px; */
    margin:0 auto;
    padding:0 calc((50/1512) * 100vw); 
    font-weight: 400;
}

/* =========================
   HEADER
========================= */

.site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    padding:calc((30/1512) * 100vw) 0;
}

.site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    color:#fff;
    text-decoration:none;
    width: calc((183/1512) * 100vw);
}

.logo img{
    width: 100%;
    display: block;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:calc((50/1512) * 100vw);
    list-style:none;
}

.main-nav a{
    color:#fff;
    text-decoration:none;
    /* font-size:14px; */
    font-size: clamp(15px, calc((16/1512) * 100vw), 17px); 
    font-weight: 500;
    transition: all .3s ease;
    text-transform: uppercase;
}

.main-nav a:hover{
    /* opacity:.7; */
}

.header-btn{
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.25);
    border-radius:100px;
    padding:14px 26px;
    /* font-size:14px; */
    transition:.3s;
}

.header-btn:hover{
    background:#fff;
    color:#000;
}

/* =========================
   HERO
========================= */

.hero-banner{
    position:relative;
    height:85vh;
    overflow:hidden;
    display: flex;
    align-items: center;
}

.hero-banner .hero-video,
.hero-banner .hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-banner .hero-overlay{
    position:absolute;
    inset:0;
    background: rgba(32, 32, 32, 0.5);
}

.hero-banner--text-only{
    background:#202020;
}

.hero-banner--text-only .hero-left h1,
.hero-banner--text-only .hero-right p{
    color:#fff;
}

.hero-banner .hero-content{
    position:relative;
    z-index:2;
    /* height:100%; */
    margin: auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: calc((200/1512) * 100vw);
}

.hero-banner .hero-left{
    max-width:calc((870/1512) * 100vw);
}

.hero-banner .hero-left h1{
    color:#fff;
    font-size:clamp(46px, calc((48/1512) * 100vw), 50px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
}

.hero-banner .hero-right{
    max-width:calc((328/1512) * 100vw);
}

.hero-banner .hero-right p{
    color:#fff;
}


/* =========================
   SPLIT SECTION
========================= */

.split-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-bottom:1px solid #000;
    align-items: center;
}

.split-section .split-col{
    padding:calc((50/1512) * 100vw) calc((50/1512) * 100vw);
}

.split-section .content-col{
}

.split-section .image-col{
    border-left:1px solid #000;
    padding: calc((50/1512) * 100vw);

}

.split-section .image-col img{
    width:100%;
    display:block;
    aspect-ratio: 5/4;
    object-fit: cover;
}

.split-section .content-col h2{
    font-size:clamp(30px, calc((32/1512) * 100vw), 34px);
    line-height:1.2;
    font-weight:500;
    margin-bottom:calc((30/1512) * 100vw);
    max-width:calc((430/1512) * 100vw);
    text-transform: uppercase;
}

.split-section .content-col p{
    max-width:calc((450/1512) * 100vw);
    /* line-height:1.6; */
}

.split-section--content-only{
    grid-template-columns:1fr;
}

.split-section--image-only{
    grid-template-columns:1fr;
}

.split-section--image-only .image-col{
    border-left:none;
}

/* =========================
   SERVICES
========================= */

.services-section{
    padding:calc((100/1512) * 100vw) calc((50/1512) * 100vw);
    /* background:#f5f5f5; */
}

.services-section .services-header span{
    /* font-size:12px; */
    font-weight: 500;
    font-family: "IBM Plex Mono", monospace;
}

.services-section .services-title-wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top: calc((50/1512) * 100vw);
    margin-bottom: calc((75/1512) * 100vw);
}

.services-section .services-title-wrap h2{
    font-size:clamp(30px, calc((32/1512) * 100vw), 34px);
    line-height:1.2;
    font-weight: 500;
    text-transform: uppercase;
} 

.services-section .service-item{
    display:grid;
    grid-template-columns:calc((45/1512) * 100vw) 1fr calc((450/1512) * 100vw);
    gap: calc((50/1512) * 100vw);
    padding:calc((50/1512) * 100vw) 0;
    border-top:1px solid #000;
}

.services-section .service-item:last-child{
    border-bottom:1px solid #000;
}

.services-section .service-item h3{
    font-size:clamp(23px, calc((24/1512) * 100vw), 25px);
    font-weight:500;
    padding-right: calc((305/1512) * 100vw);
    text-transform: uppercase;
}
.services-section .service-item::before{
    font-size:clamp(23px, calc((24/1512) * 100vw), 25px);
    font-weight:500; 
    content: "";
}
body{
    counter-reset: service-counter;
}

.services-section .service-item{
    counter-increment: service-counter;
    /* position: relative; */
}
.services-section .service-item::before{
    /* content: "0" counter(service-counter) "/"; */
    content: counter(service-counter, decimal-leading-zero)"/";
    display: block;
    /* position: absolute;
    left: 0;
    top: 0; */
}


/* =========================
   CASE STUDY
========================= */

.case-study{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.case-study img,
.case-study .case-study__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.case-study .case-overlay{
    position:absolute;
    inset:0;
    background:rgba(32,32,32,.5);
}

.case-study .case-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content: center;
    padding:calc((50/1512) * 100vw);
    color:#fff;
    /* align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; */
}
.case-study .title-link-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.case-study .case-content span{
    margin-bottom:calc((50/1512) * 100vw);
    display: block;
    font-weight: 500;
    font-family: "IBM Plex Mono", monospace;
    width: 100%;
    /* margin-top: auto; */
}

.case-study .case-content h2{
    color:#fff;
    font-size:clamp(46px, calc((48/1512) * 100vw), 50px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    /* margin-bottom: auto; */
    max-width: calc((780/1512) * 100vw);
}

.case-study .case-content a{
    color:#fff; 
    text-decoration:none;
    /* margin-bottom: auto; */
}

.case-study--placeholder,
.case-study-single-hero--placeholder,
.case-study-banner--placeholder .case-study-banner__link,
.case-study-next--placeholder{
    background:#d4d4d4;
}

.case-study-banner--placeholder .case-study-banner__link{
    position:relative;
    min-height:100%;
}

/* =========================
   CTA
========================= */

.cta-banner{
    position:relative;
    height: calc((600/1512) * 100vw);
}

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

.cta-banner .cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.cta-banner .cta-content{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:calc((50/1512) * 100vw);
    color:#fff;
}

.cta-banner .cta-content h2{
    /* font-size:64px; */
    font-size: clamp(30px, calc((32 / 1512) * 100vw), 34px);
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: calc((30 / 1512) * 100vw);
    text-transform: uppercase;
}

.cta-banner .cta-content a{
    color:#fff;
    text-decoration:none;
    letter-spacing:.08em;
}

.cta-banner--plain{
    background:#202020;
}
.cta-banner .cta-left{
    max-width: calc((600 / 1512) * 100vw);
}

/* =========================
   FOOTER
========================= */

.site-footer{
    background:#fff;
    padding:calc((100 / 1512) * 100vw) calc((50 / 1512) * 100vw) calc((120 / 1512) * 100vw); 
}

.footer-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:calc((200 / 1512) * 100vw);
    align-items: center;
}

/* .footer-logo{
    font-size:42px;
    font-weight:500;
} */

.footer-logo img{
    width:calc((378/1512) * 100vw);
    height:auto;
    display:block;
}

.footer-top ul{
    display:flex;
    gap:calc((50/1512) * 100vw);
    list-style:none;
}

.footer-top a{
    text-decoration:none;
    /* color:#111; */
    color: inherit;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    /* font-size:14px; */
}

/* =========================
   INNER PAGES
========================= */

body:not(.home) .site-header{
    position:relative;
    background:#fff;
    /* border-bottom:1px solid #000; */
}

body:not(.home) .main-nav a{
    color:#202020;
}

body:not(.home) .logo img{
    filter:invert(1);
}

body.post-type-archive-case-study .site-header,
body.single-case-study .site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:transparent;
    border-bottom:none;
}

body.post-type-archive-case-study .main-nav a,
body.single-case-study .main-nav a{
    color:#fff;
}

body.post-type-archive-case-study .logo img,
body.single-case-study .logo img{
    filter:none;
}

body.post-type-archive-case-study .main-nav a.is-current,
body.single-case-study .main-nav a.is-current{
    text-decoration:underline;
    text-underline-offset:4px;
}

.page-hero{
    padding:calc((100/1512) * 100vw) 0 calc((60/1512) * 100vw);
    border-bottom:1px solid #000;
}

.page-hero__label{
    display:block;
    margin-bottom:calc((20/1512) * 100vw);
    font-family:"IBM Plex Mono", monospace;
    font-size:12px;
    letter-spacing:.12em;
    font-weight:500;
}

.page-hero__title{
    font-size:clamp(46px, calc((48/1512) * 100vw), 50px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    max-width:calc((900/1512) * 100vw);
    margin-bottom:calc((30/1512) * 100vw);
}

.page-hero__description{
    max-width:calc((600/1512) * 100vw);
}

/* =========================
   CASE STUDIES ARCHIVE
========================= */

.case-studies-archive{
    background:#fff;
}

.case-studies-stack{
    display:flex;
    flex-direction:column;
}

.case-study-banner{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.case-study-banner__link{
    display:block;
    width:100%;
    height:100%;
    color:#fff;
    text-decoration:none;
}

.case-study-banner__image,
.case-study-banner__video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.case-study-banner__image,
.case-study-banner__video{
    position:absolute;
    inset:0;
}

.case-study-banner__overlay{
    position:absolute;
    inset:0;
    background:rgba(32,32,32,.5);
    transition:background .3s ease;
}

.case-study-banner__content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:calc((50/1512) * 100vw);
    z-index:2;
}

.case-study-banner__label{
    /* position:absolute; */
    /* top:calc((120/1512) * 100vw); */
    /* left:calc((50/1512) * 100vw); */
    font-family:"IBM Plex Mono", monospace;
    /* font-size:12px; */
    /* letter-spacing:.12em; */
    margin-bottom: calc((50 / 1512) * 100vw);
}

.case-study-banner__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:calc((40/1512) * 100vw);
    width:100%;
}

.case-study-banner__title{
    font-size:clamp(46px, calc((48/1512) * 100vw), 50px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    max-width:calc((900/1512) * 100vw);
}

.case-study-banner__cta{
    flex-shrink:0;
    /* font-family:"IBM Plex Mono", monospace;
    white-space:nowrap; */
}

.case-study-banner:hover .case-study-banner__image,
.case-study-banner:hover .case-study-banner__video{
    transform:scale(1.02);
}

.case-study-banner--placeholder:hover .case-study-banner__overlay{
    background:rgba(32,32,32,.6);
}

.case-study-banner:hover .case-study-banner__overlay{
    background:rgba(32,32,32,.6);
}

.case-studies-load-more-wrap{
    display:flex;
    justify-content:center;
    padding:calc((60/1512) * 100vw) calc((50/1512) * 100vw);
    border-top:1px solid #000;
}

.case-studies-load-more{
    background:transparent;
    border:1px solid #000;
    color:#202020;
    font-family:"IBM Plex Mono", monospace;
    font-size:clamp(14px, calc((15/1512) * 100vw), 16px);
    letter-spacing:.08em;
    padding:calc((18/1512) * 100vw) calc((40/1512) * 100vw);
    cursor:pointer;
    transition:all .3s ease;
}

.case-studies-load-more:hover:not(:disabled){
    background:#202020;
    color:#fff;
}

.case-studies-load-more:disabled{
    opacity:.6;
    cursor:wait;
}

.case-studies-empty{
    text-align:center;
    padding:calc((120/1512) * 100vw) calc((50/1512) * 100vw);
}

/* =========================
   CASE STUDY SINGLE
========================= */

.case-study-single-hero{
    position:relative;
    min-height:85vh;
    overflow:hidden;
    display:flex;
    align-items:stretch;
}

.case-study-single-hero img,
.case-study-single-hero__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.case-study-single-hero__overlay{
    position:absolute;
    inset:0;
    background:rgba(32,32,32,.5);
}

.case-study-single-hero__content{
    position:relative;
    z-index:2;
    color:#fff;
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: calc((50/1512) * 100vw);
}

.case-study-single-hero__top{
    max-width:calc((1100/1512) * 100vw);
}

.case-study-single-hero__label{
    display:block;
    margin-bottom:calc((50/1512) * 100vw);
    font-family:"IBM Plex Mono", monospace;
}

.case-study-single-hero__title{
    font-size: clamp(46px, calc((48 / 1512) * 100vw), 50px);
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom:0;
}

.case-study-single-hero__meta{
    text-transform:uppercase;
    max-width:calc((900/1512) * 100vw);
    position: absolute;
    left: calc((50/1512) * 100vw);
    bottom: calc((50/1512) * 100vw);
}

.case-study-single-hero__meta p + p{
    margin-top:calc((6/1512) * 100vw);
}

.case-study-single-hero__meta span{
    font-weight:600;
}

.case-study-single-content{
    width:100%;
    padding-top:calc((75/1512) * 100vw);
    padding-bottom:calc((75/1512) * 100vw);
}

.case-study-single-block{
    width:100%;
}

.case-study-single-block + .case-study-single-block{
    margin-top:calc((50/1512) * 100vw);
}

.case-study-single-block__heading{
    font-size:clamp(19px, calc((20/1512) * 100vw), 21px);
    font-weight:500;
    text-transform:uppercase;
    /* letter-spacing:.04em; */
    margin-bottom:calc((25/1512) * 100vw);
}

.case-study-single-block__content{
    max-width:100%;
    font-size:clamp(17px, calc((18/1512) * 100vw), 19px);
}

.case-study-single-block__content > * + *{
    margin-top:calc((20/1512) * 100vw);
}

.case-study-single-block__content p{
    max-width:100%;
}

.case-study-single-block__content ul,
.case-study-single-block__content ol{
    padding-left:calc((24/1512) * 100vw);
    max-width:100%;
}

.case-study-single-block__content li + li{
    margin-top:calc((2/1512) * 100vw);
}

.case-study-single-block__content img{
    width:100%;
    height:auto;
    display:block;
}

.case-study-next{
    position:relative;
    display:block;
    height:100vh;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
}

.case-study-next__image,
.case-study-next__video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.case-study-next__image,
.case-study-next__video{
    position:absolute;
    inset:0;
}

.case-study-next__overlay{
    position:absolute;
    inset:0;
    background:rgba(32,32,32,.5);
    transition:background .3s ease;
}

.case-study-next__content{
    position:absolute;
    display:flex;
    flex-direction:column;
    padding:calc((50/1512) * 100vw);
    z-index:2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    width: max-content;
}

.case-study-next__label{
    display:block;
    margin-bottom:calc((50/1512) * 100vw);
    font-family:"IBM Plex Mono", monospace;
}

.case-study-next__title{
    font-size:clamp(46px, calc((48/1512) * 100vw), 50px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    /* max-width:calc((900/1512) * 100vw); */
}

/* =========================
   SERVICES DICTIONARY
========================= */

.services-dictionary-hero{
    padding-top:calc((60/1512) * 100vw);
}

.services-dictionary-hero__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:calc((80/1512) * 100vw);
    padding-bottom:calc((50/1512) * 100vw);
}

.services-dictionary-hero__title{
    font-size: inherit;
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    max-width:calc((500/1512) * 100vw);
}

.services-dictionary-hero__description{
    max-width:calc((636/1512) * 100vw);
    margin-left:auto;
}

.services-dictionary-hero__image{
    margin-inline: calc((50/1512) * 100vw);
    /* width:100%;
    border-top:1px solid #000;
    border-bottom:1px solid #000; */
}

.services-dictionary-hero__image img{
    width:100%;
    display:block; 
    aspect-ratio:4/1; 
    object-fit:cover;
}

.services-dictionary-list-section{
    padding:calc((70/1512) * 100vw) 0 calc((50/1512) * 100vw);
}

.services-dictionary-item{
    display:grid;
    grid-template-columns:calc((58/1512) * 100vw) 1fr;
    gap:calc((28/1512) * 100vw);
    /* border-bottom:1px solid #000; */
}
.services-dictionary-item:not(:last-child){
    margin-bottom: calc((60/1512) * 100vw);
}

.services-dictionary-item__number{
    font-weight:500;
    text-transform:uppercase;  
}

.services-dictionary-item__title{
    font-size:inherit;
    font-weight:500;
    text-transform:uppercase;
    margin-bottom:calc((25/1512) * 100vw);
}

.services-dictionary-item__description{
    margin-bottom:calc((25/1512) * 100vw);
}

.services-dictionary-item__description p:last-child{
    margin-bottom:0;
}

.services-dictionary-item__case-studies{
    font-size:clamp(14px, calc((15/1512) * 100vw), 16px);
    font-family:"IBM Plex Mono", monospace;
}

.services-dictionary-item__case-studies a{
    color:#202020;
    text-decoration:none;
    text-underline-offset:3px;
}


/* =========================
   CONTACT PAGE
========================= */

.contact-page{
    /* min-height:calc(100vh - calc((90/1512) * 100vw)); */
}

.contact-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    /* min-height:calc(100vh - calc((90/1512) * 100vw)); */
    /* border-bottom:1px solid #000; */
    height: 100vh;
    align-items: flex-end;
}

.contact-split__content{
    display:flex;
    flex-direction:column;
    justify-content: center;
    /* justify-content:space-between; */
    padding:calc((80/1512) * 100vw) calc((88/1512) * 100vw);
    /* border-right:1px solid #000; */
    height: calc(100vh - ((82/1512) * 100vw));
}

.contact-split__name{
    font-size: clamp(30px, calc((32 / 1512) * 100vw), 34px);
    line-height:1.2;
    font-weight:500;
    text-transform:uppercase;
    margin-bottom:calc((25/1512) * 100vw);
}

.contact-split__role{
    /* font-size:clamp(14px, calc((15/1512) * 100vw), 16px); */
    text-transform:uppercase;
    /* font-weight: 500; */
    /* letter-spacing:.04em; */
    margin-bottom:calc((50/1512) * 100vw);
    font-family: "IBM Plex Mono", monospace;
}

.contact-split__bio{
    /* max-width:calc((520/1512) * 100vw); */
}

.contact-split__bio p{
    margin-bottom:calc((20/1512) * 100vw);
}

.contact-split__bio p:last-child{
    margin-bottom:0;
}

.contact-split__details{
    margin-top:calc((50/1512) * 100vw);
    /* font-size:clamp(14px, calc((15/1512) * 100vw), 16px); */
    text-transform:uppercase;
    /* letter-spacing:.02em; */
    font-weight: 500;
}

.contact-split__details p + p{
    margin-top:calc((10/1512) * 100vw);
}

.contact-split__details a{
    color: inherit;
    text-decoration:none;
}

.contact-split__separator{
    margin:0 calc((10/1512) * 100vw);
}

.contact-split__image{
    min-height:100%;
    /* background:#f5f5f5; */
    position: relative;
}

.contact-split__image img{
    width:100%;
    height:100%;
    /* min-height:calc(100vh - calc((90/1512) * 100vw)); */
    object-fit:cover;
    display:block;
    position: absolute;
}

.main-nav a.is-current,
.footer-top a.is-current,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.footer-top .current-menu-item > a,
.footer-top .current_page_item > a{
    text-decoration:underline;
    text-underline-offset:4px;
}

.footer-bottom a{
    /* color:#111; */
    color: inherit;
    text-decoration:none;
}

.footer-legal a{
    color: inherit;
    /* color:#111; */
    color: inherit;
    text-decoration:none;
}

.footer-legal a:hover,
.footer-bottom a:hover{
    /* text-decoration:underline;
    text-underline-offset:3px; */
}

body.page-template-contact .site-header {
    position: absolute;
    background: none;
    /* border-bottom: 1px solid #000; */
}
body.page-template-contact .site-header .main-nav a{
    color: #fff;
}

@media (min-width:768px){
    .menu-toggle{
        display: none;
    }
}

@media (max-width:767px){

    body{
        font-size: clamp(13px, calc((14/440) * 100vw), 15px);
    }
    
    .main-nav{
        position: fixed;
        inset: 0;
        background: #202020;
        color: #fff;
        z-index: 0;
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;
    }
    body.menu-open .main-nav{
        transform: translateX(0%);
    }
    body.menu-open{
        overflow: hidden;
    }
    body.menu-open .main-nav a {
        color: #fff;
    }
    body.menu-open .logo img {
        filter: unset;
    }
    header .logo{
        position: relative;
        z-index: 2;
    }
    .main-nav ul {
        display: flex;
        gap: calc((50 / 440) * 100vw);
        list-style: none;
        flex-direction: column;
        align-items: flex-start;
        padding: calc((150 / 440) * 100vw) calc((30 / 440) * 100vw) calc((50 / 440) * 100vw);
    }
    .container {
        padding-inline: calc((30 / 440) * 100vw);
    }
    .hero-banner .hero-content{
        flex-direction: column;
        gap: calc((30 / 440) * 100vw);
    }
    .hero-banner{
        height: calc((575 / 440) * 100vw);
    }
    .hero-banner .hero-left{
        max-width: none;
    }
    .hero-banner .hero-right{
        max-width: none;
    }
    .hero-banner .hero-left h1 {
        font-size: clamp(30px, calc((32 / 440) * 100vw), 34px);
    }
    .logo {
        width: calc((170 / 440) * 100vw);
    }
    .site-header {
        padding: calc((20 / 440) * 100vw) 0;
    }
    .split-section{
        grid-template-columns: 1fr;
    }
    .split-section .split-col {
        padding: calc((50 / 440) * 100vw) calc((30 / 440) * 100vw);
    }
    .split-section .content-col h2{
        max-width: none;
        font-size: clamp(22px, calc((24 / 440) * 100vw), 26px);
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .split-section .content-col p{
        max-width: none;
    }
    .split-section .image-col{
        border-left: 0;
        padding-top: 0;
    }
    .services-section {
        padding: calc((50 / 440) * 100vw) calc((30 / 440) * 100vw);
    }
    .services-section .services-title-wrap{
        flex-direction: column; 
        align-items: unset;
    }
    .services-section .service-item{
        grid-template-columns: calc((30 / 440) * 100vw) 1fr;
        gap: calc((20 / 440) * 100vw);
        padding: calc((30 / 440) * 100vw) 0;
    }
    .services-section .service-item h3 {
        font-size: clamp(17px, calc((18 / 440) * 100vw), 19px);
        padding-right: 0;
    }
    .services-section .service-item p {
        grid-column: 1 / -1;
        padding-left: calc((50 / 440) * 100vw);
    }
    .services-section .service-item::before {
        font-size: clamp(17px, calc((18 / 440) * 100vw), 19px);
        font-weight: 500;
    }
    .services-section .services-title-wrap h2 {
        font-size: clamp(22px, calc((24 / 440) * 100vw), 26px);
    }
    .services-section .services-title-wrap {
        margin-top: calc((30 / 440) * 100vw);
        margin-bottom: calc((50 / 440) * 100vw);
        gap: calc((30 / 440) * 100vw);
    }
    .case-study .title-link-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: calc((60 / 440) * 100vw);
    }
    .case-study .case-content {
        padding: calc((30 / 440) * 100vw);
    }
    .case-study .case-content h2 {
        font-size: clamp(30px, calc((32 / 440) * 100vw), 34px);
        max-width: none;
    }
    .case-study .case-content span {
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .cta-banner {
        height: calc((500 / 440) * 100vw);
    }
    .cta-banner .cta-content {
        padding: calc((30 / 440) * 100vw); 
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: calc((60 / 440) * 100vw); 
    }
    .cta-banner .cta-left{
        max-width: none;
    }
    .cta-banner .cta-content h2 {
        font-size: clamp(22px, calc((24 / 440) * 100vw), 26px);
        margin-bottom: calc((30 / 440) * 100vw);
    }
    .site-footer {
        padding: calc((75 / 440) * 100vw) calc((30 / 440) * 100vw) calc((100 / 440) * 100vw);
    }
    .footer-top {
        margin-bottom: calc((100 / 440) * 100vw);
        align-items: flex-start;
        flex-direction: column;
        gap: calc((100 / 440) * 100vw);
    }
    .footer-logo img {
        width: calc((283 / 440) * 100vw);
    }
    .footer-bottom p:last-child{
        display: none;
    }
    .footer-top ul {
        gap: calc((50 / 440) * 100vw);
    }
    .case-study-banner__row {
        gap: calc((60 / 440) * 100vw);
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .case-study-banner__content {
        padding: calc((30 / 440) * 100vw);
        z-index: 2;
    }
    .case-study-banner__title {
        font-size: clamp(30px, calc((32 / 440) * 100vw), 34px);
        max-width: none;
    }
    .case-study-banner__label {
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .services-dictionary-hero__image {
        margin-inline: calc((30 / 440) * 100vw);
    }
    .services-dictionary-hero__image img {
        aspect-ratio: 1 / 1;
    }
    .services-dictionary-hero__top {
        gap: calc((30 / 440) * 100vw);
        padding-bottom: calc((75 / 440) * 100vw);
    }
    .services-dictionary-hero {
        padding-top: calc((55 / 440) * 100vw);
    }
    .services-dictionary-hero__description {
        max-width: calc((241 / 440) * 100vw);
    }
    .services-dictionary-hero__title{
        max-width: calc((110 / 440) * 100vw);
    }
    .services-dictionary-list-section {
        padding: calc((55 / 440) * 100vw) 0 calc((75 / 440) * 100vw);
    }
    .services-dictionary-item {
        grid-template-columns: calc((45 / 440) * 100vw) 1fr;
        gap: calc((20 / 440) * 100vw);
    }
    .services-dictionary-item:not(:last-child) {
        margin-bottom: calc((60 / 440) * 100vw);
    }
    .services-dictionary-item__title {
        margin-bottom: calc((30 / 440) * 100vw);
    }
    .services-dictionary-item__description {
        margin-bottom: calc((30 / 440) * 100vw);
    }
    .services-dictionary-item__case-studies {
        font-size: clamp(11px, calc((12 / 440) * 100vw), 13px);
    }
    .contact-split {
        grid-template-columns: 1fr;
        height: auto;
        align-items: flex-end;
    }
    .contact-split__image{
        height: calc((592 / 440) * 100vw);
    }
    .contact-split__content {
        padding: calc((116 / 440) * 100vw) calc((30 / 440) * 100vw) calc((75 / 440) * 100vw);
        height: auto;
    }
    .contact-split__name {
        font-size: clamp(22px, calc((24 / 440) * 100vw), 26px);
        margin-bottom: calc((18 / 440) * 100vw);
    }
    .contact-split__role {
        margin-bottom: calc((50 / 440) * 100vw);
    }
    .contact-split__details {
        margin-top: calc((50 / 440) * 100vw);
    }
    .contact-split__details p + p {
        margin-top: calc((9.5 / 440) * 100vw);
    }
    .contact-split__bio p {
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .case-study-single-hero__label {
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .case-study-single-hero__title {
        font-size: clamp(30px, calc((32 / 440) * 100vw), 34px);
    }
    .case-study-single-hero__top {
        max-width: none;
    }
    .case-study-single-hero__meta {
        max-width: none;
        left: calc((30 / 440) * 100vw);
        bottom: calc((30 / 440) * 100vw);
        right: calc((30 / 440) * 100vw);
    }
    .case-study-single-hero__meta p + p {
        margin-top: calc((20 / 440) * 100vw);
    }
    .case-study-next__content {
        padding: calc((30 / 440) * 100vw);
    }
    .case-study-next__label {
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .case-study-next__title {
        font-size: clamp(30px, calc((32 / 440) * 100vw), 34px);
    }
    .case-study-single-content {
        padding-top: calc((75 / 440) * 100vw);
        padding-bottom: calc((75 / 440) * 100vw);
    }
    .case-study-single-block + .case-study-single-block {
        margin-top: calc((50 / 440) * 100vw);
    }
    .case-study-single-block__heading {
        font-size: clamp(17px, calc((18 / 440) * 100vw), 19px);
        margin-bottom: calc((20 / 440) * 100vw);
    }
    .case-study-single-block__content {
        max-width: 100%;
        font-size: clamp(16px, calc((17 / 440) * 100vw), 18px);
    }
    .case-study-single-block__content > * + * {
        margin-top: calc((15 / 440) * 100vw);
    }
    .case-study-single-block__content ul, .case-study-single-block__content ol {
        padding-left: calc((24 / 440) * 100vw);
        max-width: 100%;
    }
    .case-study-single-block__content li + li {
        margin-top: calc((3 / 440) * 100vw);
    }

    .menu-toggle {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
        color: #fff;
    }
    .main-nav a {
        font-size: clamp(13px, calc((14 / 440) * 100vw), 15px);
    }
    body.page-template-services .menu-toggle,
    body.page-template-contact .menu-toggle,
    body.page-template-contact .menu-toggle{
        color: #202020;
    }

    body.menu-open .menu-toggle {
        color: #fff !important;
    }
    .menu-icon {
        position: relative;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: background 0.3s ease;
    }

    .menu-icon::before,
    .menu-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition:
            transform 0.3s ease,
            top 0.3s ease,
            opacity 0.3s ease;
    }

    .menu-icon::before {
        top: -8px;
    }

    .menu-icon::after {
        top: 8px;
    }

        /* Open State */
    body.menu-open .menu-icon {
        background: transparent;
    }

    body.menu-open .menu-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    body.menu-open .menu-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }

}