/*==============================
RESET
==============================*/

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


html{
    scroll-behavior:smooth;
    scroll-padding-top:92px;
}


body{

    font-family:'Manrope',sans-serif;
    background:#ffffff;
    color:#596575;
    line-height:1.8;
    font-size:18px;
    overflow-x:hidden;

}


img{

    display:block;
    max-width:100%;

}


a{

    text-decoration:none;

}


ul{

    list-style:none;

}


/*==============================
COLOURS
==============================*/

:root{

    --navy:#0B1F3A;
    --gold:#C9A45C;

    --heading:#102742;
    --text:#596575;

    --white:#ffffff;
 

    --border:#E8EDF3;

    --shadow:
    0 25px 60px rgba(17,43,74,.08);

 


}


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


.container{

    width:min(1240px,92%);
    margin:auto;

}


.section{

    padding:50px 0;

}


.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 85px;

}


.section-tag{

    display:inline-block;

    background:#EFF4F8;

    color:var(--navy);

    padding:9px 20px;

    border-radius:999px;

    font-size:.82rem;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:28px;

}


.section-header h2{

    color:var(--heading);

    font-size:52px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

}


.section-header p{

    font-size:19px;

    color:var(--text);

}



/*==============================
BUTTONS
==============================*/


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    font-weight:700;

    transition:.35s ease;

}



.btn-primary{

    background:var(--navy);

    color:var(--white);

}



.btn-primary:hover{

    transform:translateY(-4px);

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

}




/*==================================================
HEADER
==================================================*/


.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;


    background:#FFF;

    backdrop-filter:blur(12px);


    border-bottom:1px solid rgba(0,0,0,.05);


    z-index:9999;


}



.nav{

    height:92px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}

.nav-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo img{
    height:70px;
    width:auto;
    transition:transform .15s ease;
}

.logo:hover img{
    transform:scale(1.04);
}


a,
button{
    -webkit-tap-highlight-color:transparent;
}

.logo,
.logo img{
    -webkit-user-select:none;
    user-select:none;
}

.logo img{
    -webkit-user-drag:none;
}



/* DESKTOP NAV */


.nav-links{

    display:flex;

    align-items:center;

    gap:42px;

}



.nav-links a{

    color:var(--heading);

    font-weight:600;

    position:relative;

}



.nav-links a::after{


    content:"";

    position:absolute;

    left:0;

    bottom:-8px;


    width:0;

    height:2px;


    background:var(--gold);


    transition:.3s;


}



.nav-links a:hover::after{

    width:100%;

}





.nav-button{


    background:var(--gold);

    color:var(--navy);


    padding:14px 30px;


    border-radius:999px;


    font-weight:700;
   line-height:1.5;

    transition:.3s;


}

.nav-button i{
    display:none;
}

.nav-button:hover{

    transform:translateY(-3px);

}






/* MOBILE MENU BUTTON */


.mobile-menu{


    display:none;


    width:46px;

    height:46px;


    border:none;


    border-radius:12px;


    background:var(--navy);

    color:white;


    font-size:20px;


    cursor:pointer;

 transition:.3s ease;
}

.mobile-menu:hover{
    transform:translateY(-3px);
}


/*==================================================*
*HOME / HERO*
*==================================================*/

.hero{
    position:relative;
    overflow:hidden;

    background:#0B1F3A;

    padding-top:192px;
    padding-bottom:100px;

    color:var(--white);
}


.hero .section-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;

    width:fit-content;
    padding:0;

    background:none;
    border:none;
    border-radius:0;

    color:#C9A45C;

    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.hero .section-tag::before{
    content:"";
    width:28px;
    height:1px;
    flex-shrink:0;
    background:#C9A45C;
}




.hero::before {
    content:"";
    position:absolute;

    top:0;
    bottom:0;

    /* RIGHT EDGE = RIGHT EDGE OF SITE CONTAINER */
    right:max(4vw, calc((100vw - 1240px) / 2));

    width:55%;

    background-image:image-set(
    url("cube2.avif") type("image/avif"),
    url("cube2.webp") type("image/webp"),
    url("cube2.png") type("image/png")
);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 100%;

    pointer-events:none;
    z-index:0;
}

