/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@view-transition {
    navigation: auto;
}

:root {
    --logo-colour: #000000;
    --text-colour: #000000;
    --bright-text-colour: #fff;
    --accent-colour-g: 0 255 191;

    /* format for use in gradient */
    --accent-colour: rgb(var(--accent-colour-g));

    /* Derived from base */
    /* --accent-colour: rgb(0, 255, 191); */
    --page-colour: #f5f5f5;

    /* --contact-page: #1fd4d8; */
    --contact-page: var(--accent-colour);
    --alt-page1: #c8c8c8;
    --alt-page2: #520e8f;
    --alt-page3: #e9b184;
    --alt-page4: #00393a;
    --sidebar-text: rgb(255, 255, 255);
    --sidebar: rgba(0, 0, 0, 0.243);
    --sidebar-hover-color: rgba(0, 0, 0, 0.243);
    --nav-comp-padding: 5.5rem;

    --project-block-spacer: 4rem; /*bottom margin*/
    --project-block-v-spacer: 2rem; /*row gaps*/

    /* ---------------------------------------------------------------------------------- */
    /* ------------------------- TYPE SIZES --------------------------------------------- */
    --step--2: clamp(0.5208rem, 0.4944rem + 0.1609vw, 0.6191rem);
    --step--1: clamp(0.625rem, 0.5711rem + 0.3279vw, 0.8252rem);
    --step-0: clamp(0.75rem, 0.6558rem + 0.5732vw, 1.1rem);
    --step-1: clamp(0.9rem, 0.7476rem + 0.9274vw, 1.4663rem);
    --step-2: clamp(1.08rem, 0.8446rem + 1.4323vw, 1.9546rem);
    --step-3: clamp(1.296rem, 0.9435rem + 2.1444vw, 2.6055rem);
    --step-4: clamp(1.5552rem, 1.0389rem + 3.1408vw, 3.4731rem);
    /* --step-5: clamp(1.8662rem, 1.1224rem + 4.5255vw, 4.6296rem); */
    --step-5: clamp(1.8rem, 1rem + 4vw, 4.2rem);
    --step-6: clamp(2.2395rem, 1.1811rem + 6.4389vw, 6.1713rem);
    --projcontact: clamp(2.2395rem, 1.1811rem + 8.5vw, 8.8rem);
    --projintrolead: clamp(1rem, 1.4rem + 10vw, 2.2rem);
    --hero: clamp(1.8662rem, 1.1224rem + 4.5255vw, 4.6296rem);
}

/* ---------------- MOBILE & TABLET ------------------------------------------------- */
@media (max-width: 880px) {
    :root {
        --nav-comp-padding: 5.5rem;

        /* compensate for top of page nav overlap */
        --step--2: clamp(0.5208rem, 0.4944rem + 0.1609vw, 0.6191rem);
        --step--1: clamp(0.625rem, 0.5711rem + 0.3279vw, 0.8252rem);
        --step-0: clamp(0.75rem, 0.6558rem + 0.5732vw, 1.1rem);
        --step-1: clamp(0.9rem, 0.7476rem + 0.9274vw, 1.4663rem);
        --step-2: clamp(1.08rem, 0.8446rem + 1.4323vw, 1.9546rem);
        --step-3: clamp(1.296rem, 0.9435rem + 2.1444vw, 2.6055rem);
        --step-4: clamp(1.5552rem, 1.0389rem + 3.1408vw, 3.4731rem);
        --step-5: clamp(1.8662rem, 2rem + 5vw, 4rem);
        --step-6: clamp(2.2395rem, 4rem + 5vw, 6.1713rem);
        --projcontact: clamp(1.4rem, 1.8rem + 8.5vw, 8.8rem);
        --projintrolead: clamp(.5rem, 1rem + 10vw, 1.6rem);
        --hero: clamp(1.6rem, 1.8rem + 5vw, 2.5rem);

        --project-block-spacer: 3rem; /*bottom margin*/
        --project-block-v-spacer: 1rem; /*row gaps*/
    }
/* Session storage check for splash anim. */
.skip-anim #splash-screen {
    display: none !important;
}
.skip-anim #main-content {
    opacity: 1 !important;
}

    .projcontact > h2 {
        letter-spacing: -2.5px !important;
        text-wrap: none;
        min-width: max-content;

        /* prevent line break */
    }
}

/* Text highlight colour */
::selection {
    background: var(--accent-colour);
    color: #5b5b5b;
}

::-moz-selection {
    background: var(--accent-colour);
    color: rgb(0, 0, 0);
}

.nav-links {
    font-size: 1.2rem;
}

.hero-header {
    font-size: var(--hero);
    text-align: left;
    line-height: .95;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: -4px;
    padding-bottom: 4rem;
    color: var(--text-colour);
}

.word1 {
    color: red;
}

.word2 {
    color: blue;
}

.word3 {
    color: green;
}

.word4 {
    color: purple;
}

.word5 {
    color: orange;
}

.word6 {
    color: black;
}

/* .word1,.word2,.word3,.word4,.word5,.word6 {
    color: var(--accent-colour)!important; 
} */
p.hero-txt {
    max-width: 52ch;
    text-wrap: balance;
    font-size: var(--step-1);
    margin-bottom: 2rem;
    text-align: left;
}

p.hero-txt span {
    line-height: 1.2;
    color: var(--text-colour);
    background-color: var(--page-colour);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.05rem 0.3rem;
    border-radius: 0%;
}

/* --------------------------------------------- */
.section-header {
    font-size: var(--step-5);

    /* font-size: var(--projcontact) */
    letter-spacing: -3px;
    word-spacing: .08em;
    line-height: 1;
}

.s-section-header {
}

.sub-section-header {
    /* font-size: var(--step-0); */
}

.m-section-txt {
    font-size: var(--step-1);

    /* too little or big for card txt */
}

