section {
    position:relative;
    float:left;
    clear:left;
    width:100%;
    overflow-x:clip;
    overflow-y:visible;
    scroll-margin-top: 50px;
}

.pad_top {
    padding-top:var(--global_block_padding);
}
.pad_bottom {
    padding-bottom:var(--global_block_padding);
}
.pad_left {
    padding-left:var(--global_inline_padding);
}
.pad_right {
    padding-right:var(--global_inline_padding);
}

.col2 .wrap {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:calc(1 * var(--global_inline_padding));
    align-items:center;
}

.flip .slide_from_left.run {
    animation-name: slide_from_right;
}

.flip .slide_from_right.run {
    animation-name: slide_from_left;
}

.heading {
    text-align: center;
    margin-bottom:0;
    grid-column: 1/-1;
}

.hero {

    & .bgvid {
        mask-image:linear-gradient(180deg,rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
    }

    &.pad_left {
        padding-left:calc(2 * var(--global_inline_padding));
    }
    &.pad_right {
        padding-right:calc(2 * var(--global_inline_padding));
    }

    * .yellow-btn {
        margin-top:0.75rem;
    }

    & h1,
    & h2 {
        font-size:3.5rem;
    }
}

.textonly {
    & .text {
        width:min(1000px,100%);
        margin-inline:auto;
    }
}

.col2 {

    & .wrap {
        display:Grid;
        grid-template-columns: repeat(12,1fr);
        gap:1rem;

        & .image,
        & .images {
            grid-column: 1/8;

            & img {
                width:100%;
                border-radius: var(--border_radius);
            }
        }

        & .image:not(:has(img)){
            display:none;
        }

        & .images {

            & .image {
                display:block;
                position:relative;
                overflow:hidden;
                padding-inline:0;

                & .hover {
                    position:absolute;
                    opacity:0;
                    background-color:#0006;
                    width:100%;
                    height:100%;
                    z-index:2;
                    border-radius: var(--border_radius);
                    transition:opacity 0.5s ease;

                    & span {
                        position:absolute;
                        width: 2rem;
                        height: 2rem;
                        color:#fff;
                        font-weight:bold;
                        text-align: center;
                        border-radius:100rem;
                        background-color:var(--accent);
                        font-size:1.4rem;
                        left:50%;
                        top:50%;
                        transform:translate(-50%,-50%);
                        line-height:1.4;
                    }
                }

                &:hover .hover {
                    opacity:1;
                }

                & img {
                    display:block;
                }
            }
        }

        & .text {
            grid-column: 8/-1;
            padding-inline-start:var(--global_inline_padding);
        }
    }

    &.flip {
        & .text {
            order:-1;
            grid-column:1/6;
            padding-inline:0 var(--global_inline_padding);
        }

        & .image,
        & .images {
            grid-column:6/-1;
        }
    }

    & .images:has(.image:nth-child(2)){
        display:Grid;
        grid-template-columns: 1fr 1fr;
        gap:1rem;

        & .image {
            grid-column: span 1;
        }
    }
}

.match-height {
    & .images,
    & .image {
        position:absolute;
        width:100%;
        height:100%;

        & img {
            height:100%;
            object-fit:cover;
        }
    }
}

.col2_head_text {
    & .wrap {
        display:Grid;
        grid-template-columns: repeat(12,1fr);
        gap:1rem;

        & .heading {
            grid-column: 2/6;
            text-align: left;
        }

        & .text {
            grid-column: 6/-2;
            padding-inline-start:var(--global_inline_padding);
        }
    }
}

.col2.col2_circle {
    & .wrap {

        & .image {
            grid-column: 2/5;
            text-align: left;

            & img {
                border-radius:100rem;
                box-shadow:0 10px 15px #0003;
            }
        }

        & .text {
            grid-column: 5/-2;
            padding-inline-start:var(--global_inline_padding);
        }

    }
    &.flip {
        & .wrap {
            & .image {
                order:2;
                grid-column: -5/-2;
            }
            & .text {
                order:1;
                grid-column:2/-5;
            }
        }
    }
}

.col2_map_text {
    & .wrap {
        display:Grid;
        grid-template-columns: repeat(12,1fr);
        gap:1rem;

        & .map {
            grid-column: 2/7;
            text-align: left;
            border-radius: var(--border_radius);
            overflow: hidden;
        }

        & .text {
            grid-column: 7/-2;
            padding-inline-start:var(--global_inline_padding);
        }
    }
}

.services_grid {
    & .wrap {
        display:grid;

        & > .heading {
            text-align: center;
            margin:0;
        }

        & .orange-btn {
            margin-inline:auto;
            justify-self:center;
        }

        & .grid {
            display:grid;
            grid-template-columns: repeat(var(--cols),1fr);
            gap:1rem;
            padding-block:3rem;

            & .text {
                display:Grid;
                padding-right:var(--global_padding_inner);
                align-items:center;
                align-content: center;
            }

            & .cs {
                position:relative;
                display:Grid;
                text-decoration: none;
                gap:1rem;
                background-color:#fff;
                box-shadow:0 10px 15px #0003;
                border-radius:var(--border_radius);
                padding:var(--global_padding_inner);
                top:0;
                transition:top 0.5s ease-out, background-color 0.5s ease-out;
                align-content:start;
                font-size:0.9rem;

                & .icon {
                    height:4rem;

                    & img {
                        height:100%;
                    }
                }

                & h2 {
                    margin:0;
                    font-size:1.8rem;
                }

                & p {
                    font-size:0.9rem;
                }

                &::after {
                    --height:150px;
                    content:'';
                    position:absolute;
                    background-color:var(--accent);
                    height:var(--height);
                    width:0.75rem;
                    border-radius:0 1rem 1rem 0;
                    left:0;
                    top:50%;
                    transform:translateY(-50%);
                    
                }

                &:hover {
                    top:-1rem;
                    background-color:var(--colour4);
                }

                & .orange-btn {
                    margin-inline:unset;
                    justify-self:start;
                }
            }
        }
    } 
}

.rbtns {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

.services_grid_text {
    & .wrap {
        display:grid;

        & > .heading {
            text-align: center;
            margin:0;
        }

        & .orange-btn {
            margin-inline:auto;
            justify-self:center;
        }

        & .grid {
            display:grid;
            grid-template-columns: repeat(var(--cols),1fr);
            gap:1rem;
            padding-block:3rem;

            & .text {
                display:Grid;
                padding-right:var(--global_padding_inner);
                align-items:center;
                align-content: center;
            }

            & .cs {
                position:relative;
                display:Grid;
                align-content:start;
                justify-content:center;
                grid-template-rows:subgrid;
                grid-row:span 2;
                text-decoration: none;
                gap:1rem;
                background-color:#fff;
                box-shadow:0 10px 15px #0003;
                border-radius:var(--border_radius);
                padding:var(--global_padding_inner);
                top:0;
                transition:top 0.5s ease-out, background-color 0.5s ease-out;
                font-size:0.9rem;

                & .row1 {
                    display:Grid;
                    gap:1rem;
                    align-content:start;
                    text-align: center;
                }

                & .icon {
                    display:flex;
                    justify-content: center;
                    height:4rem;

                    & img {
                        display:inline-block;
                        max-height:100%;
                    }
                }

                & h2 {
                    margin:0;
                    font-size:1.8rem;
                }

                &::after {
                    --height:150px;
                    content:'';
                    position:absolute;
                    background-color:var(--accent);
                    height:var(--height);
                    width:0.75rem;
                    border-radius:0 1rem 1rem 0;
                    left:0;
                    top:50%;
                    transform:translateY(-50%);
                    
                }

                &:hover {
                    top:-1rem;
                    background-color:var(--colour4);
                }

                & .orange-btn {
                    margin-inline:unset;
                    margin:0;
                    align-self:start;
                }
            }
        }
    } 
}

.steps_arrows {
    & .wrap {
        display:grid;
        overflow-x:clip;

        & > .heading {
            text-align: center;
            margin:0;
        }

        & .blue-btn {
            margin-inline:auto;
            justify-self:center;
        }

        & .steps {
            display:grid;
            gap:1rem;
            padding-block:3rem;

            & .step {
                display:grid;
                grid-template-columns: repeat(13,1fr);
                gap:1rem;

                &:nth-of-type(2n) {
                    animation-name: slide_from_right;
                }

                & .inner {
                    position: relative;
                    display:Grid;
                    grid-template-columns: subgrid;
                    border-radius: var(--border_radius);
                    overflow:hidden;
                    background-color:#fff;
                    box-shadow:0 10px 15px #0003;

                    & .image {
                        grid-column:1/4;
                        position:absolute;
                        width:100%;
                        height:100%;

                        & img {
                            width:100%;
                            height:100%;
                            object-fit:cover;
                            border-radius:var(--border_radius) 0 0 var(--border_radius);
                        }
                    } 

                    & .text {
                        display:grid;
                        gap:1rem;
                        grid-column: 4/-1;
                        padding:3rem clamp(1rem,5vw,2rem);

                        & .num {
                            background-color:var(--accent);
                            width:3rem;
                            height:3rem;
                            text-align: center;
                            border-radius:100rem;
                            font-size:2rem;
                            font-weight:Bold;
                            margin:0;
                        }

                        & h3 {
                            margin:0;
                            font-size:1.5rem;
                        }
                    }
                }

                & .arrow {
                    width:100%;
                    aspect-ratio: 1;
                    object-fit:contain;
                    align-self:end;
                }

                & .box {
                    border:1px solid var(--accent);
                    border-radius:var(--border_radius);
                    position:absolute;
                    top:50%;
                    transform:translateY(-50%);
                    z-index:-1;
                }

                &:nth-of-type(4n+1){
                    & .inner {
                        grid-column: 2/9;
                    }

                    & .box {
                        width:100px;
                        height:60px;
                        left:75%;
                    }
                }
                &:nth-of-type(4n+2) {

                    & .inner {
                        grid-column: 5/12;
                    }

                    & .arrow {
                        grid-column:4/5;
                        scale:-1 1;
                        order:-1;
                    }

                    & .box {
                        width:150px;
                        height:100px;
                        left:5%;
                    }
                }
                &:nth-of-type(4n+3) {
                    & .inner {
                        grid-column: 3/10;
                    }

                    & .box {
                        width:100px;
                        height:150px;
                        right:5%;
                    }
                }
                &:nth-of-type(4n+4) {
                    & .inner {
                        grid-column: 6/-2;
                    }

                    & .arrow {
                        grid-column:5/6;
                        scale:-1 1;
                        order:-1;
                    }
                }

                &:last-of-type {
                    & .arrow {
                        display:none;
                    }
                }
            }
        }
    } 
}

.rs {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index:0;

    & li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100vw;
        height:100%;
        max-width:100%;
        left: 0;
        top: 0;
        padding:0;
        margin:0;

        &:first-child {
            position: relative;
            display: block;
            float: left;
        }
    }

    & img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }
}