.hero::after {
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(11,31,58,1) 0%,
        rgba(11,31,58,.98) 28%,
        rgba(11,31,58,.80) 48%,
        rgba(11,31,58,.25) 66%,
        rgba(11,31,58,0) 82%
    );

    pointer-events:none;
    z-index:0;
}

.hero-content{
    position:relative;
    z-index:1;
}

.hero-content .section-tag{
    margin-bottom:32px;
}

.hero-content h1{
    font-size:84px;
    line-height:1.05;
    color:var(--white);
    margin-bottom:38px;
    font-weight:800;
    letter-spacing:-0.035em;
}

.hero-content > p{
    font-size:21px;
    line-height:1.65;
    max-width:760px;
    margin:0 0 55px;
    color:rgba(255,255,255,0.80);
}

.hero-accent{
    color:var(--gold);
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-weight:600;
    letter-spacing:-0.01em;
}

.hero-trust{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:0;
    margin:0;
}

.trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 20px;
    color:var(--white);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

.trust-item:first-child{
    padding-left:0;
}

.trust-item i{
    color:var(--gold);
    font-size:13px;
}

.trust-divider{
    width:1px;
    height:18px;
    background:rgba(255,255,255,0.25);
}


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


.services{
	background:#FFF;
    border-top:1px solid var(--border);

}


.services-grid{

    display:grid;

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

    gap:36px;

    margin-top:25px;

}



.service-card{

    background:#fff;

    border:2px solid rgba(215,181,109,.55);

    border-radius:24px;

    padding:38px;

    transition:.35s ease;

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

position:relative;
padding-bottom:75px;

}



.service-card:hover{

    transform:translateY(-8px);

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

    border-color:var(--gold);

}



.service-title{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:28px;

}



.service-title i{

    width:46px;

    height:46px;

    border-radius:12px;

    background:rgba(215,181,109,.12);

    color:var(--gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}



.service-title h3{

    font-size:28px;

    color:var(--heading);

    margin:0;

}



.service-card ul{

    list-style:none;

    padding:0;

    margin:0;

}



.service-card li{

    padding:16px 0;

    border-bottom:1px solid var(--border);

    font-size:17px;

    color:var(--text);

    transition:.3s ease;

}



.service-card li:last-child{

    border-bottom:none;

}



.service-card li:hover{

    color:var(--heading);

    padding-left:8px;

}

.service-price{

    position:absolute;
    right:28px;
    bottom:28px;

    color:var(--heading);

    font-size:15px;
    font-weight:700;

}



/*==================================================
HOW WE WORK
==================================================*/


.process{

    background:#FAFBFC;

    border-top:1px solid var(--border);
}



.process-grid{

    display:grid;

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

    gap:30px;

}



.process-step{

    text-align:center;

    padding:45px 15px;

    transition:.35s ease;

}



.process-step:hover{

    transform:translateY(-6px);

}



.step-number{

    width:70px;

    height:70px;

    border-radius:50%;

    margin:0 auto 28px;

    background:var(--gold);

    color:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    font-size:24px;

}



.process-step h3{

    color:var(--heading);

    margin-bottom:18px;

    font-size:28px;

}


/*==================================================*
*OUR TEAM*
*==================================================*/

.team{
    background:#FFF;
    border-top:1px solid var(--border);
}

.team-list{
    max-width:1050px;
    margin:0 auto;
border-bottom:1px solid var(--border);
}


/*--------------------------------------------------*
*TEAM PROFILE — DESKTOP*
*--------------------------------------------------*/

.team-profile{
    display:grid;
    grid-template-columns:240px 1fr;
    column-gap:60px;

    position:relative;

    padding:30px 10px 30px 25px;

    border-top:1px solid var(--border);
}


.team-profile::before{
    content:"";

    position:absolute;
    left:0;
    top:30px;
    width:3px;
    height:58px;

    background:var(--gold);

    transition:
        height .35s ease,
        top .35s ease;
}

.team-profile:hover::before{
    height:72px;
    top:23px;
}

.team-profile:hover .team-heading h3{
    transform:translateX(4px);
}

.team-profile:hover .team-bio p{
    color:var(--heading);
}

.team-profile .team-heading h3{
    transition:transform .35s ease;
}

.team-profile .team-bio p{
    transition:color .35s ease;
}

/*--------------------------------------------------*
*NAME + TITLE*
*--------------------------------------------------*/

.team-heading{
    grid-column:1;
}

.team-profile h3{
    color:var(--heading);
    font-size:30px;
    line-height:1.2;
    margin:0 0 6px;
    font-weight:800;
}

.team-role{
    color:var(--gold);
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:1.5;
}


/*--------------------------------------------------*
*BIO*
*--------------------------------------------------*/

.team-bio{
    grid-column:2;
}

.team-bio p{
    color:var(--text);
    font-size:17px;
    line-height:1.8;
    margin:0;
}


/*--------------------------------------------------*
*MOBILE TOGGLE*
*--------------------------------------------------*/

.team-toggle{
    display:none;
}



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

.hero-credential-divider{
    height:0;
    margin:15px auto 30px;
}

.hero-credentials{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
    width:max-content;
    margin:0 auto;
}

.hero-credentials img{
    width:auto;
    object-fit:contain;
}

.cpa-logo{
    height:90px;
}

.tpb-logo{
    height:120px;
}

/*==================================================
CONTACT
==================================================*/
input[name="botcheck"]{
    display:none;
}

.contact{
    background:#FAFBFC;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:start;

}



.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}