.s-section-txt {
    font-size: var(--step-0);
}

.tiny-txt {
    font-size: var(--step--1);
}

.servicecard h3 {
    /* font-size: var(--step-2) */
    font-size: 2.2rem;
}

.servicecard li {
    font-size: 1.2rem;
}

/* --------------------------------------------- */
.card span,
.card h3 {
    font-size: 1.125rem;
}

.card-txt {
    font-size: 0.875rem;

    /* var(--step--1) */
}

/* --------------------------------------------- */
.btn-txt {
    font-size: var(--step-2);
}

.l-btn-txt {
    font-size: var(--step-2) !important;
}

.proj {
    min-height: max-content; 
    padding-top: var(--nav-comp-padding);
    margin-bottom: 2rem;
}


.projintro>h3 {
    font-size: var(--projintrolead);
    font-weight: 300;
    /*font-style: italic;*/
    line-height: 1.1;
    margin: 0px 0 2rem;
    letter-spacing: -0.04em;
    color: var(--text-colour);
    text-wrap: balance;
    font-size: var(--projintrolead);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.;
}

@media (max-width:879px){
    .projintro>h3 {
        margin-top: 2rem;
    }
}

.projcontact>h2 {
    font-size: var(--projcontact);
}

/* -----------------GSAP HERO HEADER ANIMATION ----------------------------------------- */
.text-reveal {
    display: inline-block;
    position: relative;
    height: 1em;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
}

.word-reel {
    display: block;
    will-change: transform;
}

.word {
    display: block;
    height: 1em;
    line-height: .95;
}

/* ---------------------------------------------------------------------------------------------------------- */
body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: transat-text;
    background-color: var(--page-colour);
}

/* ========================================
   NAVIGATION - FIXED POSITIONING
   ======================================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 7;
}

#menu-button {
    border-bottom: none;
    /* removes underline from logo */
}

nav li:first-child {
    margin-right: auto;
    /* moves logo left */
}

#logo {
/*     height: 4.5rem; */
    margin-left: -.6rem !important;
    margin-top: -.2rem;
}

@media (max-width: 768px) {
    #logo {
/*         height: 3.2rem; */
    }
}

.topbar {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1.6rem;
    padding-bottom: 1.3rem;


    /* max-width: 900px */
    margin-left: auto;
    margin-right: auto;
    top: 0;
    transition: transform 0.3s ease;
    background-color: var(--page-colour);
}

.topbar a {
    text-decoration: none;
    position: relative;
    transition: 0.4s;
    color: var(--text-colour);
    height: 2.5rem;

    /* remove link colour default */
}

/* Target all links EXCEPT those inside #logo or .lang-switch */
.topbar li:not(#logo) a:not(.lang-switch a)::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent-colour);
    transition: all 0.4s;
}

/* Apply the hover effect only to those same filtered links */
.topbar li:not(#logo) a:not(.lang-switch a):hover::before {
    width: 100%;
    left: 0;
}

nav a {
    height: 100%;
    font-size: 1.2rem !important;
    padding: 0 .6rem;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ------HIDE TOP NAVBAR-------------------------------------------------------------- */
.hidetopnav {
    transform: translateY(-120%);
}

.menu-button {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
}

/* ---------------------------------------------------------------------------------- */
#menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    border-bottom: none !important;
    height: 3rem;
}

.menu-button {
    position: fixed;
    top: 10px;

    /* Adjust to match your current position */
    right: 20px;

    /* Adjust to match your current position */
    z-index: 9999;

    /* Higher than sidebar */
}

#lottie-menu {
    /* width: 1.5rem */
    /* height: 1.5rem */
    /* cursor: pointer */
    transform: scale(1.3) translateY(-2px);
    transform-origin: center;
}

#lottie-menu svg {
    /* filter: invert(1) */
}

/* ------ NAVTOP NAVBAR - LANG BUTTON --------------------------------------------------------------- */
.lang-switch {
    display: inline-flex;
    background-color: #2a2a2a;
    border-radius: 4rem;
    padding: .3rem;
}
.lang-switch a {
    height: 1.5rem;
    color: #888;
}

.lang-btn {
    padding-inline: 1rem;
    padding-top: .2rem;
    padding-bottom: .1rem;
    border: none;
    border-radius: 10rem;
    background-color: transparent;
    color: #888;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: transat-text, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.lang-btn:hover {
    color: #aaa;
}

.lang-btn.active {
    background-color: var(--accent-colour);
    color: var(--text-colour);
}

/* ========================================
   SIDEBAR STYLES
   ======================================== */
.sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(15em, 100%);
    z-index: 8;

    /* Higher than nav */
    background-color: var(--sidebar);
    backdrop-filter: blur(15px);
    transition: right 300ms ease-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 4rem;
    list-style: none;

    /* removes bullets from sidebar items */
}

.sidebar a {
    color: var(--sidebar-text);
    width: 100%;
    padding-left: 1rem;
}

.sidebar .lang-switch {
    margin-top: 1rem;
    margin-left: .8rem;
}

.sidebar a:hover {
    background-color: var(--sidebar-hover-color);
}

.sidebar.show {
    right: 0;
}

.sidebar li {
    width: 100%;
    height: 4rem;

    /* changes sidebar item height */
}

/* Close button positioning - appears in same spot as menu button */
#menu-button {
    z-index: 9;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */
.about {
    /* background-color: var(--page-colour) 
    /* padding-top: var(--nav-comp-padding) */
    /* min-height: 100vh */
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--nav-comp-padding));
    position: relative;
    z-index: 1;
}

/* .about::before {
    position: absolute;
    content: "";
    z-index: -2;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    left: 0rem;
    background: radial-gradient(circle,rgba(45, 237, 189, 1) 0%, rgba(245, 245, 245, 1) 100%);
} */
.aboutsection {
    display: flex;
    width: 100%;

    /* margin: 0 auto */
    flex-direction: column;
    align-items: flex-start;
}

