:root{

--maroon:#800000;
--cream:#F4E1D8;
--white:#ffffff;
--text:#382826;

--display:'Fraunces',serif;
--body:'Public Sans',sans-serif;

}

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

body{

font-family:var(--body);

background:#fff;

color:var(--text);

}

.contact-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

background:

linear-gradient(120deg,#5f0000 0%,#800000 60%,#9a2222 100%);

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(110deg,
rgba(61,15,27,.88),
rgba(61,15,27,.65),
rgba(61,15,27,.35));

}

.hero-light{

position:absolute;

width:500px;
height:500px;

right:-120px;
top:-120px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(244,225,216,.18),
transparent 70%);

animation:floatLight 10s ease-in-out infinite alternate;

}

.hero-container{

position:relative;

z-index:2;

width:min(1280px,92%);

margin:auto;

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

.hero-eyebrow{

display:flex;

align-items:center;

gap:12px;

color:var(--cream);

font-size:12px;

font-weight:700;

letter-spacing:.16em;

margin-bottom:20px;

}

.hero-eyebrow::before{

content:"";

width:28px;

height:1px;

background:var(--cream);

}

.hero-left h1{

font-family:var(--display);

font-size:clamp(48px,6vw,72px);

font-weight:560;

line-height:1.05;

color:white;

margin-bottom:25px;

}

.hero-left span{

font-style:italic;

color:var(--cream);

}

.hero-text{

max-width:600px;

font-size:18px;

line-height:1.8;

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

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

}

.btn-primary,
.btn-secondary{

padding:16px 28px;

border-radius:4px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.btn-primary{

background:var(--cream);

color:var(--maroon);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

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

color:white;

}

.btn-secondary:hover{

background:white;

color:var(--maroon);

}

.contact-card{

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

padding:36px;

border-radius:28px;

box-shadow:0 25px 60px rgba(0,0,0,.16);

backdrop-filter:blur(10px);

animation:cardFloat 6s ease-in-out infinite;

}

.contact-item{

display:flex;

gap:18px;

align-items:flex-start;

padding:20px 0;

border-bottom:1px solid rgba(0,0,0,.08);

}

.contact-item:last-child{

border:none;

padding-bottom:0;

}

.icon{

width:56px;
height:56px;

border-radius:50%;

display:grid;

place-items:center;

background:#f8efeb;

}

.icon svg{

width:22px;

fill:var(--maroon);

}

.contact-item h4{

font-family:var(--display);

font-size:24px;

margin-bottom:6px;

}

.contact-item p{

color:#666;

line-height:1.6;

}

.hero-scroll{

position:absolute;

left:40px;

bottom:30px;

display:flex;

align-items:center;

gap:12px;

color:white;

font-size:12px;

letter-spacing:.15em;

text-transform:uppercase;

}

.hero-scroll .line{

width:1px;

height:34px;

background:linear-gradient(white,transparent);

animation:scroll 1.8s infinite;

}

@keyframes floatLight{

to{

transform:translate(-40px,40px) scale(1.1);

}

}

@keyframes cardFloat{

50%{

transform:translateY(-8px);

}

}

@keyframes scroll{

50%{

transform:scaleY(1.4);

}

}

@media(max-width:980px){

.hero-container{

grid-template-columns:1fr;

}

.contact-card{

margin-top:20px;

}

}

@media(max-width:600px){

.hero-buttons{

flex-direction:column;

}

.hero-scroll{

display:none;

}

.hero-left h1{

font-size:42px;

}

}

/*=====================================
HAVE QUESTIONS
======================================*/

.questions-section{

padding:120px 32px;

background:#fcf8f7;

}

.questions-heading{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.questions-eyebrow{

font-size:12px;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:#800000;

margin-bottom:18px;

display:inline-flex;

align-items:center;

gap:12px;

}

.questions-eyebrow::before{

content:"";

width:30px;

height:1px;

background:#800000;

}

.questions-heading h2{

font-family:"Fraunces",serif;

font-size:52px;

margin-bottom:18px;

color:#2d1a17;

}

.questions-heading p{

font-size:18px;

line-height:1.8;

color:#666;

}

.questions-grid{

max-width:1280px;

margin:auto;

display:grid;

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

gap:28px;

}

.question-card{

background:white;

border-radius:24px;

padding:45px 35px;

text-align:center;

text-decoration:none;

color:inherit;

border:1px solid rgba(128,0,0,.08);

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

transition:.35s;

position:relative;

overflow:hidden;

}

.question-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:#800000;

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.question-card:hover::before{

transform:scaleX(1);

}

.question-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 60px rgba(128,0,0,.12);

}

.question-card lord-icon{

margin-bottom:25px;

}

.question-card h3{

font-family:"Fraunces",serif;

font-size:30px;

margin-bottom:18px;

color:#2d1a17;

}

.question-card p{

font-size:16px;

line-height:1.8;

color:#666;

margin-bottom:28px;

}

.question-card span{

font-weight:700;

color:#800000;

transition:.3s;

display:inline-block;

}

.question-card:hover span{

transform:translateX(6px);

}

@media(max-width:992px){

.questions-grid{

grid-template-columns:1fr;

}

}

/*==================================================
    HOME BUYER KNOWLEDGE HUB
    PART 2A-1
==================================================*/

.buyer-hub{

    position:relative;
    overflow:hidden;

    padding:140px 0;

    background:#fcf8f7;

}


/*=========================================
BACKGROUND DECORATION
=========================================*/

.hub-bg{

    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(120px);

}

.hub-bg-1{

    width:420px;
    height:420px;

    top:-180px;
    left:-120px;

    background:rgba(128,0,0,.07);

}

.hub-bg-2{

    width:360px;
    height:360px;

    right:-120px;
    bottom:-100px;

    background:rgba(244,225,216,.9);

}

.hub-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(128,0,0,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(128,0,0,.03) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.45;

    pointer-events:none;

}


/*=========================================
CONTAINER
=========================================*/

.buyer-container{

    width:min(1280px,92%);
    margin:auto;

    position:relative;
    z-index:2;

}


/*=========================================
SECTION HEADING
=========================================*/

.hub-heading{

    text-align:center;
    max-width:760px;

    margin:auto auto 110px;

}

.hub-eyebrow{

    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--maroon);

    font-size:12px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:20px;

}

.hub-eyebrow::before{

    content:"";

    width:32px;
    height:1px;

    background:var(--maroon);

}

.hub-heading h2{

    font-family:var(--display);

    font-size:clamp(44px,5vw,64px);

    font-weight:560;

    color:#2d1a17;

    line-height:1.1;

    margin-bottom:24px;

}

.hub-heading h2 span{

    color:var(--maroon);
    font-style:italic;

}

.hub-heading p{

    color:#666;

    line-height:1.9;

    font-size:18px;

}


/*=========================================
VERTICAL TIMELINE
=========================================*/

.hub-progress{

    position:fixed;

    right:35px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:22px;

    align-items:center;

    z-index:100;

}

.progress-line{

    position:absolute;

    top:0;
    bottom:0;

    width:2px;

    background:rgba(128,0,0,.12);

    z-index:-1;

}

.progress-item{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    border:1px solid rgba(128,0,0,.08);

    color:var(--maroon);

    font-weight:700;

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

    transition:.35s;

}

.progress-item.active{

    background:var(--maroon);

    color:white;

    transform:scale(1.12);

    box-shadow:0 18px 40px rgba(128,0,0,.25);

}


/*=========================================
INDIVIDUAL PANELS
=========================================*/

.hub-panel{

    position:relative;

    min-height:90vh;

    display:flex;

    align-items:center;

    margin-bottom:80px;

}

.hub-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    width:100%;

}