.contact-card{

    display:flex;

    gap:22px;

    align-items:flex-start;

}



.contact-card i{

    width:56px;

    height:56px;

    border-radius:16px;

    background:#F4F7FA;

    color:var(--gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;

    transition:.3s ease;

}



.contact-card h3{

    color:var(--heading);

    margin-bottom:6px;

}



/* Restored contact animation */

.contact-link{

    display:flex;

    align-items:flex-start;

    gap:20px;

    text-decoration:none;

    color:inherit;

    transition:.3s ease;

}



.contact-link:hover{

    transform:translateX(4px);

}



.contact-link:hover h3{

    color:var(--gold);

}



.contact-link:hover i{

    transform:scale(1.08);

}



.contact-form{

    background:white;

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

    border-radius:28px;

    padding:45px;

    box-shadow:var(--shadow);

}



.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

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

    border-radius:14px;

    font-family:inherit;

    font-size:16px;

    margin-bottom:18px;

    outline:none;

    transition:.3s ease;

}

/* Makes the container hold items horizontally */
.form-row {
    display: flex;
    gap: 15px;            /* The spacing between Name and Phone */
    margin-bottom: 18px;  /* Matches your original form spacing */
}

/* Fixes the conflict with your original CSS rules */
.form-row input {
    margin-bottom: 0;     /* Removes vertical margin between side-by-side items */
    flex: 1;              /* Makes both inputs perfectly fill 50% of the row */
}


.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--navy);

}



.contact-form button{

    border:none;

    cursor:pointer;

}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

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


footer{

    background:#fff;

    padding:20px 0;

}



.footer-bottom{

    text-align:center;

    color:#7F8898;

}



.footer-bottom p{

    margin:0;

    font-size:15px;

    line-height:1.4;

}



/*==================================================
BACK TO TOP
==================================================*/


.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--navy);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:.3s ease;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    z-index:999;

}



.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.back-to-top:hover{

    background:var(--gold);

    color:var(--navy);

    transform:translateY(-4px);

}



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


.contact-form input.error,
.contact-form textarea.error{
    border:2px solid #D9534F;
}


.contact-form input.success,
.contact-form textarea.success{
    border:2px solid #2E7D32;
}





.form-submit-row button{
    flex-shrink:0;
    white-space:nowrap;
}


.form-submit-row{
    display:flex;
    align-items:center;
    min-height:52px;
}

#formStatus{
    display:none;
    margin:0 0 0 20px;
    min-height:52px;
    align-items:center;
    font-weight:600;
    color:#1F3A5F;
    line-height:1.5;
}

#formStatus i{
    font-size:18px;
    margin-right:10px;
    flex-shrink:0;
}



/*==================================================*
*INTERMEDIATE DESKTOP NAV*
*==================================================*/

@media (min-width:1101px) and (max-width:1250px){

    .nav-links{
        gap:28px;
    }

    .nav-button{
        padding:12px 20px;
    }

    .nav-actions{
        gap:8px;
    }

}
 