.profilephoto {
    position: absolute;
    z-index: -1;
    max-width: 50%;
    height: 100%;
    display: flex;
    flex-direction: row;
    right: 2rem;
    object-fit: cover;

    /* top: 2rem; */
}

.aboutsection::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    z-index: -2;

    /* background: radial-gradient(circle,rgba(45, 237, 189, 1) 0%, rgba(245, 245, 245, 1) 100%); */
}

@media (max-width: 880px) {
    .profilephoto {
        display: none !important;

        /* hide profile photo on mobile */
    }
}

/* ------GALLERY SLIDER-------------------------------------------------------------- */
/* 1. Make the main slider container fill the viewport height */
.gallery.glide {
    height: 100vh;
    margin: 0;

    /* Remove default margins */
}

/* 2. Ensure slides and track also fill the height */
.gallery .glide__track,
.gallery .glide__slides,
.gallery .glide__slide {
    height: 100vh;
}

/* 3. Style the images for full-screen coverage */
.gallery .fullscreen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Ensures the image covers the slide area without stretching */
}

/* 4. Subtle Arrow Styling (Using the unique button classes) */
.gallery-arrow-prev,
.gallery-arrow-next {
    /* Common subtle styles */
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4) !important;

    /* Semi-transparent background */
    color: white !important;
    border: none !important;
    width: 50px;
    height: 50px;
    line-height: 50px;

    /* Center the icon vertically */
    text-align: center;
    font-size: 1em !important;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
    border-radius: 100% !important;
}

/* Hover effect to make them a little less subtle when moused over */
.gallery-arrow-prev:hover,
.gallery-arrow-next:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Button edge positioning */
.gallery-arrow-prev {
    left: .5rem !important;
}

.gallery-arrow-next {
    right: .5rem !important;
}

/* ------ SWIPER JS SLIDER ------------------------------------------------------------ */
.swiper {
    width: 100%;
}

.swiper-button-next {
    color: var(--page-colour) !important;
    opacity: 40% !important;
    transition: opacity 0.3s ease;
}

.swiper-button-next:hover {
    opacity: 80% !important;
}

.swiper-button-prev {
    color: var(--page-colour) !important;
    opacity: 40% !important;
    transition: opacity 0.3s ease;
}

.swiper-button-prev:hover {
    opacity: 80% !important;
}

.swipercontainer,
.swiper-slide {
    height: 100vh;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide picture,
.swiper-slide picture img,
.swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* ------PROJECTS SECTION------------------------------------------------------------ */
.projects {
    /* min-height: 90vh */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 6rem;
    padding-top: 4rem;
}

@media (max-width: 880px) {
    .projects {
        padding-bottom: 4rem !important;
    }
}

.projsection {
    /* padding-top: var(--navbar-height) */
    /* padding-bottom: var(--navbar-height) */
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}

.projcard {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) , 0px 3px 8px rgba(0, 0, 0, 0.04) , 0 12px 24px rgba(0, 0, 0, 0.06) , 0 24px 48px rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
    
    overflow: hidden;
    isolation: isolate;

    /* affects z-index stacking order */
    border-radius: 1rem;
    align-items: end;
    display: flex;
    flex: 1 1 calc(33.333% - 13.33px);
    height: 18rem;
    max-height: auto;
    min-width: 250px;
    max-width: 100%;
}

.projcard > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.projcard::before {
    content: '';
    position: absolute;
    
    inset: 0;
    z-index: 3;
    background: linear-gradient( /* GRADIENT colour */
        0deg,
        rgb(var(--accent-colour-g) / .9),
        rgb(var(--accent-colour-g) / .5),
        rgb(var(--accent-colour-g) / 0)
    );
    pointer-events: none; /* Allow clicks to pass through to the link */
}

.projcard p {
    position: absolute;
    z-index: 3;
    bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--text-colour);

    /* TEXT colour */
    font-size: 2rem;
    font-family: transat-text, sans-serif;
    font-weight: 400;
}

/* ANIMATION EFFECTS for hover enabled devices */
@media (hover: hover) and (pointer: fine) {
    .projcard::before {
        transition: 0.3s ease;
        opacity: 0;
            pointer-events: none;
    }

    .projcard p {
        transform: translateY(20px);

        /* Start 20px below */
        transition: 0.3s ease;
        opacity: 0;
    }

    .projcard:hover::before,
    .projcard:hover p {
        transition: 0.3s ease;
        opacity: 1;
        transform: translateY(0px);

        /* Moves text to original position on hover */
    }
}

/* ---------------------------------------- */
    /* GALLERY CSS */
/* ---------------------------------------- */
#masonry-gallery {
    --gap: clamp(.5rem, 5vmin, 1rem);
    columns: 300px;
    gap: var(--gap);
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
}

@media (max-width: 879px) {
    #masonry-gallery {
        --gap: clamp(.4rem, 5vmin, .8rem);
        columns: 150px;
    }
}

#masonry-gallery > * {
    break-inside: avoid;
}

.gallery-item-wrap {
    position: relative;
    width: 100%;
    border-radius: 2px;
    margin-bottom: var(--gap);
    overflow: hidden;
}

.gallery-item-wrap a {
    display: block;
}

.gallery-item {
    width: 100%;
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* overlay + text: shared hover transition */
.gallery-item-wrap::after,
.gallery-item-wrap p {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
}

.gallery-item-wrap::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgb(var(--accent-colour-g) / .9),
        rgb(var(--accent-colour-g) / .5),
        rgb(var(--accent-colour-g) / 0)
    );
}

.gallery-item-wrap p {
    position: absolute;
    bottom: 1rem;
    padding-left: 1.5rem;
    margin: 0;
    z-index: 3;
    transform: translateY(20px);
    color: var(--text-colour);
    font-size: 2rem;
    font-family: transat-text, sans-serif;
    font-weight: 400;
}