.hub-panel.reverse .hub-content{

    direction:rtl;

}

.hub-panel.reverse .hub-left,
.hub-panel.reverse .hub-right{

    direction:ltr;

}


/*=========================================
BACKGROUND NUMBER
=========================================*/

.hub-number{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    font-size:240px;

    font-weight:700;

    font-family:var(--display);

    color:rgba(128,0,0,.05);

    user-select:none;

    pointer-events:none;

}


/*=========================================
TEXT AREA
=========================================*/

.hub-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--maroon);

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

.hub-left h3,
.hub-right h3{

    font-family:var(--display);

    color:#2d1a17;

    font-size:clamp(36px,4vw,52px);

    line-height:1.15;

    margin-bottom:22px;

}

.hub-left p,
.hub-right p{

    color:#666;

    line-height:1.9;

    font-size:17px;

}

/*==================================================
    HOME BUYER KNOWLEDGE HUB
    PART 2A-2
==================================================*/


/*=========================================
FLOATING ILLUSTRATION CARD
=========================================*/

.floating-card{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:340px;

    height:340px;

    margin:auto;

    background:#ffffff;

    border-radius:32px;

    border:1px solid rgba(128,0,0,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);

    transition:.45s ease;

    overflow:hidden;

}

.floating-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(244,225,216,.75),
            transparent 65%
        );

    pointer-events:none;

}

.floating-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:rgba(128,0,0,.05);

    top:-60px;

    right:-60px;

}

.floating-card:hover{

    transform:
        translateY(-10px)
        rotate(-1deg);

    box-shadow:
        0 35px 80px rgba(128,0,0,.16);

}

.floating-card lord-icon{

    position:relative;

    z-index:2;

}


/*=========================================
PILL LIST
=========================================*/

.hub-left ul{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:35px;

    padding:0;

}

.hub-left ul li{

    list-style:none;

    padding:14px 24px;

    border-radius:100px;

    background:#fff;

    color:var(--maroon);

    border:1px solid rgba(128,0,0,.08);

    font-weight:600;

    transition:.35s;

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

}

.hub-left ul li:hover{

    background:var(--maroon);

    color:#fff;

    transform:translateY(-4px);

}


/*=========================================
MINI FEATURES
=========================================*/

.mini-features{

    display:grid;

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

    gap:18px;

    margin-top:40px;

}

.mini-features div{

    background:#fff;

    border-radius:20px;

    padding:22px 16px;

    text-align:center;

    border:1px solid rgba(128,0,0,.08);

    font-weight:700;

    color:#2d1a17;

    transition:.35s;

    box-shadow:
        0 15px 35px rgba(0,0,0,.05);

}

.mini-features div:hover{

    transform:translateY(-8px);

    border-color:var(--maroon);

}


/*=========================================
LOAN TYPES
=========================================*/

.loan-types{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.loan-box{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:28px 34px;

    border:1px solid rgba(128,0,0,.08);

    box-shadow:
        0 16px 45px rgba(0,0,0,.05);

    transition:.4s;

    overflow:hidden;

}

.loan-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--maroon);

}

.loan-box span{

    font-family:var(--display);

    font-size:28px;

    color:#2d1a17;

}

.loan-box:hover{

    transform:
        translateX(12px);

    box-shadow:
        0 28px 60px rgba(128,0,0,.12);

}


/*=========================================
BENEFITS GRID
=========================================*/

.benefit-grid{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.benefit-grid div{

    background:#fff;

    padding:24px;

    border-radius:20px;

    border:1px solid rgba(128,0,0,.08);

    font-weight:700;

    color:#2d1a17;

    box-shadow:
        0 16px 35px rgba(0,0,0,.05);

    transition:.35s;

    position:relative;

    padding-left:58px;

}

.benefit-grid div::before{

    content:"✓";

    position:absolute;

    left:24px;

    top:50%;

    transform:translateY(-50%);

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--maroon);

    color:#fff;

    font-size:12px;

}

.benefit-grid div:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 60px rgba(128,0,0,.12);

}


/*=========================================
CTA
=========================================*/

.hub-cta{

    margin-top:120px;

    background:#fff;

    border-radius:36px;

    padding:70px;

    text-align:center;

    border:1px solid rgba(128,0,0,.08);

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

}

.hub-cta span{

    display:inline-block;

    color:var(--maroon);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

.hub-cta h3{

    font-family:var(--display);

    font-size:clamp(36px,4vw,56px);

    color:#2d1a17;

    margin-bottom:20px;

}

.hub-cta p{

    max-width:720px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:18px;

    margin-bottom:40px;

}


/*=========================================
BUTTON
=========================================*/

.hub-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    background:var(--maroon);

    color:#fff;

    text-decoration:none;

    border-radius:6px;

    font-weight:700;

    transition:.35s;

    box-shadow:
        0 18px 40px rgba(128,0,0,.22);

}

.hub-btn:hover{

    transform:translateY(-5px);

    background:#660000;

    box-shadow:
        0 28px 60px rgba(128,0,0,.30);

}

/*==================================================
        HOME BUYER HUB
        PART 2B-1
==================================================*/


/*=========================================
GLOBAL TRANSITIONS
=========================================*/

.hub-panel,
.floating-card,
.loan-box,
.benefit-grid div,
.mini-features div,
.hub-left ul li,
.hub-btn{

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease;

}


/*=========================================
REVEAL ANIMATION
=========================================*/

.reveal{

    opacity:0;

    transform:
        translateY(80px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,.61,.36,1);

}

.reveal.active{

    opacity:1;

    transform:
        translateY(0);

}


/*=========================================
LEFT REVEAL
=========================================*/

.reveal-left{

    opacity:0;

    transform:
        translateX(-80px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,.61,.36,1);

}

.reveal-left.active{

    opacity:1;

    transform:
        translateX(0);

}


/*=========================================
RIGHT REVEAL
=========================================*/

.reveal-right{

    opacity:0;

    transform:
        translateX(80px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,.61,.36,1);

}

.reveal-right.active{

    opacity:1;

    transform:
        translateX(0);

}


/*=========================================
ZOOM REVEAL
=========================================*/

.reveal-zoom{

    opacity:0;

    transform:scale(.9);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal-zoom.active{

    opacity:1;

    transform:scale(1);

}


/*=========================================
FLOATING CARD
=========================================*/

.floating-card{

    animation:

        floatingCard 7s ease-in-out infinite;

}

@keyframes floatingCard{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-12px);

    }

    100%{

        transform:
        translateY(0px);

    }

}


/*=========================================
LORD ICON
=========================================*/

.floating-card lord-icon{

    animation:

        iconFloat 6s ease-in-out infinite;

}

@keyframes iconFloat{

    0%{

        transform:
        rotate(0deg);

    }

    50%{

        transform:

        translateY(-6px)

        rotate(2deg);

    }

    100%{

        transform:
        rotate(0deg);

    }

}


