/* ==========================================================
   Nine3 Designs
   Components
========================================================== */

/* ---------- Cards ---------- */

.service-card,
.portfolio-card,
.contact-card{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:2.25rem;

    transition:.35s ease;

    backdrop-filter:blur(12px);

}

.service-card:hover,
.portfolio-card:hover,
.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.20);

    border-color:rgba(212,179,93,.45);

}

/* ---------- Service Icons ---------- */

.service-icon{

    width:72px;

    height:72px;

    margin-bottom:2rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#404A3B;

    color:#C8A96A;

    transition:.35s ease;

}

.service-icon svg{

    width:34px;

    height:34px;

}

.service-card:hover .service-icon{

    background:#C8A96A;

    color:#404A3B;

    transform:rotate(-5deg) scale(1.08);

}


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

.portfolio-card{

    overflow:hidden;

    padding:0;

}

.portfolio-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.45s;

}

.portfolio-card:hover img{

    transform:scale(1.05);

}

.portfolio-content{

    padding:2rem;

    background:#FEF9F3;

}

.portfolio-content h3{

    color:var(--primary);

}

.portfolio-content p{

    color:#666;

}

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

.contact-about img{
    width:160px !important;
    height:160px !important;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:50% !important;
}

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

.contact-form{

    background:#FEF9F3;

    color:#222;

    border-radius:24px;

    padding:5rem;

    box-shadow:var(--shadow-lg);

}

.form-group{

    margin-bottom:1.5rem;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;

}

label{

    display:block;

    margin-bottom:.6rem;

    color:var(--primary);

    font-weight:600;

}

input,
textarea,
select{

    width:100%;

    padding:15px 18px;

    border-radius:12px;

    border:1px solid #ddd;

    font-family:inherit;

    font-size:1rem;

    transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(212,179,93,.15);

}

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

.contact-card{

    margin-bottom:1.5rem;

}

.contact-card h3{

    color:var(--accent);

    margin-bottom:.75rem;

}

/* ---------- CTA ---------- */

.cta{

    text-align:center;

}

.cta h2{

    max-width:700px;

    margin:0 auto 1.5rem;

}

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

.site-footer{

    background:#18342d;

    padding:1rem 0 1rem;

}

.footer-logo{

    width:250;

    margin-bottom:0rem;

}

.site-footer h4{

    color:var(--accent);

    margin-bottom:1rem;

}

.site-footer a{

    color:rgba(255,255,255,.75);

}

.site-footer a:hover{

    color:var(--accent);

}

.footer-bottom p{

    color:rgba(255,255,255,.55);

    margin:0;

}
/*==================================================
PORTFOLIO PAGE
==================================================*/

.portfolio-intro{

    padding:90px 0;

    text-align:center;

    background:#FEF9F3;

}

.narrow{

    max-width:760px;

    margin:auto;

}

.case-study{

    padding:110px 0;

    background:#FEF9F3;

}

.case-study.alt{

    background:#F3F6F2;

}

.case-grid{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:80px;

    align-items:center;

}

.case-grid.reverse{

    grid-template-columns:1fr 1.2fr;

}

.case-images img{

    width:100%;

    border-radius:20px;

    display:block;

}

.case-gallery{

    display:grid;

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

    gap:15px;

    margin-top:15px;

}

.case-content h2{

    position:relative;

    display:inline-block;

    color:var(--primary);

    margin:20px 0 30px;

    padding-bottom:18px;


   

}

.case-content h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    background:var(--accent);

    transition:.35s ease;

}
.case-grid:hover .case-content h2::after{

    width:120px;

}
.case-content h2{

    transition:.35s ease;

}
.case-grid:hover h2{

    transform:translateX(8px);

}
.case-content p{

    margin-bottom:20px;

    line-height:1.8;

    color:#555;

}

.case-category{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

    font-weight:700;
    transition:.35s ease;
    

}


.project-services{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.project-services span{

    transition:.3s;

    padding:10px 18px;

    border-radius:50px;

    background:#404B3B;

    color:#FEF9F3;

    font-size:.85rem;

    }
    .project-services span:hover{

    background:var(--primary);

    color:#FEF9F3;

    transform:translateY(-4px);

}


/*==================================================
CLIENT LOGOS
==================================================*/

.clients{

    background:#FEF9F3;

    padding:25px 0;

}

.client-grid{

    display:grid;

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

    gap:20px;

    margin-top:30px;

    align-items:center;

    justify-items:center;

}

.client-grid img{

    width:100%;

    max-width:300px;

    height:auto;

    object-fit:contain;

    background:#fff;

    padding:15px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:all .3s ease;

}

.client-grid img:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}
.main-nav a.active{

    color:var(--accent);

    font-weight:700;

    position:relative;

}

.main-nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--accent);

}
/*==================================================
CONTACT PAGE
==================================================*/

.contact-section{

    padding:80px;

    background:#FEF9F3;

}

.contact-grid{

    display:grid;

    grid-template-columns:1.4fr .8fr;

    gap:70px;

    align-items:start;

}

/*==========================
FORM
==========================*/

.contact-form{

    background:#fff;

    padding:80px;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.contact-form h2{

    color:#FEF9F3;

    margin-bottom:45px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

    margin-bottom:20px;

    border:1px solid rgba(64,75,59,.15);

    border-radius:14px;

    background:#fff;

    font-family:inherit;

    font-size:1rem;

    transition:.3s ease;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(198,161,91,.15);

}

.contact-form button{

    width:100%;

    margin-top:10px;

}

.contact-about{

    background:#fff ;

    color:#404b3b ;

    padding:50px;

    border-radius:28px;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:0 20px 50px rgba(64,75,59,.18);

}

.hello-icon{

    font-size:3rem;

    margin-bottom:20px;

}

/*==================================
CONTACT ABOUT
==================================*/

.contact-about{

    background:#FEF9F3;

    color:#fff;

    padding:35px;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(64,75,59,.18);

    height:100%;

}

.contact-about .section-icon{

    width:50px;
    height:50px;

    margin:0 auto 10px;

}

.section-icon i{

    font-size:1.8rem;



}

.contact-about h2{

    color:#404B3B;

    margin:12px 0 25px;

}

.contact-about p{

    color:#404B3B;

    opacity:.92;

    line-height:1.9;

    margin-bottom:18px;



}
.contact-about h2{

    color:#404B3B;

}

.contact-about strong{

    color:var(--accent);

    font-weight:700;

}

.contact-about a{

    color:var(--accent);

    text-decoration:none;

    transition:.3s;

}

.contact-about a:hover{

    color:#404B3B;

}

.contact-details{

    margin:15px 0;

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.12);

}

.detail{

    margin-bottom:25px;

}

.detail h5{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:8px;

    font-size:.8rem;

}

.detail a{

    color:#404B3B;

    text-decoration:none;

}

.signature{

    margin-top:20px;

    padding-top:15px;

    border-top:1px solid rgba(255,255,255,.12);

    color:#404B3B;

    opacity:.9;

}