.gallery-item-wrap:hover::after,
.gallery-item-wrap:hover p {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 879px) {
    .gallery-item-wrap p {
        display: none;
    }
}




/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
/* HIDE BTNs ON MOBILE */
@media (max-width: 800px) {
    .hideOnMobile {
        display: none;
    }
}

.seemorecard {
    max-height: auto;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;

    /* min-width: 250px */
    border-radius: 1rem;
    height: 10rem;
    position: relative;
    align-items: end;
    flex: 1 1 0;
    max-width: 100%;
}

.services {
    /* Add top padding to account for fixed navbar */
    background-color: var(--alt-page1);
    padding-top: var(--navbar-height);
    padding-bottom: var(--navbar-height);

    /* Your grid layout starts here */
    /* display: grid */
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: center;
    align-items: center;
}

.servicessection {
    /* padding-top: var(--navbar-height) */
    /* padding-bottom: var(--navbar-height) */
    gap: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;

    /* max-width: 80% */
    /* margin-right: auto */
    /* margin-left: auto */
    /* margin: 53px auto 6rem */
    justify-content: center;
    margin-bottom: 2rem;
}

.servicecard {
    display: flex;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 280px;
    border-radius: 1rem;
    height: 25rem;

    /* position: relative */
    flex: 1 1 calc(33.333% - 4rem);
    max-width: 280px;
    background-color: var(--page-colour);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    /* Lighter layered shadow effect */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 12px 24px rgba(0, 0, 0, 0.06),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

/* .servicecard:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.15),
        0 32px 64px rgba(0, 0, 0, 0.2);
} */
.servicecard h3 {
    /* font-size: 2.2rem */
    padding-bottom: 0rem;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--text-colour);
}

.servicecard li {
    padding-left: 0rem;
    list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 30"><g transform="scale(.8) translate(0, 14)" transform-origin="center"><path fill="black" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></g></svg>');
    line-height: .2;
    padding-bottom: 0px;
    color: var(--text-colour);
    margin-left: 1rem;
}

.servicecard li::marker {
    font-size: 3rem;
    color: black;
}

/* HIDE SIDEBAR BUTTON ON LARGE SCREENS */
@media (min-width: 800px) {
    #menu-button {
        display: none !important;
    }
}

/* /* DISPLAY FULLSCREEN SIDEBAR - SMALLEST SCREENS */
@media (max-width: 400px) {
    .sidebar {
        width: 100%;
    }

    .btnInSidebar {
        right: 1rem;
    }
}

/* ----------------------WHY SECTION ------------------------------------------------- */
.why {
    /* Add top padding to account for fixed navbar */
    background-color: #000000;
    padding-top: 4rem;
/*     border-radius: ; */

    /* min-height: 70vh */
    /* Your grid layout starts here */
    /* display: grid */
    /* grid-template-columns: repeat(3, 1fr) */
    gap: 2rem;
    padding-bottom: 3rem;
    flex-direction: row;
    display: flex;
    margin-bottom: 6rem;
}

.whysection {
    display: flex;
    margin: 0 auto 0 auto;
}



.contact {
    background-color: var(--contact-page);
    padding-bottom: 0rem;

    /* min-height: 100vh */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.contact ::selection {
    background-color: black;
    color: var(--contact-page); /* Making the text white so it's readable on black */
}
.contact ::-moz-selection {
    background-color: black;
    color: var(--contact-page);
}

.contactsection {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fs-field {
    /* margin-bottom: 1rem !important */
}

.fs-input {
    margin-bottom: .5rem !important;
    padding-top: 0 !important;
}

.fs-label {
    /* margin-bottom: 0.5rem !important */
}

.servicecard > ul {
    padding-left: 2px;
}

/* ========================================
   TEXT SCROLLER STYLING
   ======================================== */
/* WRAPPER for the scroller component - apply your layout styles here */
.scroller-wrapper {
    /* This is where you can safely use flexbox, grid, margins, etc. */
    /* padding: 1rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 2rem;
    background-color: var(--alt-page1);
    overflow-x: hidden;

    /* align-items:flex-start; */
    /* height:100vh; */
    /* gap: 0; */
}

.serviceslist {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.serviceslist li {
    letter-spacing: -1px;
    font-size: 3rem;
    line-height: 1;
    color: var(--page-colour);

    /* Controls the height of each line */
}

@media (max-width: 880px) {
    .serviceslist li {
        letter-spacing: -0.1px;
        font-size: 2.2rem;
        line-height: 1;
    }
}

/* for testing purposed to ensure the animation lined up correctly
    .test {
    background: red !important;
    } */
/* .scroller (outer container):

        - Handles the mask/gradient fade effect on the edges
        - Controls the overflow: hidden to clip content
        - Sets the visible viewport/window
        
    .scroller_inner (inner container):
        - Handles the actual animation (the transform: translate(-50%))
        - Contains the duplicated content that scrolls infinitely
        - Needs width: max-content to prevent wrapping */
.scroller {
    max-width: 100%;

    /* line-height: 1; Match the li line-height */
}

.scroller_inner {
    /* padding-block: 1rem; */
    display: flex;
    flex-wrap: wrap;

    /* gap: 1rem; */
    color: var(--text-colour);
}

/* Gradient masks */
.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* Animation setup */
.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
            var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 140s;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 25s;
}

@keyframes scroll {
    to {
        transform: translate(-50%);

        /* the negative/positive decides flow direction */
    }
}



#identity {
    height: 8rem;
    padding-top: 0rem;
    padding-bottom: 2rem;
}

#pen {
    height: 8rem;
    padding-top: 0rem;
    padding-bottom: 2rem;
}

#photo {
    height: 8rem;
    padding-top: 0rem;
    padding-bottom: 2rem;

    /* fill: var(--accent-colour) */
}