/*=========================================
NUMBER PARALLAX
=========================================*/

.hub-number{

    transition:

        transform .8s ease,

        opacity .6s ease;

}

.hub-panel:hover .hub-number{

    transform:

        translate(-50%,-50%)

        scale(1.08);

    opacity:.08;

}


/*=========================================
CARD SHIMMER
=========================================*/

.loan-box,
.floating-card,
.benefit-grid div,
.mini-features div{

    overflow:hidden;

}

.loan-box::after,
.floating-card::before,
.benefit-grid div::after,
.mini-features div::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:40%;

    height:300%;

    background:

        rgba(255,255,255,.45);

    transform:

        rotate(25deg);

    transition:.8s;

}

.loan-box:hover::after,
.floating-card:hover::before,
.benefit-grid div:hover::after,
.mini-features div:hover::after{

    left:130%;

}


/*=========================================
HOVER LIFT
=========================================*/

.loan-box:hover,

.benefit-grid div:hover,

.mini-features div:hover,

.hub-left ul li:hover{

    transform:

        translateY(-10px);

}


/*=========================================
TEXT ANIMATION
=========================================*/

.hub-left h3,
.hub-right h3{

    transition:.4s;

}

.hub-panel:hover h3{

    color:var(--maroon);

}


/*=========================================
CTA
=========================================*/

.hub-cta{

    position:relative;

    overflow:hidden;

}

.hub-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(244,225,216,.65),

    transparent 60%);

    pointer-events:none;

}


/*=========================================
BUTTON SHINE
=========================================*/

.hub-btn{

    position:relative;

    overflow:hidden;

}

.hub-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transition:1s;

}

.hub-btn:hover::before{

    left:170%;

}


/*=========================================
BACKGROUND MOVEMENT
=========================================*/

.hub-bg-1{

    animation:

        blobOne 14s ease-in-out infinite;

}

.hub-bg-2{

    animation:

        blobTwo 18s ease-in-out infinite;

}

@keyframes blobOne{

    0%{

        transform:
        translate(0,0);

    }

    50%{

        transform:
        translate(50px,30px);

    }

    100%{

        transform:
        translate(0,0);

    }

}

@keyframes blobTwo{

    0%{

        transform:
        translate(0,0);

    }

    50%{

        transform:
        translate(-40px,-25px);

    }

    100%{

        transform:
        translate(0,0);

    }

}


/*=========================================
TIMELINE HOVER
=========================================*/

.progress-item{

    cursor:pointer;

}

.progress-item:hover{

    transform:

        scale(1.12);

    background:var(--maroon);

    color:#fff;

}


/*=========================================
SECTION SPACING
=========================================*/

.hub-panel:last-of-type{

    margin-bottom:120px;

}

/*==================================================
        HOME BUYER HUB
        PART 2B-2
        RESPONSIVE + FINAL POLISH
==================================================*/


/*=========================================
LARGE LAPTOPS
=========================================*/

@media (max-width:1300px){

    .hub-content{

        gap:60px;

    }

    .hub-number{

        font-size:190px;

    }

}


/*=========================================
TABLETS
=========================================*/

@media (max-width:992px){

    .buyer-hub{

        padding:100px 0;

    }

    .hub-progress{

        display:none;

    }

    .hub-panel{

        min-height:auto;

        margin-bottom:100px;

    }

    .hub-content{

        grid-template-columns:1fr;

        gap:50px;

    }

    .hub-panel.reverse .hub-content{

        direction:ltr;

    }

    .hub-left,
    .hub-right{

        text-align:center;

    }

    .hub-left ul{

        justify-content:center;

    }

    .floating-card{

        width:300px;

        height:300px;

    }

    .hub-number{

        font-size:150px;

    }

    .mini-features{

        grid-template-columns:1fr;

    }

    .benefit-grid{

        grid-template-columns:1fr 1fr;

    }

    .loan-types{

        max-width:500px;

        margin:auto;

    }

    .hub-cta{

        padding:60px 40px;

    }

}


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

@media (max-width:768px){

    .buyer-hub{

        padding:80px 0;

    }

    .hub-heading{

        margin-bottom:70px;

    }

    .hub-heading h2{

        font-size:40px;

    }

    .hub-heading p{

        font-size:16px;

    }

    .hub-panel{

        margin-bottom:80px;

    }

    .hub-content{

        gap:40px;

    }

    .hub-number{

        display:none;

    }

    .floating-card{

        width:240px;

        height:240px;

        border-radius:24px;

    }

    .floating-card lord-icon{

        width:130px !important;

        height:130px !important;

    }

    .hub-left h3,
    .hub-right h3{

        font-size:34px;

    }

    .hub-left p,
    .hub-right p{

        font-size:16px;

        line-height:1.8;

    }

    .loan-box{

        padding:22px;

    }

    .loan-box span{

        font-size:22px;

    }

    .benefit-grid{

        grid-template-columns:1fr;

    }

    .hub-cta{

        padding:45px 30px;

        border-radius:28px;

    }

    .hub-cta h3{

        font-size:34px;

    }

    .hub-btn{

        width:100%;

        justify-content:center;

    }

}


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

@media (max-width:480px){

    .hub-eyebrow{

        font-size:11px;

    }

    .hub-heading h2{

        font-size:34px;

    }

    .hub-left h3,
    .hub-right h3{

        font-size:30px;

    }

    .hub-left p,
    .hub-right p{

        font-size:15px;

    }

    .hub-left ul{

        gap:10px;

    }

    .hub-left ul li{

        width:100%;

        text-align:center;

    }

    .floating-card{

        width:210px;

        height:210px;

    }

    .loan-box{

        padding:20px;

    }

    .loan-box span{

        font-size:20px;

    }

    .hub-cta{

        padding:35px 22px;

    }

    .hub-btn{

        padding:16px 24px;

        font-size:15px;

    }

}


/*=========================================
SMOOTH SCROLL
=========================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================
SELECTION
=========================================*/

::selection{

    background:var(--maroon);

    color:#fff;

}


/*=========================================
FOCUS
=========================================*/

.hub-btn:focus,
.loan-box:focus{

    outline:3px solid rgba(128,0,0,.2);

    outline-offset:4px;

}


/*=========================================
IMAGE HOVER PARALLAX
=========================================*/

.hub-panel:hover .floating-card{

    transform:

        translateY(-12px)

        rotate(-2deg)

        scale(1.02);

}


/*=========================================
LOAN CARD GLOW
=========================================*/

.loan-box:hover{

    border-color:var(--maroon);

}


/*=========================================
CTA HOVER
=========================================*/

.hub-cta:hover{

    box-shadow:

        0 40px 80px rgba(128,0,0,.10);

}


/*=========================================
SUBTLE FADE
=========================================*/

.hub-panel{

    transition:.5s ease;

}

.hub-panel:hover{

    transform:translateY(-4px);

}

/* ==========================================================
   TRUST SECTION
========================================================== */