.bgimg,
.bgrs,
.bgvid {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
    z-index:0;
    padding:0;
    margin:0;
    user-select: none;
    pointer-events: none;
    background-color:var(--background);
  }

    :is(.bgrs,.bgimg) img {
        height:100%;
        width:100%;
        object-fit: cover;
        object-position: center;
    }

    .two-tone {
        filter:grayscale(100%);
        mix-blend-mode: luminosity;
        opacity:0.35;
    }

    .two-tone-blur {
        filter:grayscale(100%) blur(5px);
        mix-blend-mode: luminosity;
        opacity: 0.35;
    }


.testimonials {

    & .tests {
        cursor:grab;
        padding-block:3rem;

        &:focus {
            outline:none;
        }
    }

    & .test {
        display:Grid;
        gap:1rem;
        text-align: center;
        margin-inline:0.5rem;
        background-color:var(--colour4);
        padding:var(--global_padding_inner);
        width:25%;
        border-radius:var(--border_radius);

        & .quotemark {
            height:4rem;
            justify-self:center;
        }

        & .quote p:last-of-type {
            margin-bottom:0;
        }

        & .type {
            color:var(--accent);
            font-weight:bold;
            margin:0;
        }

        & .stars {
            & img {
                height:2rem;
            } 
        }
    }
}