.contactsection h2 {
    flex-basis: 100%;

    /* font-size: 6rem */
    font-weight: 300;
    text-align: center;
    flex-grow: 1;
    flex-shrink: 0;
    margin-bottom: 2rem;
    color: var(--text-colour);
    letter-spacing: -3px;
}

/* ------------------PROCESS SLIDER MODS --------------------------------------------- */
.process-slider .glide {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Offsets for shadow clipping fix ......... */
    overflow: visible !important;
}

.process-slider .glide__slides {
    overflow: visible !important;
}

.process-slider .glide__track {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.process-slider .glide__arrow--left {
    background-color: black !important;
    color: white !important;
    border-radius: 100% !important;
    padding: .8rem !important;
    font-family: transat, sans-serif;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    left: 1rem;

    /* sets margin distance */
}

.process-slider .glide__arrow--right {
    background-color: black !important;
    color: white !important;
    border-radius: 100% !important;
    padding: .8rem !important;
    font-family: transat, sans-serif;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    right: 1rem;

    /* sets margin distance */
}

@media (max-width: 880px) {
    .process-slider .glide__arrow--right {
        padding: .5rem !important;
    }

    .process-slider .glide__arrow--left {
        padding: .5rem !important;
    }
}

.process-slider .card {
    min-width: 280px;
    flex-shrink: 0;
    flex-grow: 1;
    border-radius: 8px;
    overflow: hidden;

    /* applies round corners to image */
    scroll-snap-align: start;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 4px 10px -4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 22rem;

    /* Animation ease */
}

.process-slider .card:hover {
    transform: translateY(-8px);

    /* Animation */
    /* box-shadow: 6px 15px 30px rgba(0, 0, 0, 0.25); /* Enhance shadow on hover */
}

/* BACK TO TOP BUTTON --------------------------------------------- */
#scrollToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    font-size: 3rem;
    font-family: transat-text;
    color: black;
    z-index: 1000;
    text-decoration: none;
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
    font-weight: 100;
}

#scrollToTop:hover {
    transform: translateY(-4px);
}

/* GSAP Typewriter animation */
.contactsection h2::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.smallcaps {
    font-variant: small-caps;
    text-transform: lowercase;
    color: var(--text-colour);
}

.cardimgbox {
    /* aspect-ratio: 16/10 */
    overflow: hidden;
    height: 50%;
}

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

.benefitslist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-bottom: 2.5rem;
    gap: 2rem;
}

.benefitslist p::before {
    content: '•';
    color: var(--accent-colour);

    /* Adjust color as needed */
    margin-right: .5em;

    /* margin-left: .5em; */
    position: relative;

    /* Shift point upward */
    top: -2px;
}

/* -------------------------------------remove grid line and gap on mobile */
#removeline {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
}

@media (max-width: 880px) {
    #removeline {
        border-top: 0 none #000000;
    }

    .benefitslist {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

#quotebtn {
    /* position: relative */
    z-index: 1;
    cursor: pointer;
    font-family: transat-text;
    font-weight: 500;

    /* font-size: 1.8rem */
    padding: .5em 2em;
    border: 2px solid #ffffff;
    border-radius: 10rem;
    background: #000000;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-self: center;
    min-width: max-content;
}

#quotebtn:onhover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    color: black;
}

#happenbtn {
    position: relative;
    z-index: 1;
    cursor: pointer;
    font-family: transat-text;
    font-weight: 500;

    /* font-size: 1.8rem */
    padding: .5em 1.6em;
    border: 3px solid black;
    color: var(--text-colour);
    border-radius: 10rem;
    background: var(--page-colour)!important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#happenbtn:hover {
    border: 3px solid black;
    color: var(--text-colour)!important;
    background: var(--accent-colour)!important;
}

#quotebtn:hover {
    color: black;
    background-color: var(--accent-colour);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery {
    height: 100vh;
    background-color: black;
}

/* Scroll down indicator */
.scroll-down {
    font-size: 3rem;
    color: black;
    animation: hover 1.5s ease-in-out infinite;
    align-self: center;
    padding-top: 2rem;
}

/* @keyframes hover { // fade animation
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
} */
@keyframes hover {
    // hover animation    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }
}

.size60vh {
    max-height: 60vh;
}

.50vhsize {
    max-height: 50vh;
}

.size50vh {
    max-height: 50vh;
}

/* .max900 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
} */


/* SECTION - PROJECT TEMPLATE STYLES */

@media (max-width:800px) {
    --block-spacer {
        grid-template-columns: 1fr;
        display: grid;
        grid-template-rows: auto;
        align-content: start;
        gap: 1rem;
    }
}

.projdesc {
    margin-top: -1rem;
    display: grid;
    gap: 2rem;
    /* grid-template-columns: minmax(280px, 350px) repeat(auto-fit, minmax(400px, 1fr)); */
    grid-template-columns: minmax(300px, 430px) repeat(auto-fit, minmax(430px, 1fr));
}

@media (max-width:800px) {
    .projdesc {
        grid-template-columns: 1fr;
        display: grid;
        grid-template-rows: auto;
        align-content: start;
        gap: 1rem;
    }
}

@media (max-width:801px) {
    .hrmobile {
        border: none;
        border-top: 1px solid rgba(0,0,0,0.2);
        margin-bottom: 1.5rem;
    }
}

@media (min-width:800px) {
    .hrmobile {
        display: none;
    }
}

.three_images {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--project-block-spacer);
    flex-grow: 1;
}

.three_images_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: fit-content;
    margin-bottom: var(--project-block-spacer);

    /* gap: 1rem */
}

@media (max-width:799px) {
    .three_images_grid {
        grid-template-columns: 1fr;
    }
}

.three_images_grid div {
    /* border-radius: 1rem */
    /* overflow: hidden */
}