.trust-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:
        radial-gradient(circle at top left,#f7ece7 0%,transparent 35%),
        radial-gradient(circle at bottom right,#f3ddd7 0%,transparent 35%),
        linear-gradient(180deg,#fffdfc,#faf7f5);
}

/* ========================================= */

.trust-container{
    width:min(1200px,92%);
    margin:auto;
    position:relative;
    z-index:5;
}

/* ========================================= */

.trust-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(128,0,0,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(128,0,0,.03) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:linear-gradient(to bottom,
        transparent,
        rgba(0,0,0,.8),
        transparent);
    pointer-events:none;
}

/* ========================================= */
/* FLOATING BLOBS */
/* ========================================= */

.trust-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.35;
    animation:floatBlob 12s ease-in-out infinite;
}

.trust-bg-1{
    width:380px;
    height:380px;
    background:#800000;
    top:-120px;
    left:-100px;
}

.trust-bg-2{
    width:300px;
    height:300px;
    background:#F4E1D8;
    right:-80px;
    bottom:-60px;
    animation-delay:4s;
}

@keyframes floatBlob{

    0%,100%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(-40px) scale(1.08);
    }

}

/* ========================================= */
/* HEADING */
/* ========================================= */

.trust-heading{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:90px;
}

.trust-eyebrow{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#fff;

    border:1px solid rgba(128,0,0,.08);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.15em;

    color:#800000;

    margin-bottom:25px;

    box-shadow:
    0 12px 40px rgba(0,0,0,.05);

}

.trust-heading h2{

    font-family:"Fraunces",serif;

    font-size:clamp(2.6rem,5vw,4.3rem);

    line-height:1.1;

    color:#2b1a17;

    margin-bottom:28px;

}

.trust-heading h2 span{

    color:#800000;

    position:relative;

}

.trust-heading h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:8px;

    border-radius:999px;

    background:#F4E1D8;

    z-index:-1;

}

.trust-heading p{

    font-size:1.05rem;

    line-height:1.9;

    color:#555;

}

/* ========================================= */
/* TOP GRID */
/* ========================================= */

.trust-top{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:50px;

    align-items:start;

}

/* ========================================= */
/* LEFT */
/* ========================================= */

.rating-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

    padding:45px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.08),

        inset 0 1px rgba(255,255,255,.9);

    transition:.45s;

}

.rating-card:hover{

    transform:translateY(-8px);

}

.rating-value{

    font-size:4.7rem;

    font-weight:800;

    color:#800000;

    line-height:1;

    margin-bottom:15px;

}

.rating-stars{

    font-size:1.45rem;

    letter-spacing:4px;

    color:#D4AF37;

    margin-bottom:18px;

}

.rating-card h3{

    font-size:1.35rem;

    margin-bottom:14px;

    color:#2b1a17;

}

.rating-card p{

    line-height:1.8;

    color:#666;

}

/* ========================================= */

.trust-badges{

    display:grid;

    gap:15px;

    margin-top:28px;

}

.badge{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    padding:16px 20px;

    border-radius:16px;

    border:1px solid rgba(128,0,0,.08);

    font-weight:600;

    color:#4a3a35;

    transition:.35s;

}

.badge:hover{

    transform:translateX(10px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

/* ========================================= */
/* REVIEW CARD */
/* ========================================= */

.reviews-card{

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

    backdrop-filter:blur(22px);

    border-radius:30px;

    padding:40px;

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

    box-shadow:

        0 40px 90px rgba(0,0,0,.08),

        inset 0 1px rgba(255,255,255,.9);

    transition:.45s;

}

.reviews-card:hover{

    transform:translateY(-10px);

}

.reviews-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:35px;

}

.reviews-label{

    color:#800000;

    font-size:.8rem;

    letter-spacing:.15em;

    font-weight:700;

}

.reviews-header h3{

    margin-top:8px;

    font-size:2rem;

    font-family:"Fraunces",serif;

    color:#2b1a17;

}

.google-pill{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

    padding:12px 20px;

    border-radius:999px;

    font-weight:600;

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

}

.google-pill img{

    width:24px;

}

.trustindex-wrapper{

    min-height:380px;

    border-radius:24px;

    background:#fff;

    padding:20px;

    border:1px solid rgba(128,0,0,.06);

}

/* ==========================================================
   TRUST STATS
========================================================== */

.trust-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:90px 0;
}

.stat-card{
    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);

    border-radius:24px;
    padding:38px 30px;
    text-align:center;

    border:1px solid rgba(128,0,0,.08);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    box-shadow:
        0 25px 60px rgba(0,0,0,.07);
}

.stat-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:70%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transition:1s;

}

.stat-card:hover::before{

    left:130%;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 35px 70px rgba(0,0,0,.12);

}

.stat-card h3{

    font-size:3rem;

    color:#800000;

    margin-bottom:12px;

    font-weight:800;

}

.stat-card p{

    color:#666;

    font-weight:600;

    line-height:1.6;

}

/* ==========================================================
   QUOTE
========================================================== */

.trust-quote{

    position:relative;

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

    padding:60px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #fcf7f4
    );

    box-shadow:
        0 35px 80px rgba(0,0,0,.08);

}

.quote-icon{

    width:54px;

    height:54px;

    fill:#800000;

    opacity:.15;

    margin-bottom:22px;

}

.trust-quote blockquote{

    font-family:"Fraunces",serif;

    font-size:2rem;

    line-height:1.5;

    color:#2b1a17;

}

/* ==========================================================
   CTA
========================================================== */

.trust-cta{

    text-align:center;

    max-width:760px;

    margin:auto;

}

.trust-cta span{

    color:#800000;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.82rem;

    font-weight:700;

}

.trust-cta h3{

    font-family:"Fraunces",serif;

    font-size:clamp(2.2rem,4vw,3.5rem);

    margin:18px 0 20px;

    color:#2b1a17;

}

.trust-cta p{

    color:#666;

    line-height:1.9;

    max-width:620px;

    margin:0 auto 40px;

}

/* ==========================================================
   BUTTON
========================================================== */

.trust-btn{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 36px;

    border-radius:999px;

    background:#800000;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 18px 40px rgba(128,0,0,.25);

}

.trust-btn svg{

    width:20px;

    transition:.35s;

}

.trust-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

}

.trust-btn:hover::before{

    animation:shine .8s linear;

}

.trust-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 55px rgba(128,0,0,.35);

}