.videos {

    & .wrap {
        display:grid;
        gap:1rem;
        grid-template-columns: repeat(12,1fr);
    }

    & .wrap:has(.video:nth-child(2)){
        grid-template-columns: 1fr 1fr;
    }
}

.video {
    grid-column:2/-2;
    position:relative;
    max-height: calc(100vh - 100px);

    & p {
        display:none;
    }

    & .video-placeholder {
        padding-bottom: 56.25%;
        max-height:calc(100vh - 100px);
    }

    & .cover {
        position:absolute;
        width:100%;
        height:100%;
        z-index:2;
        background-color:var(--background);

        & > img {
            object-fit: cover;
            width:100%;
            height: 100%;
            border-radius: var(--border_radius);
        } 

        & button {
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            width:clamp(4rem,10%,12rem);
            z-index:3;
            background:none;
            outline:none;
            border:none;

            & img {
                width:100%;
            }

            &:hover {
                filter:brightness(1.1);
            }
        }

        & p {
            position:absolute;
            z-index:3;
            display:block;
            color:var(--accent);
            font-size:1.8rem;
            right:2rem;
            top:2rem;
            margin:0;
            text-align:right;
            max-width:calc(100% - 4rem);
            line-height:1.1;
            pointer-events: none;
        }
    }
}

