/* =====================================
   WEAVERWORKS FINAL INSTITUTIONAL STYLE
   ===================================== */


:root {

    --ivory:#FEFDF9;
    --white:#FFFFFF;
    --navy:#14263D;
    --gold:#B08D57;
    --muted:#667085;
    --border:rgba(20,38,61,0.12);

}


/* RESET */

* {

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

}


body {

    background:var(--ivory);
    color:var(--navy);
    font-family:'Inter',Arial,sans-serif;
    line-height:1.6;

}


img {

    max-width:100%;
    display:block;

}


a {

    color:var(--navy);
    text-decoration:none;

}




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


.header {

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

    padding:5px 70px;

}


.logo {

    display:flex;
    align-items:center;
    gap:0px;

}


.mark {

    width:120px;
    height:120px;

}


.wordmark {

    width:350px;
    transform:translateX(-15px);

}


nav {

    display:flex;
    gap:40px;

}


nav a {

    font-size:15px;

}





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


.hero {

    min-height:72vh;

    display:flex;
    align-items:center;

    padding:35px 70px 35px;

    background-color:#FFFFFF;
    background-image:url("assets/weaverworks-hero-background.png") !important;
   background-size:contain !important;
   background-position:center right !important;
    background-repeat:no-repeat !important;

}


.hero-content {

    max-width:820px;

}


.hero h1 {

    font-family:'Cormorant Garamond',serif;

    font-size:94px;

    line-height:.9;

    font-weight:600;

    margin-bottom:20px;

}


.hero h2 {

    font-size:27px;

    line-height:1.35;

    max-width:680px;

    font-weight:500;

    margin-bottom:18px;

}


.hero p {

    max-width:600px;

    font-size:17px;

    color:var(--muted);

}



/* =====================================
   GOLD THREAD DIVIDER
   ===================================== */


.gold-divider {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    color:var(--gold);

    font-size:22px;

    letter-spacing:5px;

    margin:35px auto;

}


.gold-divider::before,
.gold-divider::after {

    content:"";

    height:1px;

    width:180px;

    background:var(--gold);

    opacity:.55;

}





/* =====================================
   HOW IT WORKS
   ===================================== */


.journey {

    max-width:1200px;

    margin:auto;

    padding:25px 70px 45px;

}


.journey h2 {

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    margin-bottom:0;

}


.journey h3 {

    font-size:28px;

    font-weight:500;

    margin-bottom:15px;

}


.journey>p {

    max-width:820px;

    color:var(--muted);

    font-size:16px;

}



.journey-grid {

    display:grid;

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

    gap:20px;

    margin-top:30px;

}


.journey-step {

    background:var(--white);

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

    padding:25px;

}

.journey-step span {

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;

    font-weight: 700;

    line-height: 1;

    color: #14263D;

    letter-spacing: 1px;

    display: block;

    margin-bottom: 12px;

}
.journey-step h4 {

    font-size:28px;

    margin:5px 0;

}


.journey-step p {

    color:var(--muted);

    font-size:15px;

}





/* =====================================
   EXPERTISE PATHWAYS
   ===================================== */


.solutions {

    max-width:1250px;

    margin:auto;

    padding:25px 60px 45px;

}


.solutions h2 {

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

}


.section-intro {

    max-width:700px;

    color:var(--muted);

}



.solution-grid {

    display:grid;

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

    gap:20px;

    margin-top:30px;

}


.solution-card {

    background:var(--white);

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

    padding:22px;

}


.solution-card img {

    width:55px;

    height:55px;

    margin-bottom:12px;

}


.solution-card h3 {

    font-size:25px;

    margin-bottom:8px;

}


.solution-card p {

    color:var(--muted);

    font-size:14px;

    line-height:1.45;

    margin-bottom:8px;

}


.solution-card a {

    color:var(--gold);

    font-size:14px;

}





/* =====================================
   SPECIALIST PROVIDERS
   ===================================== */


.specialists {

    max-width:1100px;

    margin:auto;

    padding:35px 60px;

}


.specialists h2 {

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    margin-bottom:12px;

}


.specialists>p {

    max-width:750px;

    color:var(--muted);

}



.specialist-box {

    background:var(--white);

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

    padding:35px;

    margin-top:25px;

}


.specialist-box h3 {

    font-size:28px;

}


.specialist-box p {

    color:var(--muted);

}


.specialist-box a {

    display:inline-block;

    margin-top:12px;

    color:var(--gold);

}





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


footer {

    max-width:1100px;

    margin:auto;

    text-align:center;

    padding:35px 30px 45px;

}


footer p {

    margin-top:12px;

}


.legal {

    color:var(--muted);

    font-size:13px;

}





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