.trust-btn:hover svg{

    transform:translateX(6px);

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/* ==========================================================
   REVEAL ANIMATIONS
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

.reveal-left{

    transform:translateX(-80px);

}

.reveal-left.active{

    transform:none;

}

.reveal-right{

    transform:translateX(80px);

}

.reveal-right.active{

    transform:none;

}

.reveal-zoom{

    transform:scale(.9);

}

.reveal-zoom.active{

    transform:scale(1);

}

/* ==========================================================
   FLOATING ANIMATION
========================================================== */

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.rating-card{

    animation:floating 6s ease-in-out infinite;

}

.reviews-card{

    animation:floating 7s ease-in-out infinite;

}

.stat-card:nth-child(2){

    animation:floating 7s ease-in-out infinite;

}

.stat-card:nth-child(4){

    animation:floating 8s ease-in-out infinite;

}

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

@media(max-width:1100px){

.trust-top{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.trust-stats{

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

}

.trust-heading h2{

font-size:3rem;

}

.trust-quote{

padding:45px 35px;

}

.trust-quote blockquote{

font-size:1.7rem;

}

}

@media(max-width:640px){

.trust-section{

padding:90px 0;

}

.trust-stats{

grid-template-columns:1fr;

}

.rating-card,
.reviews-card{

padding:28px;

}

.trust-heading{

margin-bottom:60px;

}

.reviews-header{

flex-direction:column;

align-items:flex-start;

}

.rating-value{

font-size:3.6rem;

}

.trust-heading h2{

font-size:2.3rem;

}

.trust-quote{

padding:35px 25px;

}

.trust-quote blockquote{

font-size:1.35rem;

}

.trust-btn{

width:100%;

justify-content:center;

}

}

/* ==========================================================
   ANIMATED AMBIENT LIGHT
========================================================== */

.trust-light{
    position:absolute;
    top:50%;
    left:50%;
    width:900px;
    height:900px;
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(circle,
        rgba(128,0,0,.10) 0%,
        rgba(244,225,216,.08) 28%,
        rgba(255,255,255,0) 72%);
    filter:blur(70px);
    animation:ambientLight 18s ease-in-out infinite alternate;
    z-index:0;
}

@keyframes ambientLight{

    0%{
        transform:
            translate(-50%,-50%)
            scale(1)
            rotate(0deg);
    }

    50%{
        transform:
            translate(-48%,-52%)
            scale(1.08)
            rotate(8deg);
    }

    100%{
        transform:
            translate(-52%,-48%)
            scale(1.15)
            rotate(-8deg);
    }

}

.gradient-border{

    position:relative;

    padding:2px;

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        #800000,
        #F4E1D8,
        #ffffff,
        #800000
    );

    background-size:300% 300%;

    animation:borderFlow 8s linear infinite;

}

@keyframes borderFlow{

0%{

background-position:0% 50%;

}

100%{

background-position:100% 50%;

}

}

.gradient-border>.reviews-card{

border-radius:30px;

}

.reviews-card{

position:relative;

overflow:hidden;

}

.reviews-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(255,255,255,.35),
transparent 70%);

pointer-events:none;

left:var(--x,-999px);

top:var(--y,-999px);

transform:translate(-50%,-50%);

transition:.05s;

}

.rating-value{

text-shadow:

0 0 0 rgba(128,0,0,0);

animation:ratingGlow 4s infinite;

}

@keyframes ratingGlow{

0%,100%{

text-shadow:none;

}

50%{

text-shadow:

0 0 30px rgba(128,0,0,.25);

}

}

.stat-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:4px;

background:#800000;

transform:scaleX(0);

transform-origin:left;

transition:.45s;

}

.stat-card:hover::after{

transform:scaleX(1);

}

.trust-btn{

isolation:isolate;

}

.trust-btn::after{

content:"";

position:absolute;

width:20px;

height:20px;

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

border-radius:50%;

transform:scale(0);

opacity:0;

pointer-events:none;

}

.ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

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

transform:translate(-50%,-50%) scale(0);

animation:ripple .7s ease-out;

pointer-events:none;

}

@keyframes ripple{

to{

transform:
translate(-50%,-50%) scale(15);

opacity:0;

}

}

/*==========================================================
    CONSULTATION SECTION
==========================================================*/

.consult-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:
        radial-gradient(circle at top left,#f8efeb 0%,transparent 35%),
        radial-gradient(circle at bottom right,#f3ddd7 0%,transparent 35%),
        linear-gradient(180deg,#fffdfc,#faf7f5);
}

/*==========================================================*/

.consult-container{
    width:min(1250px,92%);
    margin:auto;
    position:relative;
    z-index:5;
}

/*==========================================================*/

.consult-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(128,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,0,0,.03) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        rgba(0,0,0,.85),
        transparent
    );

    pointer-events:none;

}

/*==========================================================*/
/* FLOATING BLOBS */
/*==========================================================*/

.consult-bg{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.35;

}

.consult-bg-1{

    width:380px;
    height:380px;

    background:#800000;

    left:-120px;
    top:-120px;

}

.consult-bg-2{

    width:300px;
    height:300px;

    background:#F4E1D8;

    right:-90px;
    bottom:-90px;

}

/*==========================================================*/

.consult-light{

    position:absolute;

    left:50%;
    top:50%;

    width:900px;
    height:900px;

    border-radius:50%;

    transform:translate(-50%,-50%);

    background:

    radial-gradient(circle,
    rgba(128,0,0,.08),
    rgba(255,255,255,0) 70%);

    filter:blur(80px);

}

/*==========================================================*/
/* HEADING */
/*==========================================================*/

.consult-heading{

    max-width:760px;

    text-align:center;

    margin:auto;

    margin-bottom:90px;

}

.consult-eyebrow{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:#fff;

    border:1px solid rgba(128,0,0,.08);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    color:#800000;

    margin-bottom:24px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}

.consult-heading h2{

    font-family:"Fraunces",serif;

    font-size:clamp(2.8rem,5vw,4.4rem);

    line-height:1.1;

    margin-bottom:25px;

    color:#2b1a17;

}

.consult-heading span{

    color:#800000;

}

.consult-heading p{

    max-width:720px;

    margin:auto;

    font-size:1.05rem;

    line-height:1.9;

    color:#666;

}

/*==========================================================*/
/* GRID */
/*==========================================================*/

.consult-content{
    display:flex;
    justify-content:center;
}

/*==========================================================*/
/* CARDS */
/*==========================================================*/

.consult-card,
.map-card{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(22px);

    border-radius:32px;

    padding:42px;

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.08),

    inset 0 1px rgba(255,255,255,.9);

}

/*==========================================================*/

.card-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:40px;

}

.header-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    display:grid;

    place-items:center;

    background:

    linear-gradient(
    135deg,
    #800000,
    #a12b2b);

    color:#fff;

}

.header-icon svg{

    width:34px;

    fill:white;

}

.card-header span{

    color:#800000;

    font-size:.82rem;

    letter-spacing:.15em;

    font-weight:700;

}

.card-header h3{

    margin-top:8px;

    font-size:1.7rem;

    font-family:"Fraunces",serif;

    color:#2b1a17;

}

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

.consult-form{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

/*==========================================================*/
/* INPUT GROUP */
/*==========================================================*/

.input-group{

    position:relative;

}

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

    width:100%;

    border:none;

    outline:none;

    background:#fff;

    border-radius:18px;

    padding:22px 20px;

    font-size:1rem;

    color:#333;

    border:1px solid rgba(128,0,0,.08);

    transition:.35s;

}

.input-group textarea{

    resize:none;

    min-height:170px;

}

.input-group label{

    position:absolute;

    left:20px;

    top:22px;

    color:#777;

    pointer-events:none;

    transition:.3s;

    background:#fff;

    padding:0 6px;

}

/*==========================================================*/
/* FLOATING LABEL */
/*==========================================================*/

.input-group input:focus+label,
.input-group input:valid+label,
.input-group textarea:focus+label,
.input-group textarea:valid+label{

    top:-10px;

    left:16px;

    font-size:.78rem;

    color:#800000;

    font-weight:700;

}

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

    border-color:#800000;

    box-shadow:

    0 0 0 4px rgba(128,0,0,.08);

}

/*==========================================================*/
/* SELECT */
/*==========================================================*/