.two_images {
    --grid-min-col-size: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-col-size),100%),1fr));
    max-width: 100%;
    gap: var(--project-block-v-spacer);
    margin-bottom: var(--project-block-spacer);
}

.header_txt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 100%;
    margin-bottom: var(--project-block-spacer);
    padding-block: 2rem;
    align-items: baseline;
    padding-inline: 2rem;
    gap: var(--project-block-v-spacer);
}

@media (max-width:880px){
    .header_txt {
        margin-bottom: 0;
    }
}

.header_txt > h3 {
    text-align: right;
}

@media (max-width: 880px){
    .header_txt > h3 {
        text-align: left;
    }
}

.txt_header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: var(--project-block-spacer);
    padding-block: 2rem;
    gap: var(--project-block-v-spacer);
    align-items: baseline;
}

@media (max-width: 880px){
    .txt_header > *:last-child {
        margin-bottom: 0;
        order: -1;
    }
}

.priv-gridblock {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 100%;

    /* padding-block: 1rem */
    align-items: baseline;
    padding-inline: 2rem;
    gap: var(--project-block-v-spacer);

    /* min-height: 30vh */
    margin-bottom: var(--project-block-spacer);
}

.text_image {
    --grid-min-col-size: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-col-size),100%),1fr));
    justify-content: center;
    align-content: center;
    margin-bottom: var(--project-block-spacer);
    gap: var(--project-block-v-spacer);
}

.text_block {
    max-width: 66ch !important;
    margin-inline: auto;
    margin-bottom: var(--project-block-spacer);

    /* text-align: center; */
}

.fourthirds_img {
    aspect-ratio: 4/3;
    object-fit: contain;
    margin-bottom: var(--project-block-spacer);
    max-width: 66.6%;
    display: block;
    margin-inline: auto;
}

.footer {
    max-height: min-content;
    padding-block: 2rem;
    z-index: 3;
}
.footer-colour {
    background-color: rgb(var(--accent-colour-g) )!important;
}

.footer::before {
    content: "";
    width: 100%;
    background-color: var(--page-colour);

    /* z-index: 0 */
}

.copyright {
    display: flex;
    column-gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    /* align-self: flex-end */
}
.copyright a {
    color: inherit;
    text-decoration: none;
    font-family: inherit;
}

.seemoresection {
    /* padding-top: var(--navbar-height) */
    /* padding-bottom: var(--navbar-height) */
    gap: 20px;
    flex-direction: row;
    display: flex;
}

.prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-inline: 2rem;
    padding-block: 2rem;
}

.prevnext > div > p {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 1;
    color: #ffffff;
}

.prevnext > div > p:hover {
    color: #ffffff !important;
}

.prevnext a:hover p {
    color: white !important;
}

.prevnext a:hover h3 {
    color: var(--accent-colour) !important;
}

.text_image > p {
    text-align: left;
    align-self: center;
    color: var(--text-colour);
}

.text_image img,.text_image picture {
    object-fit: cover;
    max-width: 100%;
    height: 100%;

    /* padding: 1rem */
    /* padding-right: 2rem */
}

.txt_header > h3,
.header_txt > h3 {
    /* font-size: 1.5rem */
    font-weight: 500;
    letter-spacing: 4px;
    font-variant: small-caps;

    /* padding-right: 2rem */
    margin-top: -13px;
    text-transform: lowercase;
    color: var(--text-colour);
}

.txt_header > h3 {
    text-align: left;
}
.txt_header > p {
    text-align: right;
}

@media (max-width: 880px) {
    .priv-gridblock > h3,
    .txt-2-gridblock > h3 {
        text-align: left;
    }
    .txt_header > p {
    text-align: left;
}
}

.txt-2-gridblock > p {
    line-height: 1.3;

    /* font-size: 1.1rem */
    font-weight: 400;
    letter-spacing: 0.4px;
    color: var(--text-colour);
}

.projcontact {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;

    /* padding: 2rem */
    padding-block: 4rem;
}

/* GSAP Typewriter animation */
.projcontact>h2::after {
    content: '|';
    animation: blink 1s infinite;
}

.wrapper {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
}

@media (max-width: 880px) {
    .wrapper {
        padding-inline: 1rem;
    }
}

.fullscrn > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 70vh;
}

.full-img {
    object-fit: cover;
    width: 100%;
    display: flex;
    margin-bottom: var(--project-block-spacer);
    flex-direction: row;
    align-items: center;
}

.projintro {
    grid-column: span 1;
    /* padding-left: 3rem; */
}

@media (max-width:879px) {
    .projintro {
        padding-left: 0;
    }
}

.smallimgscroller img {
    max-height: 10rem;
    height: 40%;
    margin-bottom: 2rem;
}

@media (max-width:880px){
    .smallimgscroller img {
        max-height: 8rem;
        height: 40%;
    }
}

.projtags > li {
    padding: .45em 1em .45em 1em;
    border: 1.5px solid rgba(0,0,0,0.8);
    border-radius: 10rem;
    font-weight: 400;

    /* font-size: 0.9rem */
    letter-spacing: 0.02em;
    color: var(--text-colour);
}

.projcontact > h2 {
    /* font-size: 8rem */
    font-weight: 300;
    letter-spacing: -6px;
    margin-bottom: 1.2rem;
    color: var(--text-colour);
}

#work {
    align-self: flex-start;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-grow: 9;

    /* font-size: 6rem */
    font-weight: 300;
    text-align: center;
    padding-bottom: 2rem;

    /* letter-spacing: -5px */
    color: var(--text-colour) !important;
    line-height: .8;
}

.services h2 {
    align-self: flex-start;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-grow: 9;

    /* font-size: 6rem */
    font-weight: 300;
    text-align: center;
    padding-bottom: 2rem;

    /* letter-spacing: -4px */
    color: var(--text-colour);
}