/*==================================================
RESPONSIVE DESIGN
==================================================*/



/* INTERMEDIATE DESKTOP */
@media (min-width:1501px){

    .hero::before{
        opacity:.58;
        background-position:right center;
        background-size:auto 100%;
    }

    .hero::after{
        background:linear-gradient(
            90deg,
            rgba(11,31,58,1) 0%,
            rgba(11,31,58,1) 38%,
            rgba(11,31,58,.92) 52%,
            rgba(11,31,58,.58) 66%,
            rgba(11,31,58,.12) 82%,
            rgba(11,31,58,0) 100%
        );
    }
}

/* HERO GRAPHIC SWITCHES AT 1500PX */
@media(max-width:1500px){

    .hero::before{
        opacity:.58;
        background-position:58% center;
        background-size:auto 100%;
    }

    .hero::after{
        background:rgba(11,31,58,.58);
    }
}

@media(max-width:1100px){


    

    .hero::before{
    right:0;
    width:62%;

    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.35) 14%,
        rgba(0,0,0,.75) 28%,
        #000 42%
    );

    mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.35) 14%,
        rgba(0,0,0,.75) 28%,
        #000 42%
    );
}

.hero-content h1{

    font-size:58px;

}



.services-grid{

    grid-template-columns:1fr 1fr;

}




.contact-grid{

    grid-template-columns:1fr;

}

.contact-link:hover{
    transform:none;
}

.contact-link:hover h3{
    color:var(--heading);
}

.contact-link:hover i{
    transform:none;
}

.contact-link:active{
    transform:translateX(4px);
}

.contact-link:active h3{
    color:var(--gold);
}

.contact-link:active i{
    transform:scale(1.08);
}

.logo:hover img{
    transform:none;
}

.logo:active img{
    transform:scale(1.04);
}

.mobile-menu:hover,
.nav-button:hover,
.btn-primary:hover{
    transform:none;
}

.mobile-menu:active,
.nav-button:active,
.btn-primary:active{
    transform:translateY(-3px);
}
.process-grid{

    grid-template-columns:1fr;

}