h2 {
    font-size: clamp(1.6rem,5vw,2.5rem);
}

.case_studies_cta {
	position:relative;
	display:grid;
	align-items:end;
	color:#fff;
	border-radius:var(--border_radius);
	overflow:hidden;

	& .bg {
		position: absolute;
        height:100%;
        right:0;
		width:70%;
		background-color:var(--accent);
		mix-blend-mode: multiply;
		border-radius:var(--border_radius);
		z-index:1;
		transition:width 0.75s var(--ease_out);

		@starting-style {
			width:0%;
		}
	}

	& h2 {
        font-size: clamp(2.5rem,10vw,4rem);
		color:#fff;
	}

	& h2:has(+*) {
		margin-bottom:1rem;
	}

	& .text {
		position:relative;
		width:70%;
        margin-left:30%;
		z-index:2;
		padding:var(--global_padding_inner);
		opacity:1;
		transform:translateY(0rem);
		transition:opacity 1s ease, transform 1s var(--ease_out);
		transition-delay: 0.75s;

		@starting-style{
			opacity:0;
			transform:translateY(1rem);
		}

	}

	& > img {
		position:absolute;
		inset:0;
		object-fit:cover;
		object-position: center;
        width:100%;
        height:100%;
		scale:1.05;
		transition:scale 6s ease-out;
		
		@starting-style {
			scale:1;
		}
	}

	& p {
		font-size: 1.2rem;
	}

	& p:last-of-type {
		margin-bottom:0;
	}

    & .rounded-btns {
        margin-top:3rem;
    }
}

.faqs-outer {
    & .wrap {
        display:Grid;
        grid-template-columns: repeat(13,1fr);
        gap:1rem;
    }

    & .faqs {
        display:grid;
        gap:0.5rem;
        grid-column:3/-3;
        padding-block:3rem;
    }

    & details {
        background-color:var(--colour4);
        padding:1rem;
        border-radius:var(--border_radius);
    }

    & summary {
        color:var(--colour1);
        font-size:1.4rem;
        cursor: pointer;
        transition:color 0.5s ease;

        &::before {
            content:"+";
            display:inline-block;
            width:2rem;
            color:var(--accent);
            font-weight:bold;
            font-size:1.6rem;
            text-align: center;
        }

        &:hover {
            color:var(--accent);
        }
    }

    & summary::marker {
        content:"";
    }

    & details[open] summary::before {
        content:"-"
    }

    & .answer {
        padding-left:2rem;
        padding-top:1rem;
        transition: max-height 0.5s ease, opacity 0.3s ease, display 0.5s allow-discrete;

        & p {
            max-width:100%;
        }
    }
}

