@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
#r8_content p {
  font-family: "Karla", sans-serif;
}
#r8_content h1 {font-family: 'Playfair Display'; serif; font-weight:500;}
#r8_content h3 {font-family: 'Playfair Display', serif; font-weight:500;}

#r8_content .parallax01 {background-image: url(/shared/images/content/bus_58001/14.__Request_a_Conversation_-_Hero-16x9.jpg?nocache=221); 
background-attachment: fixed; 
background-position-x: right; 
background-position-y: top;}
.parallax-light {background-color: rgba(32,38,42,0.6); margin-top:-15px; color:#FFF;}

.jh-border-and-box1 {background-color:#E8EAE6;
padding:20px; min-height:0px;
    border-top: 5px solid #27B8D1; 
  border-bottom: 1px solid #C9D0D3; 
  border-left: 1px solid #C9D0D3; 
  border-right: 1px solid #C9D0D3;  margin: 5px ;
margin-top: 1em ; display:block;}

.jh-border-and-box2 {background-color:#E8EAE6;
padding:20px; min-height:0px;
    border-top: 5px solid #27B8D1; 
  border-bottom: 1px solid #C9D0D3; 
  border-left: 1px solid #C9D0D3; 
  border-right: 1px solid #C9D0D3;  margin: 5px ;
margin-top: 1em ; display:block;}

.jh-solid-box1 {background-color:#20262A;
padding:20px; min-height:0px; display:block;}

.jh-solid-box2 {background-color:#E8EAE6; border: #C9D0D3 solid 1px;
padding:20px; min-height:0px; display:block;}

.jh-solid-box21 {background-color:#E8EAE6;
border-top: 5px solid #27B8D1; 
  border-bottom: 1px solid #C9D0D3; 
  border-left: 1px solid #C9D0D3; 
  border-right: 1px solid #C9D0D3;
padding:20px; min-height:0px; display:block;}

.jh-solid-box3 {background-color:#FFFFFF; border: #C9D0D3 solid 1px;
padding:10px; min-height:0px; display:block;}

.jh-solid-box4 {background-color:#20262A;
padding:10px; min-height:0px; display:block;}

.jh-solid-box5 {background-color:#F1F2EE; border-top: 1px solid #C9D0D3; border-left: 5px solid #27B8D1; border-bottom: 1px solid #C9D0D3; border-right: 1px solid #C9D0D3;
padding:10px; min-height:0px; display:block;}
.process-section{

    --accent:#27B8D1;
    --highlight:#A8DDE8;
    --bg:#F1F2EE;
    --border:#BAC3C7;
    --divider:#E7EBEC;
    --text:#242A2E;
    --body:#475056;
    --muted:#BAC3C7;

    max-width:1280px;
    margin:auto;
    padding:2rem 0;
}

.process-heading{

    text-align:center;
    margin-bottom:.5rem;
}

.process-intro{

    text-align:center;
    max-width:760px;
    margin:0 auto 3rem;
    color:var(--body);
}

.process-flow{

    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:24px;
}

.step-box{

    flex:1;
    min-width:240px;

    background:var(--bg);

    border:1px solid var(--border);
    border-top:8px solid var(--accent);

    border-radius:4px;

    padding:2rem;

    display:flex;
    flex-direction:column;
}

.step-number{

    font-size:2.4rem;
    font-weight:700;
    color:var(--muted);
    text-align:center;
}

.step-label{

    margin-top:.5rem;
    margin-bottom:1rem;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.72rem;

    color:var(--accent);
}

.step-title{

    text-align:center;
    margin:0;
}

.step-divider{

    height:1px;
    background:var(--divider);
    margin:1.5rem 0;
}

.step-list{

    list-style:none;
    margin:0;
    padding:0;

    flex:1;
}

.step-list li{

    position:relative;

    padding-left:18px;

    margin-bottom:14px;

    line-height:1.45;

    color:var(--body);
}

.step-list li::before{

    content:"";

    position:absolute;

    left:0;
    top:.55em;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--accent);
}

.step-note{

    margin-top:auto;

    text-align:center;

    font-size:.85rem;

    color:var(--muted);

    font-style:italic;
}

/* Arrow */

.process-arrow{

    width:46px;
    flex:none;

    position:relative;
}

.process-arrow::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;
    right:12px;

    height:2px;

    background:var(--accent);
}

.process-arrow::after{

    content:"";

    position:absolute;

    right:0;

    top:calc(50% - 7px);

    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:12px solid var(--accent);
}

/* Highlight card */

.step-box--highlight{

    background:var(--highlight);

    border-color:var(--accent);
}

.step-box--highlight .step-number{

    color:var(--accent);
}

.step-box--highlight .step-label{

    color:var(--text);
}

.step-box--highlight .step-divider{

    background:var(--accent);
}

.step-box--highlight .step-list li{

    color:var(--text);
}

.step-box--highlight .step-list li::before{

    background:var(--text);
}

.step-box--highlight .step-note{

    color:#1A5A63;
}

/* Advisory note */

.process-credit{

    margin:2.5rem auto 0;

    max-width:520px;

    background:var(--bg);

    border:1px solid var(--border);
    border-left:4px solid var(--accent);

    padding:1rem 1.5rem;

    text-align:center;

    color:var(--body);
}

/* Mobile */

@media (max-width:980px){

    .process-flow{

        flex-direction:column;
    }

    .process-arrow{

        width:2px;
        height:40px;
        margin:0 auto;
    }

    .process-arrow::before{

        top:0;
        bottom:12px;
        left:0;
        right:0;

        width:2px;
        height:auto;
    }

    .process-arrow::after{

        left:50%;
        right:auto;
        top:auto;
        bottom:0;

        transform:translateX(-50%) rotate(90deg);
    }

}

.jh-hover-box {
    display: block;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px 15px; 
    text-decoration: none !important;
    transition: all 0.25s ease;
min-height: 0px;
 margin-bottom: 10px; 
}
  .jh-hover-box:hover {background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);}
