/* ==========================================================
   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) {

    .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: 6px 20px;
    }

    .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 !important;
    box-sizing: border-box;
}

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

@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;
    }
}


/* ==========================================================
   FINAL MOBILE-ONLY POLISH — NINE3 DESIGNS
   Desktop styles intentionally untouched.
========================================================== */

@media (max-width: 768px) {

    /* Remove the old base.png artwork from the mobile About page */
    .about-story-image img[src*="base.png"] {
        display: none !important;
    }

    .about-story-image {
        display: none !important;
    }

    /* What We Do — tighter cards */
    .services-grid {
        gap: 1.05rem !important;
    }

    .service-card {
        padding: 1.9rem !important;
        border-radius: 18px;
    }

    .service-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 1.45rem !important;
        border-radius: 17px;
    }

    .service-icon svg {
        width: 29px !important;
        height: 29px !important;
    }

    .service-card h3 {
        font-size: 1.12rem !important;
    }

    .service-card p {
        font-size: .88rem !important;
        line-height: 1.65;
    }

    /* Creative Design Studio / homepage hero — tighter */
    .hero {
        padding-top: 96px !important;
        padding-bottom: 52px !important;
    }

    .hero-grid {
        gap: 1.6rem !important;
    }

    .hero-tag {
        margin-bottom: .65rem !important;
        padding: 11px 13px !important;
        font-size: .76rem !important;
    }

    .hero-text p {
        margin-top: .25rem;
        font-size: .9rem !important;
        line-height: 1.65;
    }

    .hero-image img {
        width: 285px !important;
    }

    /* Moving trust banner */
    .stats {
        padding: 8px 0 !important;
        overflow: hidden !important;
    }

    .stats-grid {
        display: flex !important;
        width: max-content !important;
        min-width: max-content !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        animation: nine3StatsLoop 20s linear infinite !important;
        will-change: transform;
    }

    .stat-item {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 8px 22px !important;
        font-size: .74rem !important;
    }

    .stat-item i {
        font-size: .82rem !important;
    }

    /* Our Work — give heading room at the top */
    .work-page .selected-work-heading {
        padding-top: 58px;
    }

    /* Portfolio filters: text only, no buttons/effects */
    .work-page .work-filters {
        margin-bottom: 34px !important;
        gap: 12px !important;
    }

    .work-page .work-filter,
    .work-page .work-filter.active,
    .work-page .work-filter:hover {
        padding: 4px 7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--green) !important;
        box-shadow: none !important;
        transform: none !important;
        cursor: default !important;
        pointer-events: none !important;
        transition: none !important;
    }

    /* Brilliant Businesses logos — smaller and centred */
    .work-page .work-client-grid {
        gap: 10px !important;
    }

    .work-page .work-client {
        padding: 14px !important;
    }

    .work-page .work-client img {
        width: 85% !important;
        height: 85% !important;
        margin: auto;
    }

    /* Contact — reduce the gap after social links */
    .contact-page .contact-grid {
        gap: 22px !important;
    }

    .contact-page .contact-details {
        gap: 10px !important;
        margin-bottom: 0 !important;
    }

    /* FAQ / supporting text */
    .faq-list p {
        font-size: .92rem !important;
        line-height: 1.7;
    }

}

@media (max-width: 390px) {

    .container {
        width: calc(100% - 44px) !important;
    }

    .hero {
        padding-top: 92px !important;
    }

    .hero-image img {
        width: 265px !important;
    }

    .service-card {
        padding: 1.75rem !important;
    }

    .work-page .work-client {
        padding: 11px !important;
    }

}