.included-outer {
    & .wrap {
        display:Grid;
        grid-template-columns: repeat(13,1fr);
        gap:1rem;
    }

    & .intro {
        grid-column: 4/-4;
        text-align: center;

        & > * {
            margin-inline:auto;
        }
    }

    & .included {
        display:grid;
        gap:0.5rem;
        grid-column:4/-4;
        padding-block:2rem;

        & h3 {
            margin-bottom:0.5lh;
        }

    }
    & h3 {
        clear:left;
        grid-column: 1/-1;
        text-align: center;
        margin:0;
        font-size:1.8rem;
    }

    & .inc {
        background-color:var(--colour4);
        padding:1rem 1.5rem;
        border-radius:var(--border_radius);

        display:grid;
        grid-template-columns: 1.5rem 1fr;
        gap:1rem;

        &:nth-of-type(even){
            background-color:#fff;
        }

        & p {
            margin:0;
            font-weight:600;
            color:var(--colour1);
        }
    }
}

.photo-grid {
    & .wrap h2 {
        margin-bottom:3rem;
    }
}

.img-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
    gap:1rem;

    & a {
        display:block;
        margin-bottom:1rem;
        transition:filter 0.5s ease;
        opacity:0;
        margin:0;

        & img {
            display:block;
            width:100%;
            height:100%;
            object-fit:cover;
            border-radius:var(--border_radius);
            filter:brightness(100%);
            transition:filter 0.5s ease;
        }

        &.two-tone:hover {
            filter:grayscale(0);
            mix-blend-mode: normal;
        }

        &:hover img {
            filter:brightness(120%);
        }
    }
}

blockquote {
    padding-block:1rem;
    font-family: "Merriweather", serif;

    & .large-text{
        margin-bottom:0;
    }
}

.cta {
    background-color:var(--colour4);

    & h2 {
        font-size: clamp(2.5rem,10vw,4rem);
    }

    &:not(:has(.image img)) .wrap{
        grid-template-columns: 1fr;
        text-align: center;

        & .text {
            padding:0;
            grid-column:unset;

            & p {
                margin-inline:auto;
            }
        }
    }
}

.related,
.studies {
    display:grid;
    gap:1rem;
    padding-block:3rem;

    & .rel {
        position:relative;
        text-decoration: none;
        background-color:#fff;
        box-shadow:0 10px 15px #0003;
        border-radius:var(--border_radius);
        overflow:hidden;
        top:0;
        transition:top 0.5s ease-out, background-color 0.5s ease-out;

        & .image {
            & img {
                width:100%;
                height:100%;
                aspect-ratio: 1.6;
                object-fit:cover;
            }
        }

        & h3 {
            font-size:1.8rem;
        }

        & .text {
            padding:1.5rem;
        }

        & .small {
            color:var(--accent);
            font-weight:500;
        }

        &:hover {
            top:-1rem;
            background-color:var(--colour4);
        }
    }
}

.related {
    grid-template-columns: repeat(3,1fr);
}

.studies {
    grid-template-columns: repeat(4,1fr);
}

.text {
    & :is(p,li,ul,ol):last-child{
        margin-bottom:0;
    }
}


@media screen and (min-width:2000px){
    :root {
        --global_inline_padding:3vw;
	    --global_block_padding:5vw;
	    --global_padding_inner:3vw;
        --border_radius:1.25vw;
    }

	h1,
    .hero h1 {
		font-size:4vw;
	}

	h2,
	h3,
    h4,h5,h6 {
		font-size:2.5vw;
	}

    main,
	.text,
    .intro,
    .quote {
		& p,
        & p.type,
		& li,
		& td {
			font-size:1.3vw;
		}
	}

    .rounded-btn,
    .blue-btn,
    .lblue-btn,
    .white-btn,
    .orange-btn {
        font-size:1.2vw;
        padding: 0.75em 2em;
    }

    .services_grid,
    .services_grid_text {
        & .wrap {
            & .grid {
                & .cs {
                    & h2 {
                        font-size: 1.8vw;
                    }
                    & .icon {
                        height:4vw;
                    }

                    & p {
                        font-size:1.2vw;
                    }
                }

                gap:1vw;
            }
        }
    }

    .steps_arrows {
        & .wrap {
            & .steps {
                & .step {
                    & .inner {
                        & .text {
                            & h3 {
                                font-size: 1.8vw;
                            }
                            & .num {
                                font-size:2vw;
                                width:3vw;
                                height:3vw;
                            }
                        }
                    }
                }
            }
        }
    }

    .included-outer {
        & .inc {
            & p {
                font-size:1.3vw;
            }

            grid-template-columns: 1.75vw 1fr;
            gap:1vw;
        }

        & h3 {
            font-size:1.8vw;
        }
    }

    .testimonials {
        & .test {
            & .stars {
                & img {
                    height: 2vw;
                }
            }
        }
    }

    .faqs-outer {
        & summary {
            font-size: 1.3vw;
        }
    }

    .textonly {
    & .text {
        width:70%;
    }
    }

    table.packages {
        & th {
            & h3 {
                font-size: 1.6vw;
            }
        }
    }

    .related, .studies {
        & .rel {
            & h3 {
                font-size: 1.8vw;
            }

            & .text {
                padding:1.5vw;
            }
        }
    }

}