.nav-links{
    position:absolute;
    top:92px;
    left:0;
    width:100%;

    background:white;

    flex-direction:column;
    align-items:center;

    gap:0;
    padding:12px 0 18px;

    display:none;

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


.nav-links li{
    width:min(320px,55%);
    text-align:center;
    border-bottom:1px solid var(--border);
}

.nav-links li:last-child{
    border-bottom:none;
}

.nav-links a{
    display:block;
    padding:13px 0;
    transition:color .2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible{
    color:var(--gold);
}

/* Remove desktop underline treatment inside dropdown */
.nav-links a::after{
    display:none;
}

.nav-links.active{


    display:flex;


}



.mobile-menu{


    display:block;
   line-height:1;

}



.nav-button{

    width:46px;
    height:46px;
    padding:0;

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

    border-radius:12px;

    font-size:20px;
line-height:1;


}

.nav-button span{
    display:none;
}

.nav-button i{
    display:block;
}


.back-to-top:hover{
    background:var(--navy);
    color:#fff;
    transform:translateY(0);
}

.back-to-top:active{
    background:var(--gold);
    color:var(--navy);
    transform:translateY(-4px);
}

}

@media(min-width:769px) and (max-width:1100px){

    .services-grid .service-card:last-child{

        grid-column:1 / -1;

        width:calc(50% - 18px);

        justify-self:center;

    }

}



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


@media(max-width:768px){

html{
    scroll-padding-top:82px;
}

body{

    font-size:16px;

}




.container{

    width:90%;

}






.nav{

    height:82px;

}
.nav-links{
    top:82px;
}


.logo img{

    height:55px;

}





    .hero{
        padding-top:140px;
        padding-bottom:85px;
    }


.hero-content h1{


    font-size:55px;


    line-height:1.1;


}



.hero-content > p{

    font-size:18px;

}


  .hero-trust{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:20px;
        row-gap:18px;
        width:100%;
    }

    .hero-trust .trust-divider{
        display:none;
    }

    .hero-trust .trust-item{
        justify-content:center;
        padding:0;
        text-align:center;
    }

.btn{


    width:100%;


}






.cpa-logo{
    height:110px;
}

.tpb-logo{
    height:145px;
}



.section-header h2{


    font-size:36px;


}



.section-header p{


    font-size:17px;


}









.services-grid{


    grid-template-columns:1fr;


}



.service-card{


    padding:30px;


}

.service-card ul{
    margin-bottom:25px;
}


.service-title h3{


    font-size:24px;


}




.process-step{


    padding:30px 10px;


}



.contact-form{


    padding:25px;


}




.back-to-top{


    right:20px;


    bottom:20px;


}


    .separator{
        display:none;
    }

    .abn{
        display:block;
    }

.form-row{
    flex-direction:column;
    gap:0;
}

.form-row input:not(:last-of-type){
    margin-bottom:18px;
}

  .team-profile{
    display:block;
    position:relative;

    padding:24px 55px 24px 20px;
    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}


/* NAME */

.team-profile h3{
    font-size:26px;
    transition:transform .35s ease;
}


/* TITLE */

.team-role{
    margin-top:5px;
    font-size:13px;
}


/* BIO */

.team-bio{
    display:none;
    padding-top:18px;
}

.team-profile.open .team-bio{
    display:block;
}

.team-bio p{
    font-size:16px;
    color:var(--text);
    transition:color .35s ease;
}


/* GOLD VERTICAL ACCENT */

.team-profile::before{
    content:"";

    position:absolute;

    left:0;
    top:24px;

    width:3px;
    height:45px;

    background:var(--gold);

    transition:
        height .35s ease,
        top .35s ease;
}


/* HOVER EFFECT */

.team-profile:hover::before{
    height:45px;
    top:24px;
}

.team-profile.open::before{
    height:55px;
    top:19px;
}

.team-profile:hover .team-heading h3{
    transform:none;
}

.team-profile.open .team-heading h3{
    transform:translateX(4px);
}
.team-profile:hover .team-bio p{
    color:var(--heading);
}


/* CHEVRON */

.team-toggle{
    position:absolute;
    top:24px;
    right:5px;

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

    width:38px;
    height:38px;

    border:none;
    background:transparent;

    color:var(--navy);

    cursor:pointer;
}

.team-toggle i{
    font-size:14px;
    transition:.3s ease;
}

.team-profile.open .team-toggle{
    color:var(--gold);
}

.team-profile.open .team-toggle i{
    transform:rotate(180deg);
}




}






/*==================================================
VERY SMALL DEVICES
==================================================*/



@media(max-width:380px){


.hero-content h1{

    font-size:36px;

}



.section-header h2{

    font-size:32px;

}




}







/*==================================================
ACCESSIBILITY
==================================================*/


a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible{


    outline:3px solid var(--navy);


    outline-offset:3px;


}






/*==================================================
SCROLL ANIMATION
==================================================*/


.fade-up{


    opacity:0;


    transform:translateY(30px);


    transition:.7s ease;


}



.fade-up.visible{


    opacity:1;


    transform:none;


}

/*==================================================
PROCESS TIMELINE ANIMATION
==================================================*/

.process-grid{
    position:relative;
}


@media(min-width:1101px){

.process-grid::before{

    content:"";

    position:absolute;

    top:79px;

    left:18%;

    right:18%;

    height:2px;

    background:var(--border);

    z-index:0;

}

}


.process-step{
    position:relative;
    z-index:1;
}


.process-step .step-number{

    transition:.4s ease;

}



.process-step:nth-child(1) .step-number{

    animation:processHighlight 6s infinite;

}


.process-step:nth-child(2) .step-number{

    animation:processHighlight 6s infinite 2s;

}


.process-step:nth-child(3) .step-number{

    animation:processHighlight 6s infinite 4s;

}



@keyframes processHighlight{


    0%,100%{

        transform:scale(1);

        box-shadow:none;

    }


    10%{

        transform:scale(1.15);

        box-shadow:0 0 0 12px rgba(201,164,92,.25);

    }


    25%{

        transform:scale(1);

        box-shadow:none;

    }

}

.back-to-top.scrolling,
.back-to-top.scrolling:hover,
.back-to-top.scrolling:active{
    background:var(--gold);
    color:var(--navy);
    transform:translateY(-4px);
}