/* ==========================================================
   RESPONSIVE
   Nine3 Designs
========================================================== */


/* ---------- Large Screens ---------- */

@media (max-width:1200px){

.hero-grid,
.about-grid,
.why-grid,
.contact-grid{

    gap:3rem;

}

.hero-image img{

    width:460px;

}

}


/* ---------- Tablets ---------- */

@media (max-width:992px){

.container{

    width:min(92%,1000px);

}


/* Header */

.logo img{

    width:180px;

}

.main-nav ul{

    gap:1.25rem;

}


/* Hero */
.hero{

    padding:120px 0 80px;

    min-height:auto;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:3rem;

}

.hero-text p{

    margin-inline:auto;

}

.hero-buttons{

    justify-content:center;

}


.hero-image img{

    width:420px;

}


/* Stats */

.stats-grid{

    grid-template-columns:repeat(2,1fr);

    gap:2rem;

}


/* Generic */

.about-grid,
.why-grid,
.contact-grid{

    grid-template-columns:1fr;

    gap:3rem;

}

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

.portfolio-grid{

    grid-template-columns:repeat(2,1fr);

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}
/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

/* ---------- Global ---------- */

section{

    padding:80px 0;

}

.container{

    width:92%;

}


/* ---------- Typography ---------- */

h1{

    font-size:2.7rem;

    line-height:1.15;

}

h2{

    font-size:2rem;

}

.hero-text p{

    font-size:1rem;

}


/* ---------- Header ---------- */

.site-header{

    height:var(--header-height);

}

.logo img{
    width:170px;

}

/* ---------- Navigation ---------- */

.mobile-toggle{

    display:block;

}

.main-nav{

    display:none;

}


/* ---------- Hero ---------- */

.hero{

    padding:120px 0 70px;

    text-align:center;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:2.5rem;

}

.hero-image{

    order:-1;

}

.hero-image img{

    width:320px;

    max-width:100%;

}

.hero-text{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-text p{

    max-width:100%;

}

.hero-buttons{

    width:100%;

    flex-direction:column;

    align-items:stretch;

    gap:15px;

}

.hero-buttons .btn{

    width:100%;

}


/* ---------- Stats ---------- */

.stats{

    padding:70px 0;

}

.stats-grid{

    grid-template-columns:repeat(2,1fr);

    gap:1.5rem;

}

.stats-grid h3{

    font-size:1.8rem;

}


/* ---------- About ---------- */

.about-grid,

.why-grid{

    grid-template-columns:1fr;

    gap:3rem;

    text-align:center;

}


/* ---------- Services ---------- */

.services-grid{

    grid-template-columns:1fr;

    gap:1.5rem;

}


/* ---------- Portfolio ---------- */

.portfolio-grid{

    grid-template-columns:1fr;

    gap:2rem;

}

.portfolio-card{

    margin:0 auto;

    max-width:500px;

}

.portfolio-card img{

    width:100%;

}


/* ---------- Contact ---------- */

.contact-grid{

    grid-template-columns:1fr;

    gap:3rem;

}

.contact-form,

.contact-about{

    padding:30px;

}


/* ---------- FAQ ---------- */

.faq-list{

    grid-template-columns:1fr;

    gap:20px;

}

.faq-list summary{

    padding:22px;

    font-size:1rem;

}

.faq-list p{

    padding:0 22px 22px;

}


/* ---------- Client Logos ---------- */

.clients-grid{

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}


/* ---------- Footer ---------- */

.footer-grid{

    grid-template-columns:1fr;

    gap:2.5rem;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    margin-top:2rem;

}

}


/* ---------- Container ---------- */

.container{

    width:94%;

}

/* ---------- Typography ---------- */

h1{

    font-size:2.2rem;

    line-height:1.15;

}

h2{

    font-size:1.75rem;

}

h3{

    font-size:1.25rem;

}

.hero-text p{

    font-size:.95rem;

}

/* ---------- Header ---------- */

.site-header{

    height:var(--header-height);

}

.logo img{

    width:160px;

}

/* ---------- Hero ---------- */

.hero{

    padding:105px 0 60px;

}

.hero-image img{

    width:410px;

}

.hero-buttons{

    gap:12px;

}

.hero-buttons .btn{

    width:100%;

    padding:15px 20px;

}

/* ---------- Stats ---------- */

.stats-grid{

    grid-template-columns:1fr;

    gap:1.25rem;

}

.stats-grid h3{

    font-size:1.6rem;

}

/* ---------- Services ---------- */

.services-grid{

    gap:1.25rem;

}

/* ---------- Portfolio ---------- */

.portfolio-grid{

    gap:1.5rem;

}

/* ---------- Contact ---------- */

.contact-form,

.contact-about{

    padding:24px;

}

/* ---------- FAQ ---------- */

.faq-list{

    gap:16px;

}

.faq-list summary{

    padding:18px 20px;

    font-size:.95rem;

}

.faq-list p{

    padding:0 20px 20px;

    font-size:.95rem;

}

/* ---------- Clients ---------- */

.client-grid{

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.client-grid img{

    max-width:110px;

    margin:auto;

}

/* ---------- Footer ---------- */

.footer-grid{

    gap:2rem;

}

.footer-bottom{

    margin-top:1.5rem;

    padding-top:1.5rem;

    font-size:.9rem;

}
@media(max-width:768px){

    .main-nav.active{

        display:block;

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        background:var(--primary);

        padding:2rem;

    }

    .main-nav.active ul{

        flex-direction:column;

        gap:1.5rem;

    }

}
@media (max-width:768px) {

    .about-mobile-hide{

        display:none;

    }

}
    /* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px)
{}
/* ==================================================
   MOBILE — MOVING STATS BANNER
================================================== */

@media (max-width: 600px) {

    .mobile-stats-ticker {
        width: 100%;
        overflow: hidden;

        background: var(--ivory);
        border-top: 1px solid rgba(64, 74, 59, .10);
        border-bottom: 1px solid rgba(64, 74, 59, .10);

        padding: 15px 0;
    }

    .mobile-stats-track {
        display: flex;
        width: max-content;

        animation: nine3StatsScroll 24s linear infinite;
    }

    .mobile-stat {
        flex: 0 0 auto;

        display: flex;
        align-items: baseline;
        gap: 7px;

        padding: 0 30px;

        white-space: nowrap;
    }

    .mobile-stat strong {
        color: var(--green);

        font-size: 14px;
        font-weight: 700;
        letter-spacing: .5px;
    }

    .mobile-stat span {
        color: var(--text-light);

        font-size: 11px;
        font-weight: 500;
        letter-spacing: .5px;
    }

}


@keyframes nine3StatsScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

/* ==================================================
   MOBILE — FOOTER
================================================== */

@media (max-width: 600px) {

    .site-footer .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer .footer-brand {
        width: 100%;
        text-align: center;
    }

    .site-footer .footer-social {
        justify-content: center;
    }

    .site-footer .footer-email {
        text-align: center;
    }

    .site-footer .footer-grid > div:last-child {
        width: 100%;

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

        margin-top: 30px;
    }

    .site-footer .footer-logo {
        display: block;
        width: 170px;
        max-width: 70%;
        height: auto;
        margin: 0 auto;
    }

}
/* ==================================================
   MOBILE — TYPOGRAPHY SCALE
================================================== */

@media (max-width: 600px) {

    h1 {
        font-size: 34px !important;
        line-height: 1.08 !important;
    }

    h2 {
        font-size: 30px !important;
        line-height: 1.1 !important;
    }

    h3 {
        font-size: 22px !important;
        line-height: 1.15 !important;
    }


    .page-hero h1,
    .page-hero h2 {
        font-size: 34px !important;
    }


    .hero h1,
    .hero h2 {
        font-size: 34px !important;
    }


    .section-title h2,
    .section-heading h2 {
        font-size: 30px !important;
    }


    .work-hero h1 {
        font-size: 34px !important;
    }


    .work-cta h2 {
        font-size: 32px !important;
    }

}
/* ==================================================
   MOBILE — MOVING STATS BANNER
================================================== */

@media (max-width: 600px) {

    .stats {
        overflow: hidden;
    }

    .stats .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .stats-grid {
        display: flex !important;
        width: max-content;

        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        animation: nine3StatsMove 18s linear infinite;
    }

   @media (max-width: 600px) {

    .stats {
        overflow: hidden;
    }

    .stats .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .stats-grid {
        display: flex !important;
        width: max-content;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0 !important;

        animation: nine3StatsMove 18s linear infinite;
    }

    .stat-item {
        flex: 0 0 auto;

        display: flex !important;
        align-items: center;
        gap: 8px;

        white-space: nowrap;

        /* thinner banner */
        padding: 10px 24px;
    }

    .stat-item i {
        flex-shrink: 0;
        font-size: 11px;
    }

    .stat-item span {
        white-space: nowrap;
        font-size: 10px;
    }

}
/* ==================================================
   MOBILE STATS ANIMATION
================================================== */

@keyframes nine3StatsMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}}
/* ==========================================================
   ABOUT PAGE — WHY CHOOSE US TEXT COLOURS
========================================================== */

body .why-section .service-card h3 {
    color: #C8A96A !important;
}

body .why-section .service-card p {
    color: #404A3B !important;
}

/* ==========================================================
   FINAL MOBILE FIXES — NAV / SPACING / SISTER SITE
========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.site-header,
.site-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {

    .header-container {
        width: calc(100% - 30px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        padding: 0;
        position: relative;
        z-index: 10002;
    }

    .mobile-toggle span {
        display: block;
        width: 28px;
        height: 3px;
        margin: 4px 0;
        background: #FEF9F3;
        border-radius: 20px;
        transition: transform .3s ease, opacity .3s ease;
    }

    .main-nav {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #404A3B !important;
        border-top: 1px solid rgba(254,249,243,.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
        z-index: 10001;
    }

    .main-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .main-nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 15px !important;
    }

    .main-nav li {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 13px 10px;
        color: #FEF9F3 !important;
        box-sizing: border-box;
    }

    .main-nav .sister-site-mobile a {
        margin-top: 8px;
        border: 1px solid rgba(200,169,106,.6);
        border-radius: 30px;
        color: #D8BC84 !important;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

}

.sister-site-mobile {
    display: none;
}

@media (max-width: 768px) {
    .sister-site-mobile {
        display: block;
    }
}