.select-group select{

    appearance:none;

    cursor:pointer;

    font-weight:500;

}

/*==========================================================*/
/* CONSENT */
/*==========================================================*/

.consent-box{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    background:#fff;

    border-radius:18px;

    border:1px solid rgba(128,0,0,.08);

}

.consent-box p{

    color:#555;

    line-height:1.8;

}

.consent-box a{

    color:#800000;

    font-weight:700;

    text-decoration:none;

}

/*==========================================================
    PREMIUM CTA BUTTON
==========================================================*/

.consult-btn{
    position: relative;
    overflow: hidden;
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    padding: 20px 32px;
    background: linear-gradient(135deg,#800000,#a32626);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: .35s;
    box-shadow:
        0 18px 40px rgba(128,0,0,.25);
}

.consult-btn svg{
    width:20px;
    height:20px;
    transition:.35s;
}

.consult-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.35) 50%,
        transparent 75%);
    transform:translateX(-120%);
}

.consult-btn:hover{
    transform:translateY(-5px);
    box-shadow:
        0 30px 55px rgba(128,0,0,.30);
}

.consult-btn:hover::before{
    transform:translateX(120%);
    transition:1s;
}

.consult-btn:hover svg{
    transform:translateX(5px);
}

/*==========================================================
    CUSTOM CHECKBOX
==========================================================*/

.checkbox{
    position:relative;
    width:24px;
    height:24px;
    flex-shrink:0;
}

.checkbox input{
    position:absolute;
    opacity:0;
}

.checkmark{
    width:24px;
    height:24px;
    display:block;
    border-radius:8px;
    border:2px solid #800000;
    transition:.3s;
    cursor:pointer;
}

.checkbox input:checked + .checkmark{
    background:#800000;
}

.checkbox input:checked + .checkmark::after{
    content:"";
    position:absolute;
    left:7px;
    top:2px;
    width:6px;
    height:12px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/*==========================================================
    MAP CARD
==========================================================*/

.map-card{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.map-header span{
    color:#800000;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.18em;
}

.map-header h3{
    margin:12px 0;
    font-family:"Fraunces",serif;
    font-size:2rem;
    color:#2b1a17;
}

.map-header p{
    color:#666;
    line-height:1.8;
}

/*==========================================================
    MAP
==========================================================*/

.map-wrapper{
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(128,0,0,.08);
    height:420px;
    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

.map-wrapper iframe{
    width:100%;
    height:100%;
    border:none;
    transition:.45s;
}

.map-card:hover iframe{
    transform:scale(1.03);
}

/*==========================================================
    OFFICE CARD
==========================================================*/

.office-card{
    background:#fff;
    border-radius:22px;
    padding:26px;
    border:1px solid rgba(128,0,0,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.office-item{
    display:flex;
    align-items:center;
    gap:18px;
}

.office-item svg{
    width:26px;
    fill:#800000;
}

.office-item strong{
    display:block;
    color:#2b1a17;
    font-size:1.1rem;
}

.office-item span{
    color:#777;
}

/*==========================================================
    DIRECTION BUTTON
==========================================================*/

.direction-btn{
    text-decoration:none;
    color:#800000;
    font-weight:700;
    border:2px solid rgba(128,0,0,.15);
    padding:14px 24px;
    border-radius:14px;
    transition:.35s;
    white-space:nowrap;
}

.direction-btn:hover{
    background:#800000;
    color:#fff;
    border-color:#800000;
}

/*==========================================================
    GLASS HOVER
==========================================================*/

.consult-card,
.map-card{
    transition:.45s;
}

.consult-card:hover,
.map-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 45px 80px rgba(0,0,0,.12);
}

/*==========================================================
    LINKS
==========================================================*/

.consent-box a{
    position:relative;
}

.consent-box a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:2px;
    background:#800000;
    transition:.35s;
}

.consent-box a:hover::after{
    width:100%;
}

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

@media(max-width:1100px){

.consult-content{
    grid-template-columns:1fr;
}

.map-wrapper{
    height:380px;
}

}

@media(max-width:768px){

.consult-section{
    padding:90px 0;
}

.consult-heading{
    margin-bottom:60px;
}

.consult-heading h2{
    font-size:2.6rem;
}

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

.consult-card,
.map-card{
    padding:28px;
}

.office-card{
    flex-direction:column;
    align-items:flex-start;
}

.direction-btn{
    width:100%;
    text-align:center;
}

.map-wrapper{
    height:320px;
}

}

@media(max-width:500px){

.consult-heading h2{
    font-size:2.1rem;
}

.card-header{
    flex-direction:column;
    text-align:center;
}

.header-icon{
    width:60px;
    height:60px;
}

.input-group input,
.input-group textarea,
.input-group select{
    padding:18px;
}

.consult-btn{
    padding:18px;
}

}

/*==========================================================
    REVEAL ANIMATION PREPARATION
==========================================================*/

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:all .9s cubic-bezier(.22,1,.36,1);
}

.reveal-left{
    transform:translateX(-70px);
}

.reveal-right{
    transform:translateX(70px);
}

.reveal.active{
    opacity:1;
    transform:none;
}

/*==========================================
LOADER
==========================================*/

.loader{

    width:18px;
    height:18px;

    border:2px solid rgba(255,255,255,.4);
    border-top:2px solid #fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==========================================
BUTTON RIPPLE
==========================================*/

.consult-btn{

    overflow:hidden;

}

.btn-ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .7s ease-out;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*==================================================
SPOTLIGHT
==================================================*/

.consult-card,
.map-card{

position:relative;

overflow:hidden;

}

.consult-card::before,
.map-card::before{

content:"";

position:absolute;

width:320px;
height:320px;

left:calc(var(--mouse-x) - 160px);

top:calc(var(--mouse-y) - 160px);

background:radial-gradient(

circle,

rgba(255,255,255,.35),

transparent 70%

);

opacity:0;

transition:.35s;

pointer-events:none;

}

.consult-card:hover::before,
.map-card:hover::before{

opacity:1;

}

/*==================================================
INPUT GLOW
==================================================*/

.input-group.focused{

transform:translateY(-2px);

transition:.3s;

}

/*==================================================
BUTTON SHIMMER
==================================================*/

.consult-btn.shine::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.4),

transparent

);

animation:buttonShine 1.2s;

}

@keyframes buttonShine{

from{

transform:translateX(-130%);

}

to{

transform:translateX(130%);

}

}

/*==================================================
PERFORMANCE
==================================================*/

.consult-card,
.map-card,
.consult-btn{

will-change:transform;

backface-visibility:hidden;

transform-style:preserve-3d;

}


.consult-card{
    width:100%;
    max-width:1000px;
}

/*==========================================================
    LOCATIONS WE SERVE
==========================================================*/