@media screen and (max-width:1300px) {
    .pad_left {
        padding-left:0;
    }
    .pad_right {
        padding-right:0;
    }

    .hero {
        & h1,
        & h2 {
            font-size:max(4.75vw,2rem);
        }
    }

    .testimonials {
        & .test {
            width:40%;
        }
    }
}

@media screen and (max-width:1100px) {
    .services_grid .wrap .grid {
        grid-template-columns: repeat(2,1fr);
    }

    .services_grid_text .wrap .grid {
        grid-template-columns: repeat(3,1fr);
    }

    .col2 {
        & .wrap {
            align-items:start;

            & .image {
                grid-column:1/6;
            }

            & .text {
                grid-column:6/-1;
            }
        }

        &.flip {
            & .text {
                order:-1;
                grid-column:1/-6;
            }

            & .image {
                order:0;
                grid-column:-6/-1;
            }
        }
    }
}

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

    .video {
        & .cover {
            p {
                font-size: 1.2rem;
                right:1rem;
                top:1rem;
                max-width:calc(100% - 2rem);
            }
        }
    }

    .steps_arrows {
        & .wrap {
            & .steps {
                & .step {
                    & .inner {
                        .image {
                            grid-column:1/5;
                        }
                        .text {
                            grid-column:5/-1;
                        }
                    }
                    &:nth-of-type(4n+1) {
                        & .inner {
                            grid-column:2/11;
                        }
                    }
                    &:nth-of-type(4n+2) {
                        & .inner {
                            grid-column:3/12;
                        }

                        & .arrow {
                            grid-column: 12/13;
                            scale: 1 1;
                            order: 0;
                        }
                    }
                    &:nth-of-type(4n+3) {
                        & .inner {
                            grid-column:4/13;
                        }

                        & .arrow {
                            grid-column: 3/4;
                            scale: -1 1;
                            order: -1;
                        }
                    }
                    &:nth-of-type(4n+4) {
                        & .inner {
                            grid-column:3/12;
                        }

                        & .arrow {
                            grid-column: 2/3;
                            scale: -1 1;
                            order: -1;
                        }
                    }
                }
            }
        }
    }

    .included-outer {

        & .included,
        & .intro {
            grid-column:2/-2;
        }
    }

    .related {
        grid-template-columns: repeat(2,1fr);
    }

    .studies {
        grid-template-columns: repeat(3,1fr);
    }

}

@media screen and (min-width:990px){
    .hide_d {
        display:none;
    }
}

@media screen and (max-width:990px) and (min-width:600px){
    .hide_t {
        display:none;
    }
}