.signature span{

    display:block;

    margin-top:1px;

    font-family:'Allura', cursive !important;

    font-size:2.0rem;

    line-height:1;

    color:var(--accent);

    font-weight:400;

}

/*==================================
FAQ
==================================*/
.faq-section{

    background:#404B3B;

    padding:50px 0;


}

.faq-section .section-label{

    color:var(--accent);

}

.faq-section h2{

    color:#FEF9F3;

}

.faq-section .section-title p{

    color:rgba(254,249,243,.85);

}
.faq-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    max-width:1200px;

    margin:70px auto 0;

    align-items:start;

}

.faq-list details{

    background:#FEF9F3;

    border-radius:20px;

    overflow:hidden;

    border:none;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    transition:.35s ease;

}

.faq-list details:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.faq-list summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 30px;

    cursor:pointer;

    list-style:none;

    color:#404B3B;

    font-size:1.1rem;

    font-weight:700;

}
.faq-list summary::-webkit-details-marker{

    display:none;

}
.faq-list summary::after{

    content:"+";

    font-size:1.8rem;

    color:var(--accent);

    transition:.3s;


}
.faq-list details[open] summary::after{

    transform:rotate(45deg);

}
.faq-list details[open]{

    border-top:4px solid var(--accent);

}
.faq-list p{

    padding:0 30px 30px;

    line-height:1.8;

    color:#666;

}

/*==========================
WHY CHOOSE US
==========================*/

.why-contact{

    padding:70px 0;

    background:#404B3B;

}
.closing-message{

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.15);

    font-style:italic;

    color:#FEF9F3;

}
/* ---------- Contact Profile Image ---------- */

.profile-image{

    width:260px;
    height:260px;
    object-fit:cover;
    border-radius:50%;
    display:block;

    margin:-30px auto 35px;

}
/* =====================================
   WHY CHOOSE US SECTION
===================================== */

.why-section{

    background:#404B3B;
    padding:var(--space-xl) 0;

}


.why-section .section-title h2{

    color:#FEF9F3;

}


.why-section .section-title span{

    color:var(--accent);

}


.why-section .services-grid{

    gap:2rem;

}


.why-section .service-card{

    background:#FEF9F3;
    border:none;
    padding:2.25rem;

}


.why-section .service-card h3{

    color:#404B3B;

}


.why-section .service-card p{

    color:#555;

    margin-bottom:0;

}
/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:#333C30;
    color:#FEF9F3;
    padding:45px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:2rem;

    align-items:start;

}

.footer-brand{

    max-width:440px;

}

.footer-logo{

    width:350px;
    margin-bottom:1px;

}
.footer-email{

    margin:2px 0;

    font-weight:600;

}
.footer-brand .btn{

    margin-top:10px;

}
.site-footer h4{

    color:var(--accent);
    margin-bottom:10px;
    font-size:1.1rem;

}

.site-footer p{

    color:rgba(254,249,243,.75);
    line-height:1.8;
    margin-bottom:10px;

}

.site-footer ul{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.site-footer li{

    margin-bottom:14px;

}

.site-footer a{

    color:#FEF9F3;
    text-decoration:none;
    transition:var(--transition);

}

.site-footer a:hover{

    color:var(--accent);

}

/* ---------- Social Icons ---------- */

.footer-social{

    display:flex;
    gap:15px;
    margin:30px 0;

}

.footer-social a{

    width:48px;
    height:48px;

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

    border-radius:50%;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);

    color:#FEF9F3;
    font-size:1.15rem;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--accent);
    border-color:var(--accent);
    color:var(--primary);
    transform:translateY(-4px);

}

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

.footer-brand .btn{

    margin-top:10px;

}

/* ---------- Bottom ---------- */

.footer-bottom{

    margin-top:0px;
    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.12);

    text-align:center;

}

.footer-bottom p{

    margin:0;
    color:rgba(254,249,243,.6);
    font-size:.95rem;

}
.footer-brand .btn{

    margin-top:0px;

}
/* ==================================================
   ABOUT NINE3 — PREMIUM TWO COLUMN SECTION
================================================== */

.about-nine3 {
    padding: 105px 0;
    background: var(--ivory);
}

.about-nine3-grid {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;

    align-items: center;
}


/* ==================================================
   LEFT — WHY NINE3
================================================== */

.about-nine3-content {
    max-width: 520px;
}

.about-nine3-content .section-label {
    color: var(--gold);
    margin-bottom: 15px;
}

.about-nine3-content h2 {
    color: var(--green);

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.08;

    margin: 0 0 24px;
}

.about-nine3-content p {
    color: var(--text-light);

    max-width: 500px;

    font-size: 13px;
    line-height: 1.75;

    margin: 0 0 14px;
}


/* ==================================================
   FEATURE LIST
================================================== */

.about-nine3 .feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 13px 25px;

    margin: 30px 0 0;
    padding: 24px 0 0;

    border-top: 1px solid rgba(64, 74, 59, .14);

    list-style: none;
}

.about-nine3 .feature-list li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text);

    font-size: 12px;
    line-height: 1.5;
}

.about-nine3 .feature-list li span {
    color: var(--gold);
    font-size: 11px;
    flex-shrink: 0;
}


/* ==================================================
   RIGHT — IMAGE + BOX
================================================== */

.about-nine3-side {
    position: relative;
}

.about-nine3-image {
    width: 90%;
    margin-left: auto;

    aspect-ratio: 1.15 / 1;

    overflow: hidden;

    border: 1px solid rgba(64, 74, 59, .14);
}

.about-nine3-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.about-nine3-side:hover .about-nine3-image img {
    transform: scale(1.025);
}


/* ==================================================
   OVERLAPPING ABOUT BOX
================================================== */

.about-nine3-card-content {
    position: relative;

    width: 90%;

    margin: -55px 0 0 auto;

    padding: 32px 35px 36px;

    background: var(--cream, #F6F1EA);

    border: 1px solid rgba(64, 74, 59, .14);

    box-shadow:
        0 15px 40px rgba(43, 43, 43, .07);

    z-index: 3;
}


/* Gold detail */

.about-nine3-card-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 35px;

    width: 38px;
    height: 2px;

    background: var(--gold);
}


/* Label */

.about-nine3-card-content .section-label {
    color: var(--gold);

    margin-bottom: 13px;
}


/* Heading */

.about-nine3-card-content h2 {
    color: var(--green);

    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.1;

    margin: 0 0 18px;
}


/* Text */

.about-nine3-card-content p {
    color: var(--text-light);

    font-size: 12.5px;
    line-height: 1.7;

    margin: 0 0 12px;
}


/* Button */

.about-nine3-card-content .btn-primary {
    min-width: 155px;

    margin-top: 9px;

    background: var(--gold);
    border: 1px solid var(--gold);

    color: var(--ivory);
}