.locations-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:
        radial-gradient(circle at top left,#f8efeb 0%,transparent 35%),
        radial-gradient(circle at bottom right,#f3ddd7 0%,transparent 35%),
        linear-gradient(180deg,#fffdfc,#faf7f5);
}

/*==========================================================*/

.locations-container{
    width:min(1280px,92%);
    margin:auto;
    position:relative;
    z-index:2;
}

/*==========================================================*/
/* BACKGROUND EFFECTS */
/*==========================================================*/

.location-grid{
    position:absolute;
    inset:0;
    pointer-events:none;

    background-image:
        linear-gradient(rgba(128,0,0,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(128,0,0,.03) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        rgba(0,0,0,.9),
        transparent
    );
}

.location-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.35;
}

.location-bg-1{
    width:380px;
    height:380px;
    background:#800000;
    left:-120px;
    top:-100px;
}

.location-bg-2{
    width:320px;
    height:320px;
    background:#F4E1D8;
    right:-100px;
    bottom:-80px;
}

.location-light{
    position:absolute;
    width:900px;
    height:900px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(128,0,0,.08),
    transparent 70%);

    filter:blur(90px);
}

/*==========================================================*/
/* HEADING */
/*==========================================================*/

.locations-heading{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
}

.locations-eyebrow{

    display:inline-flex;

    padding:10px 18px;

    background:#fff;

    border-radius:999px;

    color:#800000;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    border:1px solid rgba(128,0,0,.08);

    margin-bottom:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.locations-heading h2{

    font-family:"Fraunces",serif;

    font-size:clamp(2.8rem,5vw,4.3rem);

    line-height:1.1;

    color:#2b1a17;

    margin-bottom:22px;

}

.locations-heading span{

    color:#800000;

}

.locations-heading p{

    max-width:720px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:1.05rem;

}

/*==========================================================*/
/* MAP CARD */
/*==========================================================*/

.map-main-card{

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

    backdrop-filter:blur(22px);

    border-radius:32px;

    padding:35px;

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.08),

    inset 0 1px rgba(255,255,255,.8);

    margin-bottom:60px;

}

.map-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.map-label{

    color:#800000;

    font-size:.8rem;

    letter-spacing:.16em;

    font-weight:700;

}

.map-top h3{

    margin-top:10px;

    font-family:"Fraunces",serif;

    font-size:2rem;

    color:#2b1a17;

}

.location-count{

    width:120px;

    height:120px;

    border-radius:50%;

    background:

    linear-gradient(135deg,#800000,#a52d2d);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

    0 25px 50px rgba(128,0,0,.28);

}

.location-count strong{

    font-size:2rem;

}

.location-count span{

    font-size:.9rem;

    opacity:.9;

}

/*==========================================================*/
/* LEAFLET MAP */
/*==========================================================*/

#serviceMap{

    width:100%;

    height:620px;

    border-radius:26px;

    overflow:hidden;

    border:2px solid rgba(128,0,0,.08);

    box-shadow:

    0 20px 45px rgba(0,0,0,.08);

}

/*==========================================================*/
/* SERVICE GRID */
/*==========================================================*/

.service-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-top:40px;

}

/*==========================================================*/
/* LOCATION CARD */
/*==========================================================*/

.service-card{

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:28px;

    text-align:center;

    border:1px solid rgba(128,0,0,.08);

    transition:.4s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.05);

}

.service-icon{

    width:72px;

    height:72px;

    margin:auto;

    margin-bottom:18px;

    border-radius:18px;

    display:grid;

    place-items:center;

    font-size:1.7rem;

    background:

    linear-gradient(135deg,#800000,#a52d2d);

    color:#fff;

}

.service-card h4{

    font-family:"Fraunces",serif;

    font-size:1.35rem;

    color:#2b1a17;

    margin-bottom:8px;

}

.service-card p{

    color:#666;

    line-height:1.6;

}

/*==========================================================*/
/* HOVER */
/*==========================================================*/

.service-card:hover{

    transform:translateY(-8px);

    border-color:#800000;

    box-shadow:

    0 30px 55px rgba(128,0,0,.15);

}

.service-card:hover .service-icon{

    transform:scale(1.08);

}

/*==========================================================*/
/* CTA */
/*==========================================================*/

.location-cta{

    margin-top:80px;

    text-align:center;

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:55px;

    border:1px solid rgba(128,0,0,.08);

}

.location-cta h3{

    font-family:"Fraunces",serif;

    font-size:2rem;

    color:#2b1a17;

    margin-bottom:16px;

}

.location-cta p{

    max-width:650px;

    margin:0 auto 35px;

    color:#666;

    line-height:1.8;

}

/*==========================================================
    LOCATION BUTTON
==========================================================*/

.location-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 34px;

    background:linear-gradient(135deg,#800000,#a32727);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    border-radius:16px;

    transition:.35s;

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

}

.location-btn svg{

    width:18px;

    height:18px;

    transition:.35s;

}

.location-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 28px 55px rgba(128,0,0,.30);

}

.location-btn:hover svg{

    transform:translateX(5px);

}

/*==========================================================
    MAP HOVER
==========================================================*/

.map-main-card{

    transition:.45s;

}

.map-main-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 45px 90px rgba(0,0,0,.12);

}

/*==========================================================
    LEAFLET POPUP
==========================================================*/

.leaflet-popup-content-wrapper{

    border-radius:24px;

    overflow:hidden;

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

}

.leaflet-popup-content{

    margin:0;

    width:300px !important;

}

.popup-card{

    background:#fff;

}

.popup-image{

    width:100%;

    height:170px;

    object-fit:cover;

}

.popup-content{

    padding:24px;

}

.popup-content h3{

    font-family:"Fraunces",serif;

    color:#2b1a17;

    margin-bottom:14px;

}

.popup-content p{

    color:#666;

    line-height:1.7;

}

.popup-btn{

    display:inline-flex;

    margin-top:18px;

    color:#800000;

    font-weight:700;

    text-decoration:none;

}

/*==========================================================
    CUSTOM MARKER CLUSTER
==========================================================*/

.marker-cluster-small{

    background:rgba(128,0,0,.18);

}

.marker-cluster-small div{

    background:#800000;

    color:#fff;

}

.marker-cluster-medium{

    background:rgba(128,0,0,.18);

}

.marker-cluster-medium div{

    background:#800000;

    color:#fff;

}

.marker-cluster-large{

    background:rgba(128,0,0,.18);

}

.marker-cluster-large div{

    background:#800000;

    color:#fff;

}

.marker-cluster div{

    border:none;

    font-weight:700;

    font-size:15px;

}

/*==========================================================
    LEAFLET CONTROLS
==========================================================*/

.leaflet-control-zoom{

    border:none !important;

    box-shadow:none !important;

}

.leaflet-control-zoom a{

    width:48px !important;

    height:48px !important;

    line-height:48px !important;

    border-radius:16px !important;

    margin-bottom:12px;

    background:#fff !important;

    color:#800000 !important;

    font-size:24px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}

.leaflet-control-zoom a:hover{

    background:#800000 !important;

    color:#fff !important;

}

/*==========================================================
    ATTRIBUTION
==========================================================*/

.leaflet-control-attribution{

    border-radius:12px;

    padding:6px 10px;

}

/*==========================================================
    SERVICE CARD ICON
==========================================================*/

.service-icon{

    transition:.35s;

}

.service-card:hover .service-icon{

    transform:rotate(-8deg) scale(1.1);

}

/*==========================================================
    LOCATION COUNT
==========================================================*/

.location-count{

    animation:pulseCount 4s infinite;

}

@keyframes pulseCount{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}

/*==========================================================
    REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

    all .8s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*==========================================================
    MAP LOADER
==========================================================*/

.map-loading{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(10px);

    z-index:5;

}

