/*==============================================================================
    OAC PROJECT ADVISORS
    STYLE.CSS
    VERSION 2.0
==============================================================================*/


/*==============================================================================
    ROOT
==============================================================================*/

:root{

    --navy:#13273E;
    --bronze:#A89A86;

    --text:#444444;

    --light:#F7F8F9;

    --white:#FFFFFF;

    --border:#E5E5E5;

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

    --transition:.25s ease;

    --content-width:1200px;

}



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

*,
*:before,
*:after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:18px;

    line-height:1.8;

    color:var(--text);

    background:white;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:var(--navy);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--bronze);

}

ul{

    list-style:none;

}

table{

    border-collapse:collapse;

    width:100%;

}



/*==============================================================================
    TYPOGRAPHY
==============================================================================*/

h1{

    font-size:4.4rem;

    color:var(--navy);

    line-height:1.05;

    margin-bottom:35px;

    font-weight:700;

}

h2{

    font-size:2.5rem;

    color:var(--navy);

    text-align:center;

    margin-bottom:55px;

    font-weight:700;

}

h3{

    color:var(--navy);

    font-size:1.45rem;

    margin-bottom:18px;

}

p{

    max-width:760px;

    margin:0 auto 28px;

}

strong{

    color:var(--navy);

}



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

section{

    padding:120px 40px;

}

.container{

    width:min(92%,var(--content-width));

    margin:auto;

}



/*==============================================================================
    NAVIGATION
==============================================================================*/

header{

    position:sticky;

    top:0;

    z-index:1000;

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

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

}

nav{

    max-width:var(--content-width);

    margin:auto;

}

nav ul{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:42px;

    height:72px;

}

nav a{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-weight:bold;

}



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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:white;

}

.masthead{

    margin-bottom:45px;

}

.masthead img{

    width:clamp(340px,55vw,620px);

    margin:auto;

}

.kicker{

    display:inline-block;

    margin-bottom:30px;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:var(--bronze);

    font-size:.82rem;

    font-weight:bold;

}

.hero h2{

    font-size:1.65rem;

    font-weight:400;

    color:#666666;

    margin-bottom:45px;

}

.hero p{

    font-size:1.15rem;

}

.hero p:first-of-type{

    font-size:1.30rem;

}

.hero p:nth-of-type(2){

    font-size:1.55rem;

    margin-bottom:40px;

}



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

.hero a{

    display:inline-block;

    padding:18px 34px;

    margin:10px;

    border:2px solid var(--navy);

    transition:var(--transition);

    font-weight:bold;

}

.hero a:first-child{

    background:var(--navy);

    color:white;

}

.hero a:first-child:hover{

    background:#1C3A59;

}

.hero a:last-child{

    background:white;

}

.hero a:last-child:hover{

    background:var(--navy);

    color:white;

}



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

#why{

    background:var(--light);

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

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

}

#why p{

    text-align:center;

    max-width:880px;

}



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

#services{

    background:white;

}

.services-grid{

    display:grid;

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

    gap:34px;

}

.services-grid article{

    padding:42px;

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

    box-shadow:var(--shadow);

    transition:var(--transition);

    background:white;

}

.services-grid article:hover{

    transform:translateY(-6px);

    border-color:var(--bronze);

}

.services-grid h3::after{

    content:"";

    display:block;

    width:50px;

    height:2px;

    background:var(--bronze);

    margin-top:12px;

}

.services-grid p{

    max-width:none;

    margin-top:20px;

}

/*==============================================================================
    EXPERIENCE
==============================================================================*/

#experience{

    background:#ffffff;

}

#experience ul{

    max-width:1000px;

    margin:0 auto;

    display:grid;

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

    gap:24px 50px;

}

#experience li{

    position:relative;

    padding-left:22px;

    font-size:1.05rem;

}

#experience li::before{

    content:"";

    position:absolute;

    left:0;

    top:13px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--bronze);

}



/*==============================================================================
    WHY OWNERS CHOOSE OAC
==============================================================================*/

#why-oac{

    background:var(--light);

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

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

}

#why-oac table{

    max-width:1050px;

    margin:auto;

    background:white;

    box-shadow:var(--shadow);

}

#why-oac th{

    background:var(--navy);

    color:white;

    padding:22px;

    text-align:left;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

#why-oac td{

    padding:22px;

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

    font-size:1rem;

}

#why-oac tr:last-child td{

    border-bottom:none;

}



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

#contact{

    text-align:center;

    background:white;

}

#contact p{

    max-width:700px;

}

#contact strong{

    font-size:1.15rem;

}

#contact a{

    font-weight:bold;

}



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

footer{

    background:var(--navy);

    color:white;

    text-align:center;

    padding:70px 30px;

}

footer p{

    color:white;

    max-width:none;

    margin-bottom:16px;

}

footer strong{

    color:white;

}

footer a{

    color:white;

}

footer a:hover{

    color:var(--bronze);

}



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

.hero-buttons{

    margin-top:55px;

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

    display:inline-block;

    min-width:260px;

    padding:18px 34px;

    text-align:center;

    border:2px solid var(--navy);

    font-weight:bold;

    transition:var(--transition);

}

.btn-primary{

    background:var(--navy);

    color:white;

}

.btn-primary:hover{

    background:#1D3B5B;

    color:white;

}

.btn-secondary{

    background:white;

    color:var(--navy);

}

.btn-secondary:hover{

    background:var(--navy);

    color:white;

}



/*==============================================================================
    GENERAL POLISH
==============================================================================*/

section h2::after{

    content:"";

    display:block;

    width:72px;

    height:3px;

    margin:20px auto 0;

    background:var(--bronze);

}

section:nth-child(even){

    background:var(--light);

}

section:nth-child(odd){

    background:white;

}



/*==============================================================================
    SUBTLE ANIMATION
==============================================================================*/

.services-grid article,
#why-oac table{

    transition:all .30s ease;

}

.services-grid article:hover{

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

}



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

@media (max-width:1100px){

    h1{

        font-size:3.6rem;

    }

    #experience ul{

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

    }

}



@media (max-width:900px){

    body{

        font-size:17px;

    }

    section{

        padding:90px 28px;

    }

    nav ul{

        justify-content:center;

        gap:20px;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2rem;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    #experience ul{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:360px;

    }

}



@media (max-width:600px){

    nav ul{

        flex-wrap:wrap;

        height:auto;

        padding:18px 0;

    }

    h1{

        font-size:2.4rem;

    }

    .masthead img{

        width:100%;

        max-width:420px;

    }

}