/*==================================================
  SAGE TAX SOLUTIONS v2.0
===================================================*/

/*====================
  GOOGLE FONTS RESET
=====================*/

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

:root{

    --navy:#0B1E38;
    --gold:#B8912F;
    --gold-dark:#947326;
    --white:#FFFFFF;
    --cream:#F8F6F2;
    --gray:#5B6472;
    --light:#EEF2F6;

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

    --transition:.3s ease;

    --container:1200px;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    padding:0;

    font-family:"Inter",sans-serif;
    background:var(--cream);
    color:var(--navy);
    line-height:1.7;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(90%,var(--container));
    margin:auto;

}

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

.header{

    background:var(--white);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 15px rgba(0,0,0,.05);

}

.header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:90px;

}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
}

.logo{
    height: 70px;   /* adjust between 55px–70px */
    width:auto;
    display:block;
}

.brand-text h1{
    margin:0;
    font-size:1.4rem;
    color:var(--navy);
    line-height:1.1;
}

.brand-text span{
    display:block;
    margin-top:4px;
    font-size:.85rem;
    color:var(--gold);
    letter-spacing:.5px;
}

.navigation{

    display:flex;
    gap:35px;

}

.navigation a{

    color:var(--navy);
    font-weight:600;
    transition:.3s;

}

.navigation a:hover{

    color:var(--gold);

}

.menu-toggle{

    display:none;
    border:none;
    background:none;
    font-size:2rem;
    cursor:pointer;

}

/*====================
HERO CARD
=====================*/

.hero-card{

    background:white;
    border-radius:var(--radius);
    padding:40px;
    box-shadow:var(--shadow);

}

.card-label{

    color:var(--gold);
    font-weight:700;
    letter-spacing:2px;
    font-size:.85rem;

}

.hero-card h3{

    margin:20px 0;
    font-size:2rem;
    font-family:"Playfair Display",serif;

}

.hero-card li{

    padding:15px 0;
    border-bottom:1px solid #ececec;

}

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

.section-header{

    text-align:center;
    max-width:700px;
    margin:0 auto 60px;

}

.section-tag{

    display:block;
    color:var(--gold);
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;

}

.section-header h2{

    font-family:"Playfair Display",serif;
    font-size:2.8rem;
    margin-bottom:20px;

}

.section-header p{

    color:var(--gray);

}

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

.why-us{

    background:#0B1E38;

    color:white;

    padding:100px 0;

}

.why-grid{

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

}

.feature-card{

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

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

    backdrop-filter:blur(8px);

    padding:40px;

    border-radius:14px;

    transition:.35s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

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

}

.feature-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#D4AF37;

    color:#0B1E38;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.7rem;

    margin-bottom:20px;

    transition:.3s;

}
.feature-card:hover .feature-icon{

    transform:rotate(8deg) scale(1.08);

}

.feature-card h3{

    color:white;

    margin-bottom:15px;

    font-family:"Playfair Display",serif;

}
.feature-card p{

    color:#E6E6E6;

    line-height:1.8;

}

.why-us .section-title,
.why-us .section-subtitle{

    color:white;

}

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

.services{

    background:#F8F6F2;

    padding:100px 0;

}

.services-grid{

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

}

.service-card{

    background:#ffffff;

    border-radius:14px;

    padding:40px;

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

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-icon{

    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--gold);
   color:#0B1E38;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.8rem;
    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:15px;
    font-family:"Playfair Display",serif;

}

.service-card p{

    color:var(--gray);

}

/*====================
RESPONSIVE
=====================*/

@media(max-width:900px){

.hero-grid{

grid-template-columns:1fr;

}

.why-grid{

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

}

.services-grid{

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

}

.navigation{

display:none;

}

.menu-toggle{

display:block;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

}

@media(max-width:650px){

.hero h2{

font-size:2.5rem;

}

.brand-text span{

display:none;

}

.why-grid{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:2.2rem;

}

}
/*==================================
OUR PROCESS
==================================*/

.process{
    padding:100px 0;
    background:var(--white);
}

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

.process-step{
    text-align:center;
    padding:35px 25px;
}

.step-number{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:var(--navy);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:700;
    font-family:"Playfair Display", serif;
}
.step-line{

    width:45px;

    height:3px;

    background:#D4AF37;

    margin:18px auto;

    border-radius:10px;

}

.process-step h3{
    font-family:"Playfair Display", serif;
    margin-bottom:15px;
    color:var(--navy);
}

.process-step p{
    color:var(--gray);
}

@media(max-width:900px){

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:650px){

    .process-grid{
        grid-template-columns:1fr;
    }

}

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

.about{

    background:#FFFFFF;

    padding:100px 0;

}

.about-grid{

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

}

.about-image img{

    width:100%;
    border-radius:16px;
    box-shadow:var(--shadow);

}

.about-content h2{

    font-family:"Playfair Display",serif;
    font-size:2.8rem;
    margin:20px 0 30px;

}

.about-content p{

    color:var(--gray);
    margin-bottom:20px;

}

.about-highlights{

    margin-top:40px;
    display:grid;
    gap:20px;

}

.highlight{

    background:var(--white);
    padding:20px 25px;
    border-left:5px solid var(--gold);
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.highlight h3{

    margin-bottom:8px;
    font-family:"Playfair Display",serif;
    color:var(--navy);

}

.highlight p{

    margin:0;
}

@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

}

.about-content{

text-align:center;

}

.about-highlights{

text-align:left;

}

}
/*==================================================
COMPLIANCE ROADMAP
==================================================*/