.why h2 {
    /* font-size: 6rem */
    line-height: .95;
    font-weight: 300;

    /* letter-spacing: -4px */
    margin-bottom: 2rem;
    color: var(--accent-colour);
    text-align: center;
}

.projects .s-section-txt {
    /* font-size: 1rem */
    line-height: 1.6;
    text-align: center;
    max-width: 65ch;
    margin: 0 auto 2rem;

    /* color: var(--text-colour) */
    color: #555;
    text-wrap: balance;
}

.services .s-section-txt {
    /* font-size: 1rem */
    line-height: 1.6;
    text-align: center;
    color: #555;
    max-width: 65ch;
    margin: 0 auto;
    text-wrap: balance;
    margin-bottom: 2rem;
}

.processsection .s-section-txt {
    line-height: 1.6;
    text-align: center;
    color: #555;
    max-width: 65ch;
    margin: 0 auto;
    margin-bottom: 1.4rem;
}

.benefitslist p {
    /* font-size: 1.2rem */
    color: var(--bright-text-colour);
    border-top-color: #000000;
    margin-left: .5rem;
}

.contact .captchaterms {
    font-size: 0.75rem;
    color: #777;
    margin-top: 0.8rem;
    text-align: center;
}
@media (max-width: 879px){
    .contact .captchaterms {
        max-width: 30ch;
        margin-inline: auto;
    }
}

.projcontact > p {
    /* font-size: 1.4rem */
    margin-bottom: -10px;
    color: var(--text-colour);
}

@media (max-width: 880px) {
    .projcontact > p {
        margin-bottom: 8px;
    }
}

textarea#message {
    position: relative;
    z-index: 1;
    min-height: 6rem;
    height: auto;
    resize: none;
    width: 100%;
    padding: 1.2rem;
    font-size: 1.1rem;
    border: none;
    background: transparent;
    box-sizing: border-box;
    outline: none;
    font-family: transat-text;
    line-height: 1.5;
    max-width: 100%;
    overflow-y: auto;
    border-radius: 2rem;
}

@media (max-width: 880px){
    /* ............reduce message box on mobile */
    textarea#message {
        min-height: 3rem;
        padding-block: .8rem;
    }

    .fs-label {
        margin-bottom: -.2 !important;
    }

    input#email {
        /* margin-bottom: -10px !important */
    }
}

.bulletpriv {
    position: relative;
    border-color: var(--accent-color);
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 8px;
    margin-bottom: 15px;
    margin-top: 11px;
    list-style-type: none;
    margin-left: 2px;

    /* border-top-left-radius: 10px */
    /* border-bottom-left-radius: 10px */
    /* padding-top: 3px */
    /* padding-bottom: 5px */
}

/* .bulletpriv:before {
    position: absolute;
    content:'⬩';
    top: -7px;
    left: -5px;
}
    @media (max-width: 880px) {
    .bulletpriv:before {
        top: -5px;
        left: -3.8px;
    }
    } */
.innerbullets:before {
    position: absolute !important;
    content: '⬩' !important;
    top: -.6px !important;
    left: 7px !important;
}

.projcard img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radgrad {
    -webkit-mask-image: linear-gradient(transparent,black);

    /* add mask */
    mask-image: linear-gradient(transparent 0%,black 60%);

    /* add mask */
    background: radial-gradient(
        farthest-side circle at bottom,
        rgb(var(--accent-colour-g) ) 0%,
        rgb(var(--accent-colour-g) / .2) 95%
    );
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 0.6;
}

/* ----------------- SPLASH ANIMATION ------------------------------- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#lottie-container {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    pointer-events: none;
}

/* Ensure lottie SVG doesn't capture clicks */
#lottie-container svg {
    pointer-events: none;
}

/* Click-capturing overlay */
#splash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

/* Support both id and pw-id for Markup Regions */
#main-content,
[pw-id="main-content"] {
    opacity: 0;
    transition: opacity 0.5s ease-in;
    padding: 2rem;
}

#main-content.visible,
[pw-id="main-content"].visible {
    opacity: 1;
}

/* Skip animation styles */
.skip-anim #main-content,
.skip-anim [pw-id="main-content"] {
    opacity: 1 !important;
}
/*------------------------------------------*/


.priv-gridblock h3 {
    font-weight: 500;
    letter-spacing: 4px;
    text-align: right;
    font-variant: small-caps;
    margin-top: -13px;
    text-transform: lowercase;
    color: var(--text-colour);
}

@media (max-width: 880px) {
    .priv-gridblock h3 {
        text-align: left;
    }
}

@media (max-width:880px) {
    .txt_header {
        margin-bottom: 0;
    }
}