.loader-circle{

    width:58px;

    height:58px;

    border-radius:50%;

    border:4px solid rgba(128,0,0,.15);

    border-top:4px solid #800000;

    animation:mapSpin 1s linear infinite;

}

@keyframes mapSpin{

to{

transform:rotate(360deg);

}

}

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

@media(max-width:1100px){

.location-count{

display:none;

}

#serviceMap{

height:520px;

}

}

@media(max-width:768px){

.locations-section{

padding:90px 0;

}

.locations-heading{

margin-bottom:50px;

}

.locations-heading h2{

font-size:2.5rem;

}

.map-main-card{

padding:22px;

}

.map-top{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

#serviceMap{

height:420px;

}

.location-cta{

padding:35px 25px;

}

.location-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:500px){

.locations-heading h2{

font-size:2rem;

}

.service-grid{

grid-template-columns:1fr;

}

#serviceMap{

height:340px;

}

.popup-content{

padding:18px;

}

}

/*==========================================================
    PERFORMANCE
==========================================================*/

.map-main-card,
.service-card{

will-change:transform;

backface-visibility:hidden;

}

/*==================================================
CUSTOM HOMELYNK MARKER
==================================================*/

.homelynk-marker{

background:none;

border:none;

}

.pin-circle{

width:44px;

height:44px;

border-radius:50%;

background:#800000;

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 10px 30px rgba(128,0,0,.35);

border:4px solid #fff;

}

/*==================================================
SERVICE PIN
==================================================*/

.service-pin{

width:18px;

height:18px;

border-radius:50%;

background:#800000;

border:4px solid #fff;

box-shadow:

0 8px 20px rgba(128,0,0,.30);

}


/*==================================================
        LOCATIONS SWIPER
==================================================*/

.locationSwiper{

    margin-top:60px;
    padding:20px 10px 70px;

}

.locationSwiper .swiper-slide{

    height:auto;

}

.location-slide{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(128,0,0,.08);

    border-radius:24px;

    padding:26px;

    transition:.4s ease;

    cursor:pointer;

    overflow:hidden;

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

}

.location-slide::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(128,0,0,.05),
            transparent 60%
        );

    pointer-events:none;

}

.location-slide:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 30px 70px rgba(128,0,0,.15);

}

.location-icon{

    width:64px;
    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    background:#800000;

    color:#fff;

    flex-shrink:0;

}

.location-content h4{

    font-family:"Fraunces",serif;

    font-size:26px;

    color:#2d1a17;

    margin-bottom:6px;

}

.location-content p{

    color:#666;

    line-height:1.7;

    font-size:15px;

}

.location-slide:hover .location-icon{

    transform:scale(1.08);

    transition:.35s;

}

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

.locationSwiper .swiper-button-next,
.locationSwiper .swiper-button-prev{

    width:54px;
    height:54px;

    border-radius:50%;

    background:#ffffff;

    color:#800000;

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

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

    transition:.35s;

}

.locationSwiper .swiper-button-next:hover,
.locationSwiper .swiper-button-prev:hover{

    background:#800000;

    color:#fff;

    transform:scale(1.08);

}

.locationSwiper .swiper-button-next::after,
.locationSwiper .swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

/*=========================================
PAGINATION
=========================================*/

.locationSwiper .swiper-pagination{

    bottom:8px !important;

}

.locationSwiper .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#d5b6b6;

    opacity:1;

    transition:.3s;

}

.locationSwiper .swiper-pagination-bullet-active{

    width:34px;

    border-radius:999px;

    background:#800000;

}

/*=========================================
ACTIVE CARD
=========================================*/

.location-slide.active{

    background:#800000;

    color:#fff;

}

.location-slide.active h4,

.location-slide.active p{

    color:#fff;

}

.location-slide.active .location-icon{

    background:#fff;

    color:#800000;

}

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

@media(max-width:992px){

.locationSwiper{

padding-bottom:60px;

}

.location-content h4{

font-size:22px;

}

}

@media(max-width:768px){

.location-slide{

padding:20px;

}

.location-icon{

width:54px;

height:54px;

font-size:24px;

}

.location-content h4{

font-size:20px;

}

.location-content p{

font-size:14px;

}

.locationSwiper .swiper-button-next,
.locationSwiper .swiper-button-prev{

display:none;

}

}

/* =========================================
   REMOVE ALL FORM TRANSITIONS & ANIMATIONS
========================================= */

.consult-section .consult-card,
.consult-section .consult-form,
.consult-section .input-group,
.consult-section input,
.consult-section textarea,
.consult-section select,
.consult-section label,
.consult-section .consult-btn,
.consult-section .consent-box {
    transition: none !important;
    animation: none !important;
}

/* Show form immediately */
.consult-section .reveal,
.consult-section .reveal-left,
.consult-section .reveal-right,
.consult-section .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.contact-item-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}


/* ==========================================================
   CUSTOM GOOGLE REVIEW CAROUSEL
========================================================== */

.custom-reviews{
    position:relative;
    min-height:390px;
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid rgba(128,0,0,.06);
    overflow:hidden;
}


/* REVIEW SLIDES */

.review-slide{
    display:none;
    animation:reviewFade .5s ease;
}

.review-slide.active{
    display:block;
}

@keyframes reviewFade{

    from{
        opacity:0;
        transform:translateX(15px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


/* TOP */

.review-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.review-stars{
    color:#D4AF37;
    font-size:1.15rem;
    letter-spacing:3px;
}

.review-date{
    font-size:.82rem;
    color:#888;
    white-space:nowrap;
}


/* REVIEW TEXT */

.review-text{
    color:#4b403d;
    font-size:1rem;
    line-height:1.85;
    margin-bottom:30px;
}


/* AUTHOR */

.review-author{
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:20px;
    border-top:1px solid rgba(128,0,0,.08);
}

.review-avatar{
    width:48px;
    height:48px;
    border-radius:50%;

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

    background:#800000;
    color:#fff;

    font-weight:700;
    font-size:1.1rem;
}

.review-author strong{
    display:block;
    color:#2b1a17;
    font-size:.98rem;
    margin-bottom:3px;
}

.review-author span{
    display:block;
    color:#888;
    font-size:.78rem;
}


/* NAVIGATION */

.reviews-navigation{
    position:absolute;
    bottom:25px;
    right:30px;

    display:flex;
    align-items:center;
    gap:14px;
}

.review-nav{
    width:42px;
    height:42px;

    border-radius:50%;

    border:1px solid rgba(128,0,0,.12);
    background:#fff;

    color:#800000;

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

    font-size:1.1rem;

    cursor:pointer;

    transition:.3s;
}

.review-nav:hover{
    background:#800000;
    color:#fff;
    transform:translateY(-2px);
}

.review-counter{
    min-width:45px;
    text-align:center;

    font-size:.85rem;
    font-weight:700;

    color:#6b5a55;
}


/* MOBILE */

@media(max-width:640px){

    .custom-reviews{
        min-height:470px;
        padding:25px;
    }

    .review-top{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .review-text{
        font-size:.94rem;
        line-height:1.75;
    }

    .reviews-navigation{
        position:relative;
        bottom:auto;
        right:auto;

        justify-content:flex-end;
        margin-top:20px;
    }

}