:root {--primary: #bea673}
.home-content * {box-sizing: border-box}
.col {padding-left: 2%; padding-right: 2%}
#wrapper.homepageinternal .home-content p { font-size:16px; margin: 0 0 20px}
.home-content section { display: flex;  justify-content: center;    background-size: cover}
.home-content section > div {display: flex; flex-flow: wrap}
section.about {background-image: url(/wp-content/uploads/2023/11/img_bg_tile.png)}
section.about > div {max-width: 1600px}
section.about .box {z-index: 1; display: flex;  gap: 20px 4%;   padding: calc(20px + 3%) 4%;    background-color: #19433e;  box-shadow: 0 20px 50px rgb(0 0 0 / 50%);   flex-wrap: wrap}
section.about .box p {  line-height: 1.8}
#wrapper.homepageinternal section.about .box h2 {   font-size: clamp(30px, 3vw, 48px)}
#wrapper.homepageinternal section.about .box p, #wrapper.homepageinternal section.about .box h2, section.about .box h3 {    color: #fff}
#wrapper.homepageinternal section.about .box h3 {   color: #fff;    font-size: 18px;    font-family: var(--font-sans);  text-transform: uppercase;  line-height: 1.4;}
section.about .box hr { height: 2px;    border: 0;  background: #fff;   max-width: 7em}
section.about .box .col-r { flex: 2}
section.review {background: #19433e}
section.review > div {  max-width: 1500px}
section.review .review-wrap {   display: flex;  flex-flow: wrap;    padding: 0 20px}
section.review p {  color: #fff}
#wrapper.homepageinternal .home-content section.review .reviewer {  font-family: 'Playfair Display'}
#wrapper.homepageinternal section.review .best-title h3, #wrapper.homepageinternal section.review .best-title p {   color: #fff}
section.review .best-title {    text-align: center; margin: 0 auto 2%}
section.review .best-title > p {    max-width: 1144px}
#wrapper.homepageinternal section.review .best-title h3 {   font-size: clamp(26px, 3vw, 40px)}
section.review .badges {    display: flex;  align-items: end;   gap: 20px;  filter: drop-shadow(0 0 15px #000)}
section.review .five-col {  display: flex;  align-items: center;    gap: 0 clamp(10px, 2vw, 30px);    max-width: 28em;  justify-content: center;    margin-right: auto; margin-left: auto}
section.review .five-hundred {    transform: matrix(1.2, 0, 0, 1, 0, 0);    font-size: clamp(48px, 6vw, 96px);    font-weight: 300;    color: var(--primary);    padding: 0 10px;   line-height: 1; flex: none}
section.review .five-text { font-family: 'Playfair Display';    font-size: clamp(24px, 3vw, 34px);  line-height: 1.2;   color: #fff}
section.review .name {  color: var(--primary) !important;   font-size: 22px !important;}
section.review .stars { color: #ffd100} 
section.review .review-wrap > hr {  width: 100%;    background: var(--primary);    height: 3px;    border: none;    margin: 20px 0 0}
section.review .miniboxes { z-index: 1; display: flex;  margin: 0 auto; max-width: 1384px;  flex-wrap: wrap;    gap: 3%}
section.review .miniboxes > div {   background: #fff;    padding: 20px; display: flex;    flex-wrap: wrap;  box-shadow: 1px 12px 29px rgb(45 45 45 / 50%)}
section.review .miniboxes > div > div { display: flex;  gap: 15px}
#wrapper.homepageinternal section.review .miniboxes .reviewer { margin: 0;  font-weight: 700;    font-size: 20px;    height: min-content}
section.review .miniboxes > div hr {    background: var(--primary);    border: none;    height: 2px;    width: 100%;    align-self: flex-end    }
section.review .miniboxes > div > div svg { flex: none; fill: var(--primary)}
#wrapper.homepageinternal section.review .miniboxes > div > div h4 {    font-size: 20px;    font-family: 'Playfair Display'}    
#wrapper.homepageinternal section.review .miniboxes > div p {   color: #303030}
section.review .map {   display: flex;  flex-flow: wrap;    padding: clamp(5em, 10vw, 7em) 4% 4%;   background-image: url(/wp-content/uploads/2024/11/Map-parking-honolulu.png);background-position:bottom;   border-bottom: 4px solid var(--primary);    margin-top: 4em}
#wrapper.homepageinternal section.review .map p {   color: #19433e}
#wrapper.homepageinternal section.review .map h3 {  font-size: clamp(24px, 3vw, 30px);  font-family: var(--font-sans);  color: #303030; font-weight: 600;    line-height: 1.5;  margin-bottom: 5px}
#wrapper.homepageinternal section.review .map h4 {  font-family: 'Playfair Display';    font-size: clamp(24px, 3vw, 42px);  -webkit-text-stroke: 1px;   line-height: 1.4;   color: #19433e}
section.review .map .col-r {    display: flex;  gap: 20px}
section.review .map .col-r > div {  max-width: clamp(22em, 28vw, 30em); display: flex;  gap: clamp(15px, 1.2vw, 20px);  flex: 1}
section.review .map a.button {  flex: 1;    font-size: clamp(14px, 1.2vw, 20px);    padding: clamp(10px, 1.2vw, 15px) clamp(7px, 1.2vw, 10px)}
section.review .map a.button-green {    background-color: #19433e}
section.review .locations {
    display: flex;
    flex-flow: wrap;
    flex: 1
}
section.review .office p {
    margin-bottom: 10px
}
#wrapper.homepageinternal section.review .office h4 {
    font-size: clamp(20px, 2vw, 26px);
    text-transform: uppercase;
    font-family: 'Playfair Display';
    margin-bottom: 10px
}
#wrapper.homepageinternal section.review .office h4 a {
    color: var(--primary)
}
section.review .location-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}
#wrapper.homepageinternal section.review .location-title h3 {
    font-family: 'Playfair Display';
    font-size: clamp(24px, 3vw, 45px);
    font-weight: 400;
    max-width: fit-content;
    color: #fff
}
section.review .location-title strong {
    font-weight: 400
}
#wrapper.homepageinternal section.review .locations a {
    color: #fff
}
#wrapper.homepageinternal section.review .locations .map-links, #wrapper.homepageinternal section.review .locations .map-links a {
    color: var(--primary)
}
section.credit {
    flex-wrap:wrap;
    padding:20px;
    max-width: 1520px;
    margin: 0 auto;
    position:relative;
    column-gap: 20px
}
section.credit:before {
    content:'';
    border-bottom: 7px solid var(--primary);
    width: 100vw;
    position: absolute;
    bottom: -7px
}
section.credit h3 {
    line-height: 1.2;
    font-size: clamp(30px, 3vw, 43px);
    align-content: center;
    margin: 0
}   
section.credit h3 em {
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(22px, 3.5vw, 27px);
    font-family: var(--font-sans);
    color: #133830
}
section.credit picture,
section.credit img {
    align-self: center;
}
footer#footer {
    content-visibility: visible;
}
.review .text-bottom {
    display: flex;
    gap: 20px;
    justify-content: center;
    border-bottom: 4px solid var(--e-global-color-accent);
}
.review .text-bottom>div:not(.title-col) {
    width: 20%;
    border-left: 2px solid #c9b591;
    padding: 0 12px;
    margin-top: 20px
}
.review .text-bottom .title-col{
    display:flex;
    align-items: center;
}
section.review .map{
    background-color:white
}
.review .title-col .title{
    color: var(--primary);
    font-size: clamp(20px, 2vw, 26px);
    text-transform: uppercase;
    font-family: 'Playfair Display';
    margin:0;
    max-width: 240px;
    text-wrap:balance;
}
@media (min-width:1025px){
    section.credit > img {
        flex: 1.5
    }
    section.about .box {
        margin-bottom: -10em
    }
    section.review {
        padding-top: 14em
    }
    section.review .location-title strong {
        display: block;
    }
    section.about {
        padding-top: 4%
    }
    section.about .box .col-l {
        flex: 1
    }
    section.about .box hr {
        margin-left: 0
    }
    section.review .map {
        background-position: 60%
    }
    section.review .map .col-r {
        align-items: center
    }
    section.review .office {
        border-left: 3px solid var(--primary)
    }
    section.review .location-title {
        flex: 1.5
    }
    section.credit > div {
        flex: 1;
        border-left: 1px solid var(--primary);
        padding-left: 20px
    }
}
@media(max-width:800px){
    .review .text-bottom{
        flex-wrap:wrap;
    }
    .review .text-bottom .title-col{
        text-align:center;
        width:100%;
        margin-top:32px;
        justify-content: center;
    }
    .review .text-bottom>div:not(.title-col){
        width:30%;
        text-align:center;
        padding-top:12px
    }
    .review .text-bottom>div.col-1{
        border-left:none
    }
}
@media (min-width:769px){
    section.review .office {
        padding: 30px 3%
    }
    section.about .box {
        background-size: cover;
        background-image: url(/wp-content/uploads/2024/02/img_intro_bg_1.webp)
    }
    .col-40 {
        align-content: center;
        flex: 40%
    }
    .col-60 {
        flex: 60%
    }
    section.review .col-40 {
        border-right: 3px solid var(--primary)
    }
    section.review .miniboxes > div {
        flex: 1
    }
    section.review .map {
        background-size: cover;
        background-image: url(/wp-content/uploads/2024/11/Map-parking-honolulu.png)
    }
    section.review .map .col-l, section.review .map .col-r {
        flex: 1
    }
    section.review .map .col-r {
        justify-content: end
    }
}
@media (max-width:1024px) and (min-width:769px){
    section.review .office {
        flex: 1
    }
    section.review .office.mid {
        border-left: 2px solid var(--primary);
        border-right: 2px solid var(--primary)
    }
    section.review .map .col-r {
        align-items: end
    }
    section.review .map {
        background-position: 45%
    }
}
@media (max-width:768px) and (min-width:501px){
    section.review .office {
        flex: 50%
    }
}
@media (max-width:1024px){
    section.credit img {
        padding-top:20px;
    }
    body.page-template-new-home-template #banner .banner-area {
        padding-top: 10em;
        padding-bottom: 0
    }
    body #main .home-content section.review {
        padding-top: 40px !important
    }
    section.review .office,
    section.about .box,
    section.credit {
        text-align: center
    }
    section.review .location-title {
        flex: 100%
    }
    section.review .five-col {
        margin-bottom: 20px
    }
    section.review .five-text {
        text-align: center
    }
}
@media (max-width:768px){
    section.review .review-wrap {
        text-align: center
    }
    section.review .miniboxes > div {
        justify-content: center;
        margin-bottom: 20px
    }
    section.review .miniboxes > div > div {
        flex-flow: column;
        align-items: center
    }
    section.review .col-40 {
        padding-bottom: 20px;
        border-bottom: 4px solid var(--primary);
        margin-bottom: 20px
    }
    section.review .map {
        text-align: center;
        background: linear-gradient(0deg, #c9c9c9 0%, #c9bca5 60%)
    }
    section.review .map .col-l, section.review .map .col-r {
        flex: 100%
    }
    section.review .map .col-r {
        justify-content: center
    }
}
@media(max-width:600px){
    .review .text-bottom>div:not(.title-col){
        border-left:none;
        width:100%;
        max-width: 300px;
        padding-top:0;
        margin-top:0
    }
}
@media (max-width:500px){
    section.about .box, section.review {
        text-align: center
    }
    section.review .office.mid {
        padding-top: 20px;
        border-bottom: 3px solid var(--primary);
        border-top: 3px solid var(--primary);
        margin-bottom: 20px
    }
    section.review .col-40 {
        border-bottom: 3px solid var(--primary);
        margin-bottom: 20px;
        padding-bottom: 20px
    }
    section.review .office {
        flex: 100%
    }
    section.review .office:last-child {
        margin-bottom:20px
    }
    section.review .location-title h3 {
        margin-bottom:0 !important;
    }
}