/* SECTION - Scroll Animations */
@supports (animation-timeline: scroll()) {

    .projsection { /* proj thumbs */
        translate: 0px 30px;
        scale: 0.8;
        opacity: 0;
        animation: fade-in ease-out forwards;
        animation-timeline: view();
        animation-range-end:entry 50vh;
        animation-range-start:entry; 
        }    
    section.processsection {
        overflow-x: clip;      /* clips without scrollbars */
        overflow-y: visible;   /* allows vertical content if needed */
        }
    .glide {
        translate: 200px 0px;
        /* scale: 0.9; */
        opacity: 0;
        animation: fade-in ease-out forwards;
        animation-timeline: view();
        animation-range-end:entry 70vh;
        animation-range-start:entry; 
    }
    .projects:not(.projsection),
    .whysection:not(div.table,#quotebtn),
    section.processsection>div:first-child {
        translate: 0 50px;
        scale: 0.9;
        opacity: 0;
        animation: fade-in ease-out forwards;
        animation-timeline: view();
        animation-range-end:entry 50vh;
        animation-range-start:entry; 
    }
}

/* Set animation states to animate between - full site scroll by default */
@keyframes fade-in {
	to {
        translate: 0 0;
        scale: 1; 
        opacity: 1;
        pointer-events: auto;
    }
}

/* Fallback for mobile/safari - ensure content is visible and clickable */
@supports not (animation-timeline: view()) {
    .projsection,
    .projcard,
    .benefitslist p {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
} 

/* -----------------Anim Text - About ---------- */
/* #animcontainer {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

#animtext {
    color: black;
    font-family: transat-text;
    font-size: 2rem;
    text-align: right;
}

#animtext span {
    white-space: pre;
} */
/* -------------- FAQ Accordion ----------------------------------------- */
.faqquestion {
    min-height: 8rem;
    --accordian-stroke: 2px;
    padding-bottom: 2rem;
}

.faqquestion>* {
    max-width: 1200px;
    margin-inline: auto;
}

/* marker icon */
summary::marker {
    content: none;
}

summary::before {
    position: absolute;
    content: ">";
    color: black;
    padding-right: .4rem;
    font-weight: 500;
    transition: rotate 300ms;
    inset-inline-start: min(-1.3rem, -.5%);
    inset-block-start: 0rem;
}

details[open] summary::before {
    rotate: 90deg;
    margin-top: 2px;
    margin-left: -2px;
}

/* question */
summary {
    position: relative;
    list-style-position: outside;
    list-style: none;
    vertical-align: middle;
    line-height: 1.1;
    font-size: var(--step-2);    /* question font size */
}

details {
    padding-inline: 2rem;
    padding-block: 1rem;
    border-top: var(--accordian-stroke) solid black;
    overflow: hidden;
    interpolate-size: allow-keywords;
}

details:last-child {
    border-bottom: var(--accordian-stroke) solid black;
}

details::details-content {
    block-size: 0;
    transition: block-size 300ms, 
        content-visibility 300ms;
    transition-behavior: allow-discrete;
    font-size: var(--step-0);
}

details[open]::details-content {
    block-size: auto;
}

details > p {
    padding-top: .9rem;
    padding-left: .05rem;
}

/* ---------------- ABOUT ME DESKTOP------------------------------------------- */
@media (min-width: 880px){
    .aboutmecontainer {
        min-height: 45vh;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .aboutme {
        width: 100%;
        margin-right: -5rem;
        z-index: 2;
        background-color: var(--page-colour);
        padding-right: 2rem;
        padding-block: 4rem;
    }

    .aboutme h3 {
        text-align: right;
        letter-spacing: 4px;
        font-weight: 500;
    }

    .aboutmecontainer picture {
        object-fit: cover;
        max-width: 50%;
        padding: 2rem 0px 2rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .aboutmecontainer img {
        height: auto;
        width: 100%;
        object-fit: cover;
        border-radius: 2px;
        max-width: 100%;
    }


    .aboutme hr {
        border-top: 2px solid rgba(0,0,0,0.2);
        margin-block: 1rem;
    }

    .aboutme p {
        max-width: 40ch;
        margin-left: auto;
        margin-block: auto;
        font-size: var(--step-0);
        text-align: right;
        text-wrap: pretty;
        margin-bottom: 1rem;
    }
}

/* ---------------ABOUT ME MOBILE--------------------------------- */
@media (max-width: 880px){
    .aboutmecontainer {
        flex-direction: row;
        align-items: center;
    }

    .aboutme {
        margin-inline: auto;
        text-align: left;
        text-wrap: pretty;
        padding-block: 3rem 2rem;
        padding-inline: max(2rem, 10%);
    }

    .aboutme h3 {
        text-align: left;
        letter-spacing: 4px;
        font-weight: 500;
    }

    .aboutme hr {
        border-top: 2px solid rgba(0,0,0,0.2);
        margin-block: 1rem;
    }

    .aboutme p {
        margin: unset;

        /* max-width: 40ch; */
        text-align: left;
        margin-bottom: 1rem;
    }

    .aboutmecontainer picture {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        max-width: max(40%, 10rem);
        margin-inline: auto;
        align-self: center;
    }

    .aboutmecontainer img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 3rem;
    }
}

/* --------------------------------------------------------------- */
.abouttextcontainer {
    background-color: var(--accent-colour);
    padding-block: 3rem;

    /* margin-bottom: 6rem */
}

.abouttext {
    gap: 2rem;
    text-wrap: pretty;
    grid-template-rows: auto;
    border-bottom-left-radius: 1;
    grid-template-columns: 1fr 1fr 1fr;

    @media (width > 880px) {
        display: grid;
        grid-template-areas: "a b c";
        padding-block: 6rem;
    }
}

.abouttext>div {
    /* position: relative; */
    /* margin-bottom: 2rem */
    margin-inline: auto;
    font-size: var(--step-0);
    color: var(--accent-colour-g);
    margin-bottom: 2rem;

    /* background-color: rgb(var(--accent-colour-g)) */
}

@media (width>880px){
    .abouttext>div:nth-child(2) {
        margin-top: 4.1rem;
    }

    .abouttext>div:nth-child(3) {
        margin-top: 8.2rem;
    }
}

.abouttext h3 {
    /* position: absolute; */
    /* z-index: 2 */
    font-size: var(--step-5);
    font-weight: 400;
    padding-inline: .5rem;
    letter-spacing: -0.04em;

    /* padding-left: 1rem */
    margin-left: -.2rem;
    padding-right: 2rem;

    /* padding-top: .6rem */
    /* background: linear-gradient(180deg,rgba(0, 0, 0, 1) 25%, rgba(0, 255, 191, 1) 88%, rgba(0, 255, 191, 1) 100%);
    color: transparent;
    background-clip: text; */
}

/* .abouttest>p:first-child {
    max-width: 45ch;
} */
.abouttext>div>p {
    /* border-top: 2px solid rgba(0,255,191) */
    border-top: 2px solid black;
    padding-top: 1.5rem;
    padding-inline: .5rem;
    line-height: 1.3;
}