@font-face {
    font-family: 'Creato Display';
    src: url('../fonts/CreatoDisplay.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {

    /* Core panel colours */
    --teal: #1F3A44;
    --green: #11A04A;
    --orange: #E4572E;

    /* Light surfaces */
    --cream: #F3F0E8;
    --sand: #DCD6C8;

    /* Typography */
    --ink: #172126;
    --grey-teal: #58747A;

    /* Small visual accent */
    --yellow: #F2C14E;


    /* glogals */
   --padding: 1rem;


   /* debugs */
   --debug-red: 2px solid red;
      --debug-green: 2px solid rgb(55, 255, 0);
         --debug-blue: 2px solid rgb(43, 0, 255);
            --debug-yellow: 2px solid rgb(255, 225, 0);




}



/* ========================================= RESET ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: 'Creato Display', sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.5;
    font-weight: 400;
    
}



h1 {
    max-width: 900px;
    font-size: clamp(3rem, 5rem, 6rem);
    line-height: 0.88;
    
}

h3{
    font-weight: 400 ;
    font-size: 3rem;
    line-height: 3rem;
}



h4{
    font-weight: 400 ;
    font-size: 2rem;
    line-height: 2rem;
}

h5{
    font-weight: 200 ;
    font-size: 1.5rem;
    line-height: 2rem;
}




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

p{
    font-size: 1rem;
}

img{
    width: 100%;
    height: auto;
}

/* ========================================= PAGE LAYOUT ========================================= */


.siteWrapper{
    min-height: 100vh;
 
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr auto;
  
    grid-template-areas: 
    "header main"
    "footer footer";

}


        /* whole site container wrapper below 600px */
        @media (max-width: 600px) {

            .siteWrapper{
            min-height: 100vh;
        
            position: relative;
            display: grid;
            grid-template-columns: 1fr ;
            grid-template-rows: 96px 2fr 1fr;
        
            grid-template-areas: 
            "header"
            "main"
            "footer";

        }


        }


/* === HEADER SIDEBAR========= */
/* grid area header */
header.site-header{
    grid-area: header;
    position: relative;
  
    height: 100%;
    background: var(--teal);
    color: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: start;
    z-index: 100;
  
   
 
}


.header.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--cream);
  
  /* Shrink the width by 50% */
  transform: scaleX(0.5);
  transform-origin: right; /* Keeps it pinned to the right edge */
}

.headerInner{


    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding:2rem;

}

        /* header inner media query */
        @media (max-width: 900px) {

                .headerInner{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100vh;
                padding:1rem;

            }

            /* header for mobile flex directio row */

            @media (max-width: 600px) {


                header.site-header{
            grid-area: header;
            position: relative;
        
            height: 96px;
            background: var(--teal);
            color: var(--cream);
            display: flex;
            flex-direction: column;
            justify-content: start;
            z-index: 100;
            }

                .headerInner{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: 100vh;
                padding:1rem;

            }

        


            }


            
        }


.logo {



}



.logo span {
    color: var(--green);
}



main.content {
grid-area: main;

}


.main-nav ul {
    list-style: none;
}

.main-nav li {
    margin-bottom: 12px;
}

.main-nav a {
    display: block;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 8px 0;
    transition: color 0.2s ease;
    font-weight: 300;
}

.main-nav a:hover {
    color: var(--green);
}

.sidebar-cta {
    display: block;
    background: var(--green);
    color: var(--cream);
    padding: .5rem;
    font-size: 1rem;
    letter-spacing: 2px;

    text-transform: uppercase;
    text-align: center;
    transition: .8s;
    font-weight: 200;

}



.sidebar-cta:hover{

    background: var(--orange);
    color: var(--cream);

}


#noPitch{
    display: flex;
    flex-direction: column;
}

/* ===========Hamburger ============ */

.hamburgerToggle {
    height: 48px;
    width: 48px;
    background: var(--teal);
    border: 0;
    cursor: pointer;
    display: none;

    position: relative;
    z-index: 1001;
}

.hamburgerLines {
    position: absolute;
    left: 50%;
    
    width: 30px;
    height: 4px;
    
    background: var(--cream);
    
    transform: translateX(-50%);
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.hamburgerLines:nth-child(1) {
    transform: translate(-50%, -8px);
}

.hamburgerLines:nth-child(2) {
    transform: translate(-50%, 0);
}

.hamburgerLines:nth-child(3) {
    transform: translate(-50%, 8px);
}


        /* MOBILE Hamberger*/

        @media (max-width: 640px) {

            .hamburgerToggle {
                display: block;
            }

            .main-nav {
                display: flex;

                position: fixed;
                z-index: 1000;

                top: 0;
                left: 0;

                width: 100%;
                height: 100vh;

                background: var(--teal);

                justify-content: center;
                align-items: center;

                /* Start above the screen */
                transform: translateY(-100%);

                /* Animate it */
                transition: transform 0.5s ease;
            }


            /* MENU OPEN */

            body.menu-open .main-nav {
                transform: translateY(0);
            }

            
            .free-Start-cta a{
            display:none;
            gap:.8rem;
            

            }

            #noPitch{
                display: none;
            }




            /* HAMBURGER → X */

            body.menu-open .hamburgerLines:nth-child(1) {
                transform: translate(-50%, 0) rotate(45deg);
            }

            body.menu-open .hamburgerLines:nth-child(2) {
                opacity: 0;
            }

            body.menu-open .hamburgerLines:nth-child(3) {
                transform: translate(-50%, 0) rotate(-45deg);
            }


            /* Stop page scrolling */

            body.menu-open {
                overflow: hidden;
            }

            
        }

 

   