.about-nine3-card-content .btn-primary:hover {
    background: transparent;

    color: var(--gold);

    transform: translateY(-2px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .about-nine3-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-nine3-content {
        max-width: 650px;
    }

    .about-nine3-image,
    .about-nine3-card-content {
        width: 90%;
    }

}


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

@media (max-width: 600px) {

    .about-nine3 {
        padding: 75px 0;
    }

    .about-nine3-grid {
        width: 90%;
        gap: 50px;
    }

    .about-nine3 .feature-list {
        grid-template-columns: 1fr;
    }

    .about-nine3-image,
    .about-nine3-card-content {
        width: 100%;
    }

    .about-nine3-card-content {
        margin-top: -32px;
        padding: 28px 25px 32px;
    }

}
/* ==================================================
   NINE3 ABOUT — FINAL PREMIUM OVERRIDE
================================================== */

.about-nine3.about-nine3 {
    padding: 105px 0 !important;
    background: var(--ivory) !important;
    color: var(--text) !important;
}

.about-nine3 .about-nine3-grid {
    width: min(1120px, 90%) !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 70px !important;

    align-items: center !important;
}


/* ==================================================
   LEFT SIDE
================================================== */

.about-nine3 .about-nine3-content {
    max-width: 520px !important;
}

.about-nine3 .about-nine3-content .section-label {
    color: var(--gold) !important;
}

.about-nine3 .about-nine3-content h2 {
    color: var(--green) !important;
    font-size: clamp(38px, 4vw, 52px) !important;
    line-height: 1.08 !important;
    margin-bottom: 25px !important;
}

.about-nine3 .about-nine3-content p {
    color: var(--text-light) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}


/* ==================================================
   FEATURE LIST
================================================== */

.about-nine3 .feature-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 14px 30px !important;

    margin: 30px 0 0 !important;
    padding: 25px 0 0 !important;

    border-top: 1px solid rgba(64, 74, 59, .14) !important;

    list-style: none !important;
}

.about-nine3 .feature-list li {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    color: var(--text) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

.about-nine3 .feature-list li span {
    color: var(--gold) !important;
    font-size: 12px !important;
}


/* ==================================================
   RIGHT IMAGE
================================================== */

.about-nine3 .about-nine3-side {
    position: relative !important;
}

.about-nine3 .about-nine3-image {
    width: 90% !important;
    margin-left: auto !important;

    aspect-ratio: 1.2 / 1 !important;

    overflow: hidden !important;

    border: 1px solid rgba(64, 74, 59, .13) !important;
}

.about-nine3 .about-nine3-image img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    transition: transform .7s ease !important;
}

.about-nine3 .about-nine3-side:hover .about-nine3-image img {
    transform: scale(1.02) !important;
}


/* ==================================================
   OVERLAPPING CREAM CARD
================================================== */

.about-nine3 .about-nine3-card-content {
    position: relative !important;

    width: 90% !important;

    margin: -55px 0 0 auto !important;

    padding: 34px 38px 38px !important;

    background: var(--cream, #F6F1EA) !important;

    border: 1px solid rgba(64, 74, 59, .13) !important;

    box-shadow: 0 15px 40px rgba(43, 43, 43, .08) !important;

    z-index: 3 !important;
}


/* Gold accent line */

.about-nine3 .about-nine3-card-content::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 38px !important;

    width: 40px !important;
    height: 2px !important;

    background: var(--gold) !important;
}


/* Card label */

.about-nine3 .about-nine3-card-content .section-label {
    color: var(--gold) !important;

    margin-bottom: 14px !important;
}


/* Card heading */

.about-nine3 .about-nine3-card-content h2 {
    color: var(--green) !important;

    font-size: clamp(30px, 3vw, 42px) !important;

    line-height: 1.1 !important;

    margin: 0 0 20px !important;
}


/* Card paragraphs */

.about-nine3 .about-nine3-card-content p {
    color: var(--text-light) !important;

    font-size: 13px !important;

    line-height: 1.7 !important;

    margin-bottom: 13px !important;
}


/* ==================================================
   LEARN MORE BUTTON
================================================== */

.about-nine3 .about-nine3-card-content .btn-primary {
    display: inline-flex !important;

    min-width: 150px !important;

    margin-top: 10px !important;

    padding: 14px 25px !important;

    background: var(--gold) !important;

    border: 1px solid var(--gold) !important;

    color: var(--ivory) !important;
}

.about-nine3 .about-nine3-card-content .btn-primary:hover {
    background: transparent !important;

    border-color: var(--gold) !important;

    color: var(--gold) !important;

    transform: translateY(-2px) !important;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .about-nine3 .about-nine3-grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }

    .about-nine3 .about-nine3-content {
        max-width: 650px !important;
    }

    .about-nine3 .about-nine3-image,
    .about-nine3 .about-nine3-card-content {
        width: 90% !important;
    }

}


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

@media (max-width: 600px) {

    .about-nine3.about-nine3 {
        padding: 75px 0 !important;
    }

    .about-nine3 .about-nine3-grid {
        width: 90% !important;
        gap: 50px !important;
    }

    .about-nine3 .feature-list {
        grid-template-columns: 1fr !important;
    }

    .about-nine3 .about-nine3-image,
    .about-nine3 .about-nine3-card-content {
        width: 100% !important;
    }

    .about-nine3 .about-nine3-card-content {
        margin-top: -32px !important;
        padding: 28px 25px 32px !important;
    }

}
/* ==================================================
   ABOUT NINE3 — LEFT COLUMN FIX
================================================== */

.about-nine3 {
    background: var(--ivory) !important;
    color: var(--text) !important;
}

.about-nine3 .about-nine3-content {
    background: transparent !important;
    color: var(--text) !important;
}

.about-nine3 .about-nine3-content .section-label {
    color: var(--gold) !important;
}

.about-nine3 .about-nine3-content h2 {
    color: var(--green) !important;
}

.about-nine3 .about-nine3-content p {
    color: var(--text-light) !important;
}

.about-nine3 .feature-list {
    background: transparent !important;
    border-top-color: rgba(64, 74, 59, 0.14) !important;
}

.about-nine3 .feature-list li {
    color: var(--text) !important;
}

.about-nine3 .feature-list li span {
    color: var(--gold) !important;
}.about-nine3 .about-nine3-grid,
.about-nine3 .about-nine3-content {
    background: transparent !important;
}
/* ==================================================
   NINE3 ABOUT — FORCE IVORY BACKGROUND
================================================== */

body section.about-nine3 {
    background: #FEF9F3 !important;
    background-color: #FEF9F3 !important;
    color: #2B2B2B !important;
}


/* Make sure nothing is sitting over the background */

body section.about-nine3::before,
body section.about-nine3::after {
    background: none !important;
}


/* LEFT COLUMN */

body section.about-nine3 .about-nine3-content {
    background: transparent !important;
    color: #2B2B2B !important;
}

body section.about-nine3 .about-nine3-content .section-label {
    color: #C8A96A !important;
}

body section.about-nine3 .about-nine3-content h2 {
    color: #404A3B !important;
}

body section.about-nine3 .about-nine3-content p {
    color: #666666 !important;
}


/* FEATURE LIST */