@keyframes nine3StatsLoop {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


/* ==========================================================
   FINAL MOBILE FIXES — AUGUST 2026
   Desktop styles intentionally untouched.
========================================================== */

@media (max-width: 768px) {

    /* Our Work — remove image arrows on mobile */
    .work-page .portfolio-project-arrow,
    .portfolio-page-work .portfolio-project-arrow {
        display: none !important;
    }

    /* About — reduce section spacing */
    .about-page .page-hero {
        padding-top: 62px !important;
        padding-bottom: 45px !important;
    }

    .about-page .about-story {
        padding: 45px 0 !important;
    }

    .about-page .about-story .about-grid {
        gap: 28px !important;
    }

    .about-page .why-section,
    .about-page .process {
        padding-top: 45px !important;
        padding-bottom: 50px !important;
    }

    /* Contact — reorder only on mobile:
       intro -> form -> response text -> socials */
    .contact-page .contact-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .contact-page .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .contact-page .contact-content {
        display: contents !important;
        padding-top: 0 !important;
    }

    .contact-page .contact-content > .section-label {
        order: 1;
    }

    .contact-page .contact-content > h2 {
        order: 2;
    }

    .contact-page .contact-content > .contact-intro-copy {
        order: 3;
        margin-bottom: 0 !important;
    }

    .contact-page .contact-form {
        order: 4;
        width: 100% !important;
        max-width: none !important;
        padding: 30px 22px !important;
        margin: 4px 0 2px !important;
    }

    .contact-page .contact-form input,
    .contact-page .contact-form select,
    .contact-page .contact-form textarea {
        padding: 14px 15px !important;
        font-size: 13px !important;
    }

    .contact-page .contact-form textarea {
        min-height: 150px !important;
    }

    .contact-page .contact-content > .contact-response-copy {
        order: 5;
        margin-top: 0 !important;
    }

    .contact-page .contact-content > .contact-details {
        order: 6;
        margin-top: 0 !important;
    }

    .contact-page .contact-details {
        gap: 10px !important;
    }

}
/* Prevent horizontal page movement on mobile */

@media (max-width: 768px) {

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

}

/* ==========================================================
   FINAL MOBILE NAVIGATION — NINE3 DESIGNS
   Desktop styles intentionally untouched.
========================================================== */
@media (max-width:768px) {
    html,body{width:100%;max-width:100%;overflow-x:hidden !important;}
    body.menu-open{overflow:hidden !important;}
    .site-header{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:75px !important;min-height:75px !important;z-index:11000 !important;overflow:visible !important;}
    .header-container{position:relative !important;display:flex !important;align-items:center !important;width:calc(100% - 30px) !important;max-width:100% !important;height:75px !important;min-height:75px !important;margin:0 auto !important;gap:12px !important;overflow:visible !important;}
    .logo{display:flex !important;align-items:center !important;flex:1 1 auto !important;min-width:0 !important;}
    .logo img{width:145px !important;max-width:100% !important;height:auto !important;}
    .header-container>.btn{display:none !important;}
    .mobile-toggle{display:flex !important;align-items:center !important;justify-content:center !important;flex-direction:column !important;flex:0 0 42px !important;width:42px !important;height:42px !important;padding:0 !important;margin-left:auto !important;border:0 !important;outline:0 !important;background:transparent !important;box-shadow:none !important;z-index:11002 !important;appearance:none !important;}
    .mobile-toggle span{display:block !important;width:27px !important;height:2.5px !important;margin:3px 0 !important;background:#FEF9F3 !important;border-radius:3px !important;transition:transform .25s ease,opacity .2s ease !important;}
    .mobile-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg) !important;} .mobile-toggle.active span:nth-child(2){opacity:0 !important;} .mobile-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg) !important;}
    .main-nav{display:block !important;position:fixed !important;top:75px !important;left:0 !important;width:100% !important;max-height:calc(100dvh - 75px) !important;margin:0 !important;padding:10px 15px 25px !important;background:#404A3B !important;border-top:1px solid rgba(254,249,243,.10) !important;box-shadow:0 18px 40px rgba(0,0,0,.18) !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateY(-8px) !important;overflow-x:hidden !important;overflow-y:auto !important;z-index:11001 !important;transition:opacity .2s ease,transform .2s ease,visibility .2s ease !important;}
    .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;width:100% !important;gap:0 !important;margin:0 !important;padding:0 !important;list-style:none !important;}
    .main-nav li{width:100% !important;margin:0 !important;padding:0 !important;border-bottom:1px solid rgba(254,249,243,.12) !important;}
    .main-nav li>a{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;min-height:58px !important;padding:16px 8px !important;color:#FEF9F3 !important;font-size:13px !important;font-weight:600 !important;letter-spacing:1.3px !important;line-height:1.4 !important;text-transform:uppercase !important;text-decoration:none !important;text-align:center !important;}
    .main-nav li>a::after{display:none !important;}
    .main-nav li>a:hover,.main-nav li>a:focus,.main-nav li>a.active{color:#C8A96A !important;}
    .sister-site-mobile{margin-top:14px !important;padding-top:14px !important;border-top:1px solid rgba(200,169,106,.35) !important;border-bottom:0 !important;}
    .main-nav .sister-site-mobile a{min-height:46px !important;background:#C8A96A !important;color:#404A3B !important;border:1px solid #C8A96A !important;border-radius:2px !important;font-size:11px !important;letter-spacing:1.1px !important;}
}
@media (max-width:390px){.header-container{width:calc(100% - 22px) !important;}.logo img{width:138px !important;}}