/* ========================================= BENTO HERO ========================================= */
section.hero {
    padding: 1px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas: 
    "main main main main green green"
    "main main main main green green"
    "main main main main orange orange"
    "main main main main orange orange"
    "main main main main yellow yellow"
    "bottom bottom bottom bottom yellow yellow"
    ;
}

            /* hero below tablet 900px */
            @media (max-width: 1080px) {

                section.hero {
                padding: 1px;
                max-height: 70vh;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: 3fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-areas: 
                "green green orange orange yellow yellow"
                "main main main main main main"
                "main main main main main main"
                "main main main main main main"
                "main main main main main main"               
                "bottom bottom bottom bottom bottom bottom"
                ;
            }
                            
                   
            }

            /*hero on mobile  */
            @media (max-width: 640px) {

                    section.hero {
                    padding: 1px;
                    max-height: 70vh;
                    display: grid;
                    grid-template-columns: repeat(6, 1fr);
                    grid-template-rows: 1fr 1fr 1fr 2fr 2fr 1fr;
                    grid-template-areas: 
                    "green green green green green green "
                    "orange orange orange orange orange orange"
                    "yellow yellow yellow yellow yellow yellow"
                    "main main main main main main"
                    "main main main main main main"               
                    "bottom bottom bottom bottom bottom bottom"
                    ;
                }
        }
                








/* the individual bento boxes */
.bentoBoxes {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    width:100%

}

.hero-main {
    grid-area: main;

    background: var(--teal);
    color: var(--cream);
    justify-content: flex-end;
}





.hero-green {
   grid-area: green;
    background: var(--green);
    color: var(--cream);
}

.hero-intro p {
    font-size: 1.25rem;
    max-width: 300px;
}

.hero-number {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1;
}

.hero-orange {
   grid-area: orange;
    background: var(--orange);
    color: var(--cream);
}

.hero-yellow {
       grid-area: yellow;
        background: var(--yellow);
        color: var(--cream);
}



.hero-bottom {
    grid-area: bottom;
    background: var(--sand);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-bottom p {
   
}

.arrow {
    font-size: 3rem;
}

/* ========================================= GENERAL SECTIONS ========================================= */
section {
    padding: 120px 7vw;
}

.section-label {
    margin-bottom: 30px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--grey-teal);
}

.section-heading {
    max-width: 1000px;
    font-size: clamp(3rem, 5vw, 7rem);
    line-height: 0.9;
    margin-bottom: 60px;
}

.section-copy {
    max-width: 700px;
    font-size: 1.25rem;
}

/* ========================================= PROBLEM SECTION ========================================= */
.problem {
    background: var(--cream);
    min-height: 80vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

.problem-statement {
    font-size: clamp(1rem, 2vw, 3rem);
    line-height: 1;
}

/* ========================================= WHAT IS YOUR WEBSITE DOING? ========================================= */
.website-job {
    background: var(--green);
    color: var(--cream);
}

.website-job .section-label {
    color: var(--cream);
}

.questions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.question {
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 1.8rem;
    line-height: 1.1;
}

/* ========================================= WORDPRESS SECTION ========================================= */
.wordpress {
    background: var(--teal);
    color: var(--cream);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.wordpress .section-label {
    color: var(--green);
}

/* ========================================= RESEARCH SECTION ========================================= */
.research {
    background: var(--sand);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.process-card {
    min-height: 350px;
    padding: 35px;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.process-number {
    font-size: 4rem;
    font-weight: bold;
    color: var(--green);
}

.process-card h3 {
    font-size: 2rem;
    line-height: 1;
}

/* ========================================= DESIGN / MOTION ========================================= */
.motion {
    background: var(--orange);
    color: var(--cream);
}

.motion .section-label {
    color: var(--cream);
}

.motion-statement {
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.9;
    max-width: 1000px;
}

/* ========================================= ASH ========================================= */
section.ash {
    background: var(--cream);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
    border: var(--debug-blue);


 
}

.ash-image {
    min-height: 300px;
    aspect-ratio: 3/4;
    background: var(--teal);
    display: grid;
    place-items: center;
    color: var(--cream);
    font-size: 0.8rem;
    text-transform: uppercase;
    object-fit: cover;
}

.ash-image img{
    height: 100%;
    width: 100%;
 

}

/* ========================================= WEBFRESH 123 ========================================= */
.pricing {
    background: var(--teal);
    color: var(--cream);
}

.pricing .section-label {
    color: var(--green);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.price-card {
    padding: 40px;
    min-height: 400px;
    background: var(--cream);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price {
    font-size: 4rem;
    line-height: 1;
}

/* ========================================= FREE START ========================================= */
.free-start {
    background: var(--yellow);
    color: var(--ink);
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.free-start h2 {
    max-width: 1000px;
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 0.88;
    margin-bottom: 40px;
}


.free-Start-cta{
   display: grid;
   gap:.8rem;
  
   

}

.free-Start-cta p{
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: 0;
}



.button {
    display: inline-block;
    width: fit-content;
    padding: 16px 24px;
    background: var(--teal);
    color: var(--cream);
    text-transform: uppercase;
    font-weight: bold;
}

/* ========================================= FOOTER ========================================= */
footer {
    grid-area: footer;
width: 100%;
    padding: 80px 7vw;
    background: var(--teal);
    color: var(--cream);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

footer h2 {
    font-size: 4rem;
    line-height: 0.9;
}

footer ul {
    list-style: none;
}

footer li {
    margin-bottom: 10px;
}