.calendar-section{

    padding:100px 0;
    background:#E2D5C2;

}

.section-heading{

    max-width:760px;
    margin:0 auto 40px;
    text-align:center;

}

.gold-text{

    color:var(--gold);
    font-weight:700;
    letter-spacing:3px;
    font-size:.9rem;
    margin-bottom:20px;

}

.section-heading h2{

    font-family:"Playfair Display",serif;
    font-size:2.8rem;
    color:var(--navy);
    margin-bottom:20px;

}

.section-heading p{

    color:var(--gray);
    font-size:1.05rem;

}

//*=========================
ROADMAP
==========================*/

.roadmap-container{

    position:relative;
    max-width:950px;
    margin:60px auto 0;

}


.roadmap-row{

    display:grid;

    grid-template-columns:1fr 90px 1fr;

    align-items:center;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}


.roadmap-card{

    background:#fff;

    padding:18px 22px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(11,30,56,.08);

    transition:all .35s ease;

    max-width:430px;

    width:100%;

    border-left:5px solid transparent;

}

.roadmap-card:hover{

    transform:translateY(-5px);

    border-left-color:var(--gold);

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

}
.left .roadmap-card{

    justify-self:end;

    margin-right:28px;

}

.right .roadmap-card{

    justify-self:start;

    margin-left:28px;

    border-left:none;
    border-right:5px solid transparent;

}

.right .roadmap-card:hover{

    border-right-color:var(--gold);

}

.roadmap-space{

    min-height:1px;

}

.roadmap-node{

    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:3;

}
.roadmap-node::after{

    content:"";

    position:absolute;

    top:60px;

    left:50%;

    transform:translateX(-50%);

    height:75px;

   border-left:2px dashed var(--gold);

    z-index:1;

}
.roadmap-row:last-child .roadmap-node::after{

    display:none;

}

.roadmap-circle{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--gold);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.15rem;

    box-shadow:0 8px 20px rgba(184,145,47,.35);
    
    border:5px solid #F5EFE5;
}

/* gold connectors */

.left .roadmap-node::before{

    content:"";

    position:absolute;

    right:60px;

    width:85px;

    height:34px;

    border-top:3px solid var(--gold);
    border-right:3px solid var(--gold);

    border-top-right-radius:30px;

    top:50%;

    transform:translateY(-50%);

}

.right .roadmap-node::before{

    content:"";

    position:absolute;

    left:60px;

    width:85px;

    height:34px;

    border-top:3px solid var(--gold);
    border-left:3px solid var(--gold);

    border-top-left-radius:30px;

    top:50%;

    transform:translateY(-50%);

}

.roadmap-card span{

    display:block;

    color:var(--gold);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

}

.roadmap-card h3{

    font-family:"Playfair Display",serif;

    color:var(--navy);

    font-size:1.3rem;

    margin-bottom:10px;

}

.roadmap-card p{

    color:var(--gray);

    line-height:1.7;

    margin:0;

}
/*=========================
ROADMAP CTA
==========================*/

.calendar-action{

    max-width:520px;
    margin:50px auto 0;
    padding:28px 32px;

    background:#0B1E38 !important;

    border-radius:16px;

    text-align:center;

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

    display:block;

}
.calendar-action h3{

    color:var(--white);

    font-family:"Playfair Display", serif;

    font-size:1.45rem;

    margin-bottom:11px;

}

.calendar-action p{

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

    max-width:480px;

    margin:0 auto 22px;

    line-height:1.6;

}

.calendar-action a{

    display:inline-block;

    padding:12px 28px;

    background:var(--gold);

    color:var(--white);

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

}

.calendar-action a:hover{

    background:var(--gold-dark);

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(184,145,47,.35);

}

/*=========================
RESPONSIVE
==========================*/

@media(max-width:768px){

    .section-heading h2{

        font-size:2.2rem;

    }

    .roadmap-container::before{

        left:24px;

    }

    .roadmap-item{

        gap:20px;

    }

    .roadmap-marker{

        width:50px;
        height:50px;
        font-size:1rem;

    }

    .roadmap-content{

        padding:22px;

    }

    .roadmap-content h3{

        font-size:1.3rem;

    }

    .calendar-action{

        padding:40px 25px;

    }

    .calendar-action h3{

        font-size:1.6rem;

    }

}

@media(max-width:480px){

    .roadmap-item{

        flex-direction:column;
        padding-left:20px;

    }

    .roadmap-container::before{

        left:24px;

    }

    .roadmap-marker{

        margin-left:-1px;

    }

    .roadmap-content{

        width:100%;

    }

}
/*==================================================
REQUEST A CONSULTATION
==================================================*/

.contact-section{

    padding:75px 0;

    background:#F6F4EF;

}