@media(max-width:900px){


.header {

    padding:20px;

}


nav {

    display:none;

}


.hero {

    padding:30px 25px;

    min-height:auto;

}


.hero h1 {

    font-size:68px;

}


.journey,
.solutions,
.specialists {

    padding-left:25px;

    padding-right:25px;

}


.journey-grid,
.solution-grid {

    grid-template-columns:1fr;

}


.gold-divider::before,
.gold-divider::after {

    width:70px;

}


}
/* =====================================
   VERTICAL PAGE SYSTEM
   ===================================== */


.content-section {

    max-width:1200px;
    margin:auto;
    padding:45px 70px;

}


.content-section h2 {

    font-family:'Cormorant Garamond',serif;
    font-size:60px;
    line-height:1.05;
    margin-bottom:20px;

}


.content-section > p {

    max-width:800px;
    color:var(--muted);
    font-size:17px;

}



.card-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:35px;

}



.info-card {

    background:var(--white);
    border:1px solid var(--border);
    padding:28px;

}



.info-card h3 {

    font-size:28px;
    margin-bottom:8px;

}



.info-card h4 {

    font-size:18px;
    font-weight:500;
    margin-bottom:12px;

}



.info-card p {

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

}



.info-card span {

    display:block;
    margin-top:15px;
    font-size:13px;
    color:var(--gold);

}





/* Assessment thread */

.assessment-thread {

    position:fixed;

    right:35px;
    top:45%;

    z-index:20;

    text-align:center;

}


.assessment-thread a {

    color:var(--gold);

    font-size:13px;

    line-height:1.4;

}



.hero-link {

    display:inline-block;

    margin-top:25px;

    color:var(--gold);

    font-size:16px;

}





/* Assessment closing block */

.assessment-section {

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px 30px;

}



.assessment-section h2 {

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    margin-bottom:20px;

}



.assessment-section p {

    color:var(--muted);

    max-width:650px;

    margin:auto;

}



.assessment-button {

    display:inline-block;

    margin-top:30px;

    padding:14px 28px;

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

    color:var(--navy);

}





@media(max-width:900px){


.content-section {

    padding:35px 25px;

}


.card-grid {

    grid-template-columns:1fr;

}


.assessment-thread {

    display:none;

}


}
/* =========================
   MOBILE RESPONSIVE FIXES
   ========================= */

@media (max-width:768px) {


    /* =========================
       Header
       ========================= */

    .header {
        padding:10px 20px;
    }

    .logo {
        gap:0;
        align-items:center;
    }

    .logo .mark {
        width:90px;
        height:90px;
    }

    .logo .wordmark {
        width:260px;
        transform:translateX(-10px);
    }

    nav {
        display:none;
    }



    /* =========================
       Hero
       ========================= */

    .hero {
        min-height:auto;
        padding:35px 25px 40px;
        align-items:flex-start;

        background-size:520px auto !important;
        background-position:right top !important;
        background-repeat:no-repeat !important;
    }


    .hero-content {
        max-width:100%;
        position:relative;
        z-index:2;
    }


    .hero h1 {
        font-size:54px;
        line-height:.95;
        max-width:300px;
        margin-bottom:18px;
    }


    .hero h2 {
        font-size:21px;
        line-height:1.35;
        max-width:320px;
        margin-bottom:15px;
    }


    .hero p {
        font-size:15px;
        line-height:1.6;
        max-width:320px;
    }



/* =========================
   Section headings mobile
   ========================= */

.journey h2,
.solutions h2,
.specialists h2,
.assessment-section h2,
.content-section h2 {

    font-size:38px;
    line-height:1.1;

}


.journey h3,
.solutions h3,
.specialists h3 {

    font-size:22px;
    line-height:1.3;

}


    /* =========================
       Journey
       ========================= */


    .journey-step span {

        font-size:32px;

    }


    .journey-step h4 {

        font-size:21px;
        line-height:1.3;

    }



    /* =========================
       Body text
       ========================= */


    p {

        font-size:16px;
        line-height:1.6;

    }



    /* =========================
       Section spacing
       ========================= */


    section {

        padding-top:40px;
        padding-bottom:40px;

    }



    /* =========================
       Cards
       ========================= */


    .card,
    .journey-card,
    .step,
    .service-card,
    .solution-card,
    .specialist-card {

        margin-bottom:25px;
        padding:25px;

    }



    /* =========================
       Dividers
       ========================= */


    .gold-divider {

        margin-top:20px;
        margin-bottom:20px;

    }

}



/* =========================
   Smaller phones
   ========================= */

@media (max-width:390px) {


    .logo .mark {

        width:75px;
        height:75px;

    }


    .logo .wordmark {

        width:230px;

    }


    .hero {

        background-size:430px auto !important;

    }


    .hero h1 {

        font-size:50px;

    }


    .journey h2,
    .solutions h2,
    .specialists h2,
    .assessment-section h2,
    .content-section h2 {

        font-size:34px;

    }

}