@media screen and (max-width:900px) {
    .col2,
    .col2_map_text,
    .col2.flip {
        & .wrap {
            grid-template-columns: 1fr;
            gap:var(--global_block_padding);

            & .text,
            & .map {
                order:0;
                grid-column:1/-1;
                padding:0;
            }

            & .images,
            & .image {
                order:1;
                grid-column:1/-1;
                position:relative;
            }
        }
    }

    .col2.col2_circle {
        & .wrap {
            grid-template-columns: 1fr 1fr;
            & .image {
                grid-column:1/2;
            }

            & .text {
                grid-column:2/3;
            }

        }
        &.flip {
            & .wrap {
                & .image {
                    order:2;
                    grid-column:2/3;
                }
                & .text {
                    order:1;
                    grid-column:1/2;
                }
            }
        }
    }

    .hero {
        &.pad_left {
            padding-left:var(--global_inline_padding);
        }
        &.pad_right {
            padding-left:var(--global_inline_padding);
        }
    }

    .services_grid_text .wrap .grid {
        grid-template-columns: repeat(2,1fr);
    }
}

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

    .col2video {

        & .video,
        &.flip .video,
        &.style2 .video,
        & .text,
        &.flip .text,
        & .videos {
            grid-column: 2/-1;
        }

        & :is(.textcol1,.textcol2) {
            grid-column: span 6;
        }
    }

    .videos .wrap:has(.video:nth-child(2)) {
        grid-template-columns: 1fr;
    }

    .video {
        & .cover {
            p {
                font-size: 1rem;
            }
        }
    }

    .col2,
    .col2_head_text {
        & .wrap {

            & .heading,
            & .image,
            & .text {
                padding-inline:var(--global_padding_inner);
                grid-column:1/-1;
            }
        }
    }

    .col2.col2_circle .wrap,
    .col2.col2_circle.flip .wrap {
        grid-template-columns: 1fr;

        & .image {
            grid-column:1/-1;
        }
    }

    .steps_arrows {
        & .wrap {
            & .steps {
                & .step {
                    & .inner {
                        gap:0;
                    }
                }
            }
        }
    }

    .testimonials {
        & .test {
            width:60%;
        }
    }

    .faqs-outer {
        & .faqs {
            grid-column: 2/-2;
        }
    }

    .studies {
        grid-template-columns: repeat(2,1fr);
    }

}

@media screen and (max-width:700px) {
    .hero,
    .textonly,
    .case_studies_cta {
        & .text,
        & .bg {
            width:90%;
        }
    }

    .case_studies_cta .text {
        margin-left:10%;
    }

    .steps_arrows {
        & .wrap {
            & .steps {
                & .step {
                    & .inner {
                        & .image {
                            grid-column:1/5;
                        }
                        & .text {
                            grid-column:5/-1;
                        }
                    }
                    &:nth-of-type(4n+1) {
                        & .inner {
                            grid-column:1/-3;
                        }

                        & .arrow {
                            grid-column:-3/-1;
                        }
                    }
                    &:nth-of-type(4n+2) {
                        & .inner {
                            grid-column:3/-1;
                        }

                        & .arrow {
                            grid-column: 1/3;
                            scale: -1 1;
                            order: -1;
                        }
                    }
                    &:nth-of-type(4n+3) {
                        & .inner {
                            grid-column:1/-3;
                        }

                        & .arrow {
                            grid-column: -3/-1;
                            scale: 1 1;
                            order: 0;
                        }
                    }
                    &:nth-of-type(4n+4) {
                        & .inner {
                            grid-column:3/-1;
                        }

                        & .arrow {
                            grid-column: 1/3;
                            scale: -1 1;
                            order: -1;
                        }
                    }
                }
            }
        }
    }

    .related {
        grid-template-columns: repeat(1,1fr);
    }
}

@media screen and (max-width:600px) {
    
    .hide_m {
        display:none;
    }

    .services_grid .wrap .grid,
    .services_grid_text .wrap .grid,
    .studies {
        grid-template-columns: repeat(1,1fr);
    }

    .steps_arrows {
        & .wrap {
            & .steps {
                & .step {
                    & .inner {
                        grid-template-columns: 1fr;

                        & .image {
                            position:relative;
                            aspect-ratio: 1.6;
                            grid-column:1/-1;
                            order:0;
                        }
                        & .text {
                            grid-column:1/-1;
                            order:1;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:500px) {
    .col2video {
        & .video,
        &.flip .video,
        &.style2 .video,
        & .text,
        &.flip .text,
        & .videos {
            grid-column: 1/-1;
        }
    }


    .services_grid {
        & .wrap {
            & .grid {
                & .cs {
                    padding-left:2rem;
                }
            }
        }
    }

    .testimonials {
        & .test {
            width:80%;
        }
    }

    .faqs-outer {
        & .faqs {
            grid-column: 1/-1;
        }

        & summary {
            font-size:1.2rem;
        }
    }
}

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

}