.contact-grid{

    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:45px;
    align-items:start;
    margin-top:60px;

}

/*=========================
CONTACT INFORMATION
==========================*/

.contact-info h3{

    font-family:"Playfair Display",serif;
    font-size:2rem;
    color:var(--navy);
    margin-bottom:35px;

}

..contact-item{

    display:flex;
    align-items:center;

    padding:14px 18px;

    margin-bottom:12px;

    background:#fff;

    border-radius:14px;

    border-left:4px solid transparent;

    box-shadow:0 8px 20px rgba(11,30,56,.05);

    transition:.35s ease;

}
.contact-item:hover{

    transform:translateX(6px);

    border-left-color:var(--gold);

    box-shadow:0 14px 28px rgba(11,30,56,.10);

}

.contact-item h4{

    font-size:1rem;
    font-weight:700;
    color:var(--navy);
    margin-bottom:8px;

}

.contact-item p{

    color:var(--gray);
    line-height:1.8;
    margin:0;

}

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

.contact-form{

    background:#FFFFFF;

    padding:28px;

    border-radius:18px;

    box-shadow:0 18px 40px rgba(11,30,56,.08);

}

.form-row{

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

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--navy);

}

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

    width:100%;
    padding:14px 16px;
    border:1px solid #d8dde3;
    border-radius:12px;
    background:#FCFCFC;
    font-family:inherit;
    font-size:1rem;
    transition:.3s;

}

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

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(184,145,47,.12);

}

.form-group textarea{

    resize:vertical;
    min-height:120px;

}

.contact-form button{

    margin-top:10px;

}

/*=========================
RESPONSIVE
==========================*/

@media(max-width:900px){

   .contact-grid{

    gap:55px;

    margin-top:50px;

}
}

@media(max-width:650px){

    .form-row{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:30px 25px;

    }

    .contact-info h3{

        font-size:1.7rem;

    }

}

/* ==========================================
   FLASH MESSAGES
========================================== */

.flash{
    padding:16px 20px;
    margin-bottom:25px;
    border-radius:8px;
    font-weight:600;
    border-left:5px solid;
}

.flash.success{
    background:#EAF8EC;
    color:#1F6B2D;
    border-color:#28A745;
}

.flash.danger{
    background:#FDECEC;
    color:#8A1F1F;
    border-color:#DC3545;
}
/* ==========================================
   HERO
========================================== */

.hero{

    position:relative;

    min-height:80vh;

    display:flex;

    align-items:center;

     background:
    linear-gradient(rgba(11,30,56,.45), rgba(11,30,56,.45)),
    url("../images/hero.jpg");

    background-size:cover;

    background-position:right center;

    color:#fff;

}
.hero-content{

    position:relative;

    z-index:10;

    width:min(650px,90%);

    margin-left:8%;

    text-align:left;

    padding-top:80px;

}

.hero-content p{

    font-size:21px;

    line-height:1.8;

    color:#f4f4f4;

    max-width:520px;

    margin-bottom:40px;

}

.hero-content h1{

    font-size:80px;

    line-height:1.1;

    margin:25px 0;

    color:#fff;

}

.hero-content p{

    font-size:21px;

    line-height:1.8;

    color:#f4f4f4;

    max-width:520px;

    margin-bottom:40px;

}

.hero .gold-text{

    color:#D4AF37;

    letter-spacing:2px;

    font-weight:600;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}
.btn{

    display:inline-block;

    padding:16px 34px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;

    transition:0.3s ease;

}

.btn-primary{

    background:#D4AF37;

    color:#0B1E38;

}

.btn-primary:hover{

    background:#c69d2b;

    transform:translateY(-2px);

}

.btn-secondary{

    border:2px solid #ffffff;

    color:#ffffff;

    background:transparent;

}

.btn-secondary:hover{

    background:#ffffff;

    color:#0B1E38;

}
a,
button,
.btn,
.btn-primary,
input[type="submit"]{
    cursor: pointer;
}
@media(max-width:768px){

.hero{

    min-height:80vh;

    background-position:right center;

}

.hero-content{

    margin:auto;

    text-align:center;

}

.hero-content h1{

    font-size:44px;

}

.hero-buttons{

    justify-content:center;

}

}
.hero-line{

    width:90px;

    height:4px;

    background:#D4AF37;

    margin:30px 0;

    border-radius:10px;

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

.footer{

    background:var(--navy);
    margin-top:0;

}

.footer-bottom{

    text-align:center;
    padding:30px 20px;
    border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

    color:rgba(255,255,255,.75);
    font-size:.9rem;
    letter-spacing:.5px;
    margin:0;

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

.menu-toggle{

    display:none;

}

@media (max-width:768px){

    .menu-toggle{

        display:block;
        background:none;
        border:none;
        color:var(--navy);
        font-size:2rem;
        cursor:pointer;

    }

    .navigation{

        display:none;

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#ffffff;

        box-shadow:0 10px 25px rgba(0,0,0,.08);

        padding:20px;

        flex-direction:column;

        gap:20px;

    }

    .navigation.active{

        display:flex;

    }

}