body section.about-nine3 .feature-list {
    background: transparent !important;
    border-top: 1px solid rgba(64, 74, 59, .14) !important;
}

body section.about-nine3 .feature-list li {
    color: #333333 !important;
}

body section.about-nine3 .feature-list li span {
    color: #C8A96A !important;
}


/* RIGHT SIDE */

body section.about-nine3 .about-nine3-side {
    background: transparent !important;
}

body section.about-nine3 .about-nine3-image {
    background: transparent !important;
}


/* CREAM CARD */

body section.about-nine3 .about-nine3-card-content {
    background: #F6F1EA !important;
    color: #333333 !important;
}

body section.about-nine3 .about-nine3-card-content .section-label {
    color: #C8A96A !important;
}

body section.about-nine3 .about-nine3-card-content h2 {
    color: #404A3B !important;
}

body section.about-nine3 .about-nine3-card-content p {
    color: #666666 !important;
}


/* BUTTON */

body section.about-nine3 .about-nine3-card-content .btn-primary {
    background: #C8A96A !important;
    border-color: #C8A96A !important;
    color: #FEF9F3 !important;
}

body section.about-nine3 .about-nine3-card-content .btn-primary:hover {
    background: transparent !important;
    color: #C8A96A !important;
}
/* ==================================================
   ABOUT NINE3 — FINAL COLOUR RESET
================================================== */

.about-nine3 {
    background: #FEF9F3 !important;
}

.about-nine3-grid {
    background: transparent !important;
}

.about-nine3-content {
    background: transparent !important;
}

.about-nine3-content .section-label {
    color: #C8A96A !important;
}

.about-nine3-content h2 {
    color: #404A3B !important;
}

.about-nine3-content p {
    color: #666666 !important;
}

.about-nine3 .feature-list {
    background: transparent !important;
}

.about-nine3 .feature-list li {
    color: #333333 !important;
}

.about-nine3 .feature-list li span {
    color: #C8A96A !important;
}
/* ==========================================================
   NINE3 DESIGNS — OUR WORK
   Premium Editorial Portfolio Section
========================================================== */

.portfolio {
    padding: 115px 0 125px;
    background: #F6F1EA !important;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.portfolio .section-title {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.portfolio .section-title span {
    display: block;
    margin-bottom: 14px;

    color: #C8A96A;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.portfolio .section-title h2 {
    margin: 0 0 18px;

    color: #404A3B;

    font-family: var(--font-heading);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: .98;
}

.portfolio .section-title p {
    max-width: 560px;
    margin: 0 auto;

    color: #666666;

    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================================
   PORTFOLIO GRID
========================================================== */

.portfolio-grid {
    display: grid;

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

    gap: 26px;

    max-width: 1120px;
    margin: 0 auto;
}


/* ==========================================================
   PORTFOLIO CARD
========================================================== */

.portfolio-card {
    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 0 !important;

    background: #FEF9F3 !important;

    border: 1px solid rgba(64, 74, 59, .12) !important;

    border-radius: 0 !important;

    box-shadow: 0 10px 30px rgba(43, 43, 43, .035);

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;
}


/* Gold detail line */

.portfolio-card::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #C8A96A;

    transform: translateX(-50%);

    transition: width .55s ease;
}

.portfolio-card:hover::after {
    width: 45px;
}


.portfolio-card:hover {
    transform: translateY(-7px);

    border-color: rgba(200, 169, 106, .45) !important;

    box-shadow:
        0 22px 50px rgba(43, 43, 43, .09);
}


/* ==========================================================
   IMAGE
========================================================== */

.portfolio-card > img {
    width: 100%;
    height: 315px;

    display: block;

    object-fit: cover;

    transition: transform .8s cubic-bezier(.2,.65,.25,1);
}

.portfolio-card:hover > img {
    transform: scale(1.035);
}


/* ==========================================================
   CONTENT
========================================================== */

.portfolio-content {
    position: relative;

    flex: 1;

    padding: 28px 30px 34px !important;

    background: #FEF9F3 !important;
}


/* Category */

.portfolio-content .case-category {
    display: block;

    margin-bottom: 12px;

    color: #C8A96A !important;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* Project title */

.portfolio-content h3 {
    margin: 0 0 12px;

    color: #404A3B !important;

    font-family: var(--font-heading);

    font-size: 25px;
    font-weight: 500;

    line-height: 1.15;
}


/* Description */

.portfolio-content p {
    max-width: 330px;

    margin: 0;

    color: #666666 !important;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   VIEW PORTFOLIO BUTTON
========================================================== */

.portfolio .section-button {
    margin-top: 55px;

    text-align: center;
}

.portfolio .section-button .btn {
    min-width: 185px;

    padding: 14px 25px;

    background: #404A3B;

    border: 1px solid #404A3B;

    color: #FEF9F3;

    transition:
        background .45s ease,
        color .45s ease,
        border-color .45s ease,
        transform .45s ease;
}

.portfolio .section-button .btn:hover {
    background: transparent;

    border-color: #C8A96A;

    color: #C8A96A;

    transform: translateY(-3px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .portfolio {
        padding: 90px 0 100px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr 1fr;

        max-width: 760px;
    }

    .portfolio-card:last-child {
        grid-column: 1 / -1;

        max-width: calc(50% - 13px);

        width: 100%;
        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .portfolio {
        padding: 75px 0 85px;
    }

    .portfolio .section-title {
        margin-bottom: 40px;
    }

    .portfolio .section-title h2 {
        font-size: 42px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .portfolio-card:last-child {
        grid-column: auto;

        max-width: none;
    }

    .portfolio-card > img {
        height: 270px;
    }

    .portfolio-content {
        padding: 25px 25px 30px !important;
    }

    .portfolio-content h3 {
        font-size: 23px;
    }

    .portfolio .section-button {
        margin-top: 40px;
    }

}
/* ==========================================================
   NINE3 DESIGNS — SERVICES PAGE
   Premium Editorial Styling
========================================================== */


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero {
    padding: 145px 0 105px;
    background: #FEF9F3 !important;
    text-align: center;
}

.page-hero .container {
    max-width: 900px;
}

.page-hero .section-label {
    margin-bottom: 18px;
    color: #C8A96A !important;
}

.page-hero h1 {
    margin: 0 auto 25px;
    color: #404A3B !important;
    font-size: clamp(46px, 6vw, 72px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.025em;
}

.page-hero p {
    max-width: 540px;
    margin: 0 auto;
    color: #666666 !important;
    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================================
   SERVICES INTRO
========================================================== */

.services-intro {
    padding: 105px 0;
    background: #F6F1EA !important;
}

.services-intro-grid {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;

    align-items: end;
}

.services-intro-grid h2 {
    margin: 0;
    color: #404A3B !important;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 500;
    line-height: 1.04;
}

.services-intro-grid > div:last-child {
    max-width: 500px;
}

.services-intro-grid p {
    margin: 0 0 18px;
    color: #666666 !important;
    font-size: 14px;
    line-height: 1.8;
}

.services-intro-grid p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   GENERAL SERVICE SECTION
========================================================== */

.service-section {
    padding: 115px 0;
    background: #FEF9F3 !important;
}

.service-section.alt {
    background: #F6F1EA !important;
}

.service-feature {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;

    align-items: center;
}

.service-feature-heading h2,
.service-heading h2 {
    margin: 0;
    color: #404A3B !important;
    font-size: clamp(40px, 4.5vw, 58px);
    font-weight: 500;
    line-height: 1.02;
}

.service-feature-content {
    max-width: 560px;
}

.service-feature-content p {
    margin: 0 0 18px;
    color: #666666 !important;
    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================================
   TEXT LINK
========================================================== */

.collection-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 18px;
    padding-bottom: 7px;

    color: #404A3B !important;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    text-decoration: none;
}

.collection-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 28px;
    height: 1px;

    background: #C8A96A;

    transition: width .5s ease;
}

.collection-link:hover::after {
    width: 100%;
}

.collection-link span {
    color: #C8A96A;
    transition: transform .4s ease;
}

.collection-link:hover span {
    transform: translateX(4px);
}


/* ==========================================================
   BRANDING HEADING
========================================================== */

.service-heading {
    max-width: 680px;
    margin: 0 auto 65px;
    text-align: center;
}

.service-heading .section-label {
    margin-bottom: 16px;
}

.service-heading h2 {
    margin-bottom: 22px;
}

.service-heading > p {
    max-width: 560px;
    margin: 0 auto;

    color: #666666 !important;
    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================================
   PRICING GRID
========================================================== */

.pricing-grid {
    width: min(1160px, 92%);
    margin: 0 auto;

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

    align-items: stretch;
}

/* ==========================================================
   PRICING CARDS — NINE3 DESIGNS
========================================================== */

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 680px;

    padding: 38px 34px 32px;

    background: #FEF9F3 !important;

    border: 1px solid rgba(64, 74, 59, .13);
    border-radius: 18px;

    box-shadow: 0 12px 35px rgba(43, 43, 43, .035);

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.pricing-card:hover {
    transform: translateY(-6px);

    border-color: rgba(200, 169, 106, .55);

    box-shadow:
        0 22px 45px rgba(43, 43, 43, .08);
}


/* ----------------------------------------------------------
   SIGNATURE / RECOMMENDED CARD
---------------------------------------------------------- */

.pricing-card.featured {
    border-color: #C8A96A;

    box-shadow:
        0 18px 45px rgba(43, 43, 43, .08);
}


/* Small gold accent at top */

.pricing-card.featured::before {
    content: "";

    position: absolute;

    top: 0;
    left: 34px;

    width: 42px;
    height: 2px;

    background: #C8A96A;
}


/* ----------------------------------------------------------
   MOST POPULAR BADGE
---------------------------------------------------------- */




/* Remove any old ribbon/triangle */

.pricing-badge::before,
.pricing-badge::after {

    content: none !important;

    display: none !important;
}


/* ----------------------------------------------------------
   EYEBROW
---------------------------------------------------------- */

.pricing-eyebrow {

    display: block;

    margin-bottom: 20px;

    color: #C8A96A !important;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1.5;

    text-transform: uppercase;
}


/* Icons */

.pricing-eyebrow i {

    margin-right: 6px;

    color: #C8A96A !important;

    font-size: 10px;
}


/* ----------------------------------------------------------
   CARD HEADING
---------------------------------------------------------- */

.pricing-card h3 {

    margin: 0 0 17px;

    color: #404A3B !important;

    font-size: 29px;

    font-weight: 500;

    line-height: 1.08;
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.pricing-description {

    min-height: 74px;

    margin: 0;

    color: #666666 !important;

    font-size: 12px;

    line-height: 1.75;
}


/* ----------------------------------------------------------
   DIVIDER
---------------------------------------------------------- */

.pricing-divider {

    width: 100%;
    height: 1px;

    margin: 27px 0 25px;

    background: rgba(64, 74, 59, .12);
}


/* ----------------------------------------------------------
   WHAT'S INCLUDED
---------------------------------------------------------- */
.pricing-card h4 {
    margin: 0 0 20px;

    color: #404A3B !important;

    font-size: 13px !important;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* ----------------------------------------------------------
   FEATURES
---------------------------------------------------------- */

.pricing-card ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.pricing-card li {
    position: relative;

    padding-left: 17px;

    color: #555555 !important;

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   BOTTOM SECTION
   Keeps price + CTA at the bottom of every card
========================================================== */

.pricing-footer {

    margin-top: auto;

    padding-top: 28px;
}


/* ----------------------------------------------------------
   PRICE
---------------------------------------------------------- */

.pricing-footer .price {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 15px;

    margin: 0 0 16px;

    padding-top: 18px;

    border-top: 1px solid rgba(64, 74, 59, .12);

    color: #404A3B !important;

    font-size: 28px !important;

    font-weight: 500;

    line-height: 1;
}


.pricing-footer .price span {

    display: block;

    margin: 0;

    color: #777777 !important;

    font-size: 11px !important;

    font-weight: 500;

    letter-spacing: 1.2px;

    line-height: 1.3;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.pricing-footer .btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 13px 18px;

    font-size: 10px;

    letter-spacing: 1.1px;
}


/* Essential + Premium */

.pricing-card .btn-outline {

    background: transparent !important;

    border: 1px solid #C8A96A !important;

    color: #C8A96A !important;
}


.pricing-card .btn-outline:hover {

    background: #C8A96A !important;

    border-color: #C8A96A !important;

    color: #FEF9F3 !important;
}


/* ----------------------------------------------------------
   SIGNATURE BUTTON
---------------------------------------------------------- */

.pricing-card.featured .btn-primary {

    background: #C8A96A !important;

    border: 1px solid #C8A96A !important;

    color: #404A3B !important;
}


.pricing-card.featured .btn-primary:hover {

    background: transparent !important;

    border-color: #C8A96A !important;

    color: #C8A96A !important;
}


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

@media (max-width: 900px) {

    .pricing-card {
        min-height: 0;

        height: auto;
    }

    .pricing-footer {
        margin-top: 30px;
    }

}


@media (max-width: 600px) {

    .pricing-card {
        padding: 32px 25px 28px;
    }

    .pricing-card h3 {
        font-size: 27px;
    }

    .pricing-footer .price {
        font-size: 25px !important;
    }


}


/* ==========================================================
   WHY NINE3
========================================================== */

.why-nine3 {
    padding: 115px 0 110px;

    background: #404A3B !important;
}

.why-nine3-grid {
    width: min(1120px, 90%);
    margin: 0 auto 65px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;

    align-items: end;
}

.why-nine3-grid .section-label {
    color: #C8A96A !important;
}

.why-nine3-grid h2 {
    margin: 0;

    color: #FEF9F3 !important;

    font-size: clamp(40px, 4.5vw, 57px);
    line-height: 1.02;
}

.why-nine3-grid > div:last-child {
    max-width: 520px;
}

.why-nine3-grid p {
    margin: 0 0 18px;

    color: rgba(254, 249, 243, .78) !important;

    font-size: 13px;
    line-height: 1.8;
}


/* ==========================================================
   WHY NINE3 LIST
========================================================== */

.why-nine3-list {
    width: min(1120px, 90%);
    margin: 0 auto;

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

    border-top: 1px solid rgba(254, 249, 243, .15);
}

.why-nine3-item {
    padding: 30px 25px 10px 0;

    border-bottom: 1px solid rgba(254, 249, 243, .15);
}

.why-nine3-item:nth-child(3n + 2),
.why-nine3-item:nth-child(3n + 3) {
    padding-left: 25px;

    border-left: 1px solid rgba(254, 249, 243, .15);
}

.why-nine3-item span {
    display: block;

    margin-bottom: 13px;

    color: #C8A96A;

    font-size: 11px;
}

.why-nine3-item h3 {
    margin: 0 0 8px;

    color: #FEF9F3 !important;

    font-size: 16px;
    font-weight: 500;
}

.why-nine3-item p {
    margin: 0;

    color: rgba(254, 249, 243, .62) !important;

    font-size: 11px;
    line-height: 1.65;
}


/* ==========================================================
   CREDENTIALS
========================================================== */

.nine3-credentials {
    width: min(1120px, 90%);
    margin: 55px auto 0;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 45px;
}

.nine3-credentials span {
    color: rgba(254, 249, 243, .58);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.nine3-credentials span::before {
    content: "✦";

    margin-right: 9px;

    color: #C8A96A;
}


/* ==========================================================
   PRINT / MARKETING LIST
========================================================== */

.service-list-grid {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid rgba(64, 74, 59, .14);
}

.service-list-item {
    position: relative;

    display: grid;
    grid-template-columns: 45px 1fr auto;
    gap: 20px;

    align-items: center;

    padding: 25px 15px 25px 0;

    border-bottom: 1px solid rgba(64, 74, 59, .14);
}

.service-list-item:nth-child(even) {
    padding-left: 30px;

    border-left: 1px solid rgba(64, 74, 59, .14);
}

.service-list-item > span {
    color: #C8A96A;

    font-size: 10px;
    letter-spacing: 1px;
}

.service-list-item h3 {
    margin: 0;

    color: #404A3B !important;

    font-size: 15px;
    font-weight: 500;
}

.service-list-item p {
    margin: 0;

    color: #777777 !important;

    font-size: 11px;
    white-space: nowrap;
}


/* ==========================================================
   EXTRAS
========================================================== */

.extras-section {
    padding: 110px 0;

    background: #F6F1EA !important;
}

.extras-heading {
    width: min(1120px, 90%);
    margin: 0 auto 50px;
}

.extras-heading h2 {
    margin: 0;

    color: #404A3B !important;

    font-size: clamp(40px, 4vw, 54px);
    line-height: 1.03;
}

.extras-table {
    width: min(900px, 90%);
    margin: 0 auto;

    border-top: 1px solid rgba(64, 74, 59, .15);
}

.extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding: 19px 5px;

    border-bottom: 1px solid rgba(64, 74, 59, .15);
}

.extra-row span {
    color: #555555;

    font-size: 12px;
}

.extra-row strong {
    color: #404A3B;

    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.services-page .cta,
.cta {
    padding: 120px 0;

    background: #FEF9F3 !important;

    text-align: center;
}

.cta .container {
    max-width: 750px;
}

.cta .section-label {
    color: #C8A96A !important;
}

.cta h2 {
    margin: 0 0 22px;

    color: #404A3B !important;

    font-size: clamp(42px, 5vw, 62px);
    line-height: 1;
}

.cta p {
    max-width: 510px;
    margin: 0 auto 30px;

    color: #666666 !important;

    font-size: 13px;
    line-height: 1.8;
}

.cta .btn {
    min-width: 205px;

    background: #404A3B;
    border-color: #404A3B;

    color: #FEF9F3;
}

.cta .btn:hover {
    background: transparent;

    border-color: #C8A96A;

    color: #C8A96A;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    .page-hero {
        padding: 120px 0 85px;
    }

    .services-intro-grid,
    .service-feature,
    .why-nine3-grid {
        gap: 55px;
    }

    .pricing-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 760px;
    }

    .pricing-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 10px);
        width: 100%;
        margin: 0 auto;
    }

    .why-nine3-list {
        grid-template-columns: 1fr 1fr;
    }

    .why-nine3-item:nth-child(3n + 2),
    .why-nine3-item:nth-child(3n + 3) {
        padding-left: 0;
        border-left: 0;
    }

    .why-nine3-item:nth-child(even) {
        padding-left: 25px;
        border-left: 1px solid rgba(254, 249, 243, .15);
    }

    .service-list-grid {
        grid-template-columns: 1fr;
    }

    .service-list-item:nth-child(even) {
        padding-left: 0;
        border-left: 0;
    }

}


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

@media (max-width: 650px) {

    .page-hero {
        padding: 95px 0 75px;
    }

    .page-hero h1 {
        font-size: 44px;
    }

    .services-intro,
    .service-section,
    .why-nine3,
    .extras-section {
        padding: 75px 0;
    }

    .services-intro-grid,
    .service-feature,
    .why-nine3-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .services-intro-grid h2,
    .service-feature-heading h2,
    .service-heading h2 {
        font-size: 40px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        width: 90%;
    }

    .pricing-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .pricing-card {
        padding: 32px 26px;
    }

    .pricing-card h3 {
        font-size: 27px;
    }

    .pricing-description {
        min-height: auto;
    }

    .why-nine3-grid h2 {
        font-size: 40px;
    }

    .why-nine3-list {
        grid-template-columns: 1fr;
    }

    .why-nine3-item,
    .why-nine3-item:nth-child(even) {
        padding: 25px 0;

        border-left: 0;
    }

    .why-nine3-item:first-child {
        padding-top: 30px;
    }

    .nine3-credentials {
        align-items: center;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .service-list-grid {
        width: 90%;
    }

    .service-list-item {
        grid-template-columns: 35px 1fr;
        gap: 12px;
    }

    .service-list-item p {
        grid-column: 2;
        margin-top: -7px;
    }

    .extra-row {
        align-items: flex-start;
    }

    .extra-row span {
        max-width: 70%;
    }

    .cta {
        padding: 80px 0;
    }

    .cta h2 {
        font-size: 43px;
    }

}
/* ==========================================================
   NINE3 SERVICES — FINAL REFINEMENT
   Interactive editorial sections
========================================================== */


/* ==========================================================
   TIGHTER SPACE BELOW NAV
========================================================== */

/* Pull the page hero closer to the navigation */

.page-hero {
    padding-top: 95px !important;
    padding-bottom: 75px !important;
}

.page-hero h1 {
    font-size: clamp(40px, 4.5vw, 58px) !important;
    line-height: 1 !important;
}

.page-hero p {
    font-size: 13px !important;
}


/* Keep headings across Services consistent */

.services-intro-grid h2,
.service-feature-heading h2,
.service-heading h2,
.why-nine3-grid h2,
.extras-heading h2,
.cta h2 {
    font-size: clamp(36px, 4vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.015em;
}


/* Smaller supporting text */

.services-intro-grid p,
.service-feature-content p,
.service-heading > p,
.why-nine3-grid p,
.service-list-item p,
.extra-row span,
.cta p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
}


/* ==========================================================
   WHY INVEST IN NINE3
========================================================== */

.why-nine3 {
    padding: 90px 0 95px !important;
}

.why-nine3-grid {
    margin-bottom: 48px !important;
}


/* Interactive feature grid */

.why-nine3-list {
    border-top: 1px solid rgba(254, 249, 243, .14);
    border-bottom: 0;
}

.why-nine3-item {
    position: relative;

    min-height: 155px;

    padding: 27px 28px 27px 0 !important;

    border-bottom: 1px solid rgba(254, 249, 243, .14) !important;

    transition:
        background .45s ease,
        padding .45s ease;
}


/* Dividers */

.why-nine3-item:nth-child(3n + 2),
.why-nine3-item:nth-child(3n + 3) {
    padding-left: 28px !important;

    border-left: 1px solid rgba(254, 249, 243, .14) !important;
}


/* Gold marker */

.why-nine3-item span {
    position: relative;

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

    width: 25px;
    height: 25px;

    margin-bottom: 16px;

    color: #C8A96A !important;

    font-size: 9px;

    border: 1px solid rgba(200, 169, 106, .45);

    transition:
        transform .45s ease,
        background .45s ease,
        color .45s ease;
}


/* Heading */

.why-nine3-item h3 {
    margin-bottom: 7px !important;

    color: #FEF9F3 !important;

    font-family: var(--font-heading) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}


/* Description */

.why-nine3-item p {
    max-width: 250px;

    color: rgba(254, 249, 243, .62) !important;

    font-size: 11px !important;
    line-height: 1.65 !important;
}


/* Hover */

.why-nine3-item:hover {
    padding-top: 23px !important;
    padding-bottom: 31px !important;

    background: rgba(254, 249, 243, .035);
}

.why-nine3-item:hover span {
    transform: rotate(45deg);

    background: #C8A96A;

    color: #404A3B !important;
}


/* ==========================================================
   PRINT & MARKETING
========================================================== */

.service-section:not(.alt) {
    padding: 90px 0 !important;
}


/* Heading becomes more editorial */

.service-section:not(.alt) .service-heading {
    max-width: 700px;

    margin-bottom: 48px;

    text-align: left;
}

.service-section:not(.alt) .service-heading h2 {
    margin-bottom: 16px;
}


/* Interactive list */

.service-list-grid {
    width: min(1120px, 90%);

    border-top: 1px solid rgba(64, 74, 59, .15);
}


/* Individual item */

.service-list-item {
    position: relative;

    min-height: 85px;

    display: grid;
    grid-template-columns: 45px 1fr auto;

    padding: 22px 20px 22px 0 !important;

    overflow: hidden;

    transition:
        background .45s ease,
        padding .45s ease;
}


/* Gold sliding accent */

.service-list-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #C8A96A;

    transition: width .55s cubic-bezier(.2,.65,.25,1);
}

.service-list-item:hover::before {
    width: 42px;
}


/* Number */

.service-list-item > span {
    color: #C8A96A !important;

    font-size: 9px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
}


/* Title */

.service-list-item h3 {
    color: #404A3B !important;

    font-family: var(--font-heading) !important;

    font-size: 15px !important;
    font-weight: 500 !important;

    transition: transform .45s ease;
}


/* Price */

.service-list-item p {
    color: #777777 !important;

    font-size: 10px !important;

    transition: color .45s ease;
}


/* Hover */

.service-list-item:hover {
    padding-left: 10px !important;

    background: rgba(200, 169, 106, .035);
}

.service-list-item:hover h3 {
    transform: translateX(5px);
}

.service-list-item:hover p {
    color: #C8A96A !important;
}


/* ==========================================================
   EXTRA SERVICES — MORE COMPACT
========================================================== */

.extras-section {
    padding: 85px 0 !important;
}

.extras-heading {
    margin-bottom: 38px !important;
}

.extras-heading h2 {
    font-size: clamp(35px, 3.5vw, 48px) !important;
}

.extra-row {
    padding: 16px 5px !important;

    transition:
        padding .4s ease,
        background .4s ease;
}

.extra-row:hover {
    padding-left: 12px !important;
    padding-right: 12px !important;

    background: rgba(200, 169, 106, .045);
}

.extra-row span {
    font-size: 11px !important;
}

.extra-row strong {
    color: #404A3B !important;

    font-size: 11px !important;
}


/* ==========================================================
   SIGNATURE PACKAGE — KEEP IT REFINED
========================================================== */

.pricing-card h3 {
    font-size: 26px !important;
    line-height: 1.1 !important;
}

.pricing-card li {
    font-size: 11px !important;
}

.price {
    font-size: 32px !important;
}


/* ==========================================================
   CTA — SMALLER & MORE PREMIUM
========================================================== */

.cta {
    padding: 90px 0 !important;
}

.cta h2 {
    font-size: clamp(38px, 4vw, 54px) !important;
}

.cta p {
    max-width: 470px;
}


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

@media (max-width: 650px) {

    .page-hero {
        padding-top: 70px !important;
        padding-bottom: 60px !important;
    }

    .page-hero h1 {
        font-size: 40px !important;
    }

    .services-intro,
    .service-section,
    .why-nine3,
    .extras-section {
        padding-top: 65px !important;
        padding-bottom: 65px !important;
    }

    .services-intro-grid h2,
    .service-feature-heading h2,
    .service-heading h2,
    .why-nine3-grid h2,
    .extras-heading h2,
    .cta h2 {
        font-size: 37px !important;
    }

    .why-nine3-item,
    .why-nine3-item:nth-child(even) {
        min-height: auto;

        padding: 24px 0 !important;

        border-left: 0 !important;
    }

    .why-nine3-item:hover {
        padding-left: 8px !important;
    }

    .service-list-item {
        min-height: 75px;
    }

}
/* Signature Package — Gold CTA */

.pricing-card.featured .btn-primary {
    background: #C8A96A !important;
    border-color: #C8A96A !important;
    color: #FEF9F3 !important;
}

.pricing-card.featured .btn-primary:hover {
    background: transparent !important;
    border-color: #C8A96A !important;
    color: #C8A96A !important;
}
/* ==========================================================
   OUR SERVICES — EDITORIAL REDESIGN
========================================================== */

.services-intro {
    padding: 78px 0 70px !important;
    background: #FEF9F3 !important;
}


/* Intro */

.services-intro-grid {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 85px;

    align-items: end;
}

.services-intro-grid h2 {
    margin: 0;

    color: #404A3B !important;

    font-family: var(--font-heading) !important;
    font-size: clamp(36px, 3.8vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.04 !important;
}

.services-intro-grid > div:last-child {
    max-width: 530px;
}

.services-intro-grid p {
    margin: 0 0 15px;

    color: #666666 !important;

    font-size: 12.5px !important;
    line-height: 1.8 !important;
}

.services-intro-grid p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   WEBSITE DESIGN — FEATURE PANEL
========================================================== */

.service-section {
    padding: 78px 0 !important;

    background: #F6F1EA !important;
}

.service-feature {
    width: min(1120px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0;

    background: #FEF9F3;

    border: 1px solid rgba(64, 74, 59, .13);
}


/* Left side */

.service-feature-heading {
    position: relative;

    padding: 58px 55px;

    border-right: 1px solid rgba(64, 74, 59, .12);
}

.service-feature-heading::before {
    content: "";

    position: absolute;

    top: 0;
    left: 55px;

    width: 42px;
    height: 2px;

    background: #C8A96A;
}

.service-feature-heading .section-label {
    margin-bottom: 20px;

    color: #C8A96A !important;
}

.service-feature-heading h2 {
    margin: 0;

    color: #404A3B !important;

    font-family: var(--font-heading) !important;
    font-size: clamp(38px, 4vw, 52px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
}


/* Right side */

.service-feature-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 58px 55px;

    overflow: hidden;
}

.service-feature-content::after {
    content: "01";

    position: absolute;

    right: 28px;
    bottom: 17px;

    color: rgba(64, 74, 59, .055);

    font-family: var(--font-heading);

    font-size: 70px;
    font-weight: 500;

    pointer-events: none;
}

.service-feature-content p {
    position: relative;
    z-index: 1;

    max-width: 470px;

    margin: 0 0 16px;

    color: #666666 !important;

    font-size: 12.5px !important;
    line-height: 1.8 !important;
}


/* Link */

.service-feature-content .collection-link {
    position: relative;
    z-index: 2;

    align-self: flex-start;

    margin-top: 15px;

    color: #404A3B !important;
}


/* Interactive gold underline */

.service-feature-content .collection-link::after {
    width: 32px;

    background: #C8A96A;

    transition:
        width .65s cubic-bezier(.2,.65,.25,1);
}

.service-feature-content .collection-link:hover::after {
    width: 100%;
}


/* Arrow */

.service-feature-content .collection-link span {
    transition: transform .5s ease;
}

.service-feature-content .collection-link:hover span {
    transform: translateX(6px);
}


/* ==========================================================
   SUBTLE PANEL HOVER
========================================================== */

.service-feature {
    transition:
        border-color .5s ease,
        box-shadow .5s ease,
        transform .5s ease;
}

.service-feature:hover {
    border-color: rgba(200, 169, 106, .4);

    box-shadow:
        0 20px 45px rgba(43, 43, 43, .055);

    transform: translateY(-3px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 800px) {

    .services-intro {
        padding: 65px 0 !important;
    }

    .services-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .service-feature {
        grid-template-columns: 1fr;
    }

    .service-feature-heading {
        border-right: 0;
        border-bottom: 1px solid rgba(64, 74, 59, .12);
    }

}


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

@media (max-width: 600px) {

    .services-intro-grid h2 {
        font-size: 36px !important;
    }

    .service-section {
        padding: 60px 0 !important;
    }

    .service-feature-heading,
    .service-feature-content {
        padding: 42px 28px;
    }

    .service-feature-heading::before {
        left: 28px;
    }

    .service-feature-heading h2 {
        font-size: 38px !important;
    }

}
/* ==================================================
   FEATURED WORK — TEXT FIX
================================================== */

.work-page .featured-work-content p,
.work-page .featured-work-content .project-description {
    color: rgba(254, 249, 243, 0.82) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}
/* ==================================================
   FOOTER SOCIAL ICONS
================================================== */

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(200, 169, 106, 0.45);
    border-radius: 50%;

    color: var(--ivory);
    font-size: 15px;

    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--green);
    transform: translateY(-2px);
}

.footer-social i {
    display: block;
    line-height: 1;
}/* ==========================================================
   NINE3 DESIGNS — FOOTER
========================================================== */

.site-footer {

    background: #333C30;
    color: #FEF9F3;

    padding: 55px 0 0;

}


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

.footer-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

    min-height: 280px;

}


/* ---------- Left Side ---------- */

.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-socials {

    display: flex;

    gap: 12px;

    margin-bottom: 22px;

}


.footer-socials a {

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 1px solid rgba(200,169,106,.55);

    border-radius: 50%;

    color: #FEF9F3;

    font-size: 15px;

    transition: .3s ease;

}


.footer-socials a:hover {

    background: #C8A96A;

    border-color: #C8A96A;

    color: #333C30;

    transform: translateY(-3px);

}


.footer-email {

    display: inline-block;

    margin-bottom: 18px;

    color: #FEF9F3;

    font-size: 15px;

    font-weight: 600;

}


.footer-email:hover {

    color: #C8A96A;

}


.footer-brand p {

    max-width: 470px;

    margin: 0;

    color: rgba(254,249,243,.68);

    font-size: 14px;

    line-height: 1.8;

}


/* ---------- Logo ---------- */

.footer-logo {

    display: flex;

    align-items: center;

    justify-content: center;

}


.footer-logo img {

    display: block;

    width: 310px;

    max-width: 75%;

    height: auto;

}


/* ==========================================================
   BOTTOM BAR
========================================================== */

.footer-bottom {

    margin-top: 20px;

    padding: 22px 0 25px;

    border-top: 1px solid rgba(254,249,243,.12);

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

}


.footer-legal {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

}


.footer-legal a {

    color: rgba(254,249,243,.65);

    font-size: 11px;

    transition: .3s ease;

}


.footer-legal a:hover {

    color: #C8A96A;

}


.footer-legal span {

    color: rgba(254,249,243,.25);

    font-size: 10px;

}


.footer-bottom p {

    margin: 0;

    color: rgba(254,249,243,.65);

    font-size: 11px;

    white-space: nowrap;

    text-align: center;

}


.footer-credit {

    color: rgba(254,249,243,.5);

    font-size: 10px;

    text-align: right;

    white-space: nowrap;

}


.footer-credit span {

    color: #C8A96A;

}


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

@media (max-width: 768px) {

    .site-footer {

        padding-top: 10px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

        min-height: auto;

        text-align: center;

    }


    .footer-logo {

        order: -1;

    }


    .footer-logo img {

        width: 320px;

        max-width: 85%;

    }


    .footer-brand {

        align-items: center;

    }


    .footer-socials {

        margin-bottom: 18px;

    }


    .footer-email {

        font-size: 14px;

        margin-bottom: 14px;

    }


    .footer-brand p {

        max-width: 380px;

        font-size: 12px;

        line-height: 1.7;

    }


    .footer-bottom {

        margin-top: 20px;

        padding: 20px 0 22px;

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .footer-legal {

        justify-content: center;

        order: 1;

    }


    .footer-bottom p {

        order: 2;

        font-size: 10px;

    }


    .footer-credit {

        order: 3;

        text-align: center;

        font-size: 9px;

    }

}