/* ==========================================================
   CRESTBRIDGE PREMIUM DESIGN SYSTEM
   Components.css
   Version 2.0
==========================================================*/


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

.section-header{

    max-width:780px;

    margin-bottom:70px;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    font-family:var(--font-heading);

    font-size:13px;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--gold);

}

.section-label::before{

    content:'';

    width:42px;

    height:2px;

    background:var(--gold);

}

.section-header h2{

    margin:0;

}

.section-header p{

    max-width:650px;

    margin-top:26px;

    font-size:19px;

}


/*==========================================================
EDITORIAL INTRO
==========================================================*/

.editorial{

    max-width:860px;

}

.editorial h2{

    margin-bottom:28px;

}

.editorial p{

    font-size:20px;

}


/*==========================================================
DIVIDERS
==========================================================*/

.divider-gold{

    width:80px;

    height:2px;

    background:var(--gold);

    margin:34px 0;

}

.divider-vertical{

    width:2px;

    height:80px;

    background:var(--gold);

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:58px;

    padding:0 34px;

    border-radius:999px;

    border:none;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    font-family:var(--font-heading);

    font-size:15px;

    font-weight:700;

    letter-spacing:.02em;

    transition:var(--transition);

}


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

.btn-primary{

    background:var(--navy);

    color:#fff;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    background:var(--gradient-primary);

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


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

.btn-gold{

    background:var(--gold);

    color:#fff;

}

.btn-gold:hover{

    background:var(--gradient-gold);

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


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

.btn-outline{

    background:transparent;

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

    color:var(--navy);

}

.btn-outline:hover{

    background:var(--navy);

    color:#fff;

}


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

.btn-premium{

    background:#fff;

    color:var(--navy);

    border:1px solid rgba(15,39,69,.08);

    box-shadow:var(--shadow-sm);

}

.btn-premium:hover{

    background:var(--gradient-primary);

    color:#fff;

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


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

.btn i{

    transition:.35s;

}

.btn:hover i{

    transform:translateX(5px);

}


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

@media(max-width:991px){

.section-header{

margin-bottom:50px;

}

.section-header p{

font-size:18px;

}

.btn{

width:100%;

}

}

/*==========================================================
PREMIUM CARD
==========================================================*/

.card-premium{

    position:relative;

    overflow:hidden;

    padding:48px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #FBFCFD
    );

    border:1px solid rgba(15,39,69,.06);

    border-radius:30px;

    box-shadow:var(--shadow-sm);

    transition:all .45s cubic-bezier(.4,0,.2,1);

}

.card-premium::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:0;

    background:var(--gold);

    transition:.45s;

}

.card-premium:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.card-premium:hover::before{

    height:100%;

}


/*==========================================================
EDITORIAL FEATURE
==========================================================*/

.feature-block{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:28px;

    align-items:flex-start;

}

.feature-block+.feature-block{

    margin-top:60px;

}


/*==========================================================
PREMIUM ICON
==========================================================*/

.feature-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        var(--silver),
        #ffffff
    );

    border:1px solid rgba(15,39,69,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:var(--navy);

    transition:var(--transition);

}

.feature-block:hover .feature-icon{

    background:linear-gradient(
        145deg,
        var(--navy),
        var(--navy-dark)
    );

    color:#fff;

    transform:rotate(-8deg);

}


/*==========================================================
STATISTICS
==========================================================*/

.stat{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.stat-number{

    font-family:var(--font-heading);

    font-size:64px;

    font-weight:800;

    line-height:1;

    color:var(--navy);

}

.stat-number span{

    color:var(--gold);

}

.stat-title{

    font-size:16px;

    color:var(--text-light);

}


/*==========================================================
STAT BAND
==========================================================*/

.stats-band{

    display:grid;

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

    gap:60px;

    padding:70px;

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

    border-radius:36px;

}


/*==========================================================
IMAGE FRAME
==========================================================*/

.image-frame{

    position:relative;

    overflow:hidden;

    border-radius:34px;

}

.image-frame img{

    width:100%;

    transition:1.1s ease;

}

.image-frame::after{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.20)
    );

    transition:.5s;

}

.image-frame:hover img{

    transform:scale(1.05);

}

.image-frame:hover::after{

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.35)
    );

}


/*==========================================================
GLASS PANEL
==========================================================*/

.glass{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

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

    border-radius:30px;

}


/*==========================================================
SECTION TRANSFORM
==========================================================*/

.hover-section{

    transition:.55s;

}

.hover-section:hover{

    background:var(--gradient-primary);

}

.hover-section:hover h2,

.hover-section:hover h3,

.hover-section:hover h4,

.hover-section:hover p{

    color:#fff;

}

.hover-section:hover .section-label{

    color:var(--gold-light);

}

.hover-section:hover .section-label::before{

    background:var(--gold-light);

}


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

@media(max-width:991px){

.feature-block{

grid-template-columns:1fr;

}

.stats-band{

grid-template-columns:1fr 1fr;

padding:40px;

gap:35px;

}

.stat-number{

font-size:46px;

}

}

/*==========================================================
EXECUTIVE PANEL
==========================================================*/

.executive-panel{

    position:relative;

    padding:60px;

    border-radius:34px;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #F9FAFC
    );

    border:1px solid rgba(22,58,99,.06);

    transition:all .45s cubic-bezier(.4,0,.2,1);

}

.executive-panel::before{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        transparent,
        rgba(200,164,93,.05)
    );

    opacity:0;

    transition:.45s;

}

.executive-panel:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.executive-panel:hover::before{

    opacity:1;

}


/*==========================================================
EDITORIAL IMAGE
==========================================================*/

.editorial-image{

    overflow:hidden;

    border-radius:36px;

    position:relative;

}

.editorial-image img{

    width:100%;

    transition:1.2s cubic-bezier(.4,0,.2,1);

}

.editorial-image::after{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.18)
    );

    transition:.45s;

}

.editorial-image:hover img{

    transform:scale(1.06);

}

.editorial-image:hover::after{

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.38)
    );

}


/*==========================================================
FROST PANEL
==========================================================*/

.frost-panel{

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

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

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

    border-radius:34px;

}


/*==========================================================
SERVICE HIGHLIGHT
==========================================================*/

.service-highlight{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:32px;

    align-items:flex-start;

}

.service-highlight+.service-highlight{

    margin-top:60px;

}

.service-highlight-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

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

    box-shadow:var(--shadow-sm);

    color:var(--navy);

    font-size:28px;

    transition:var(--transition);

}

.service-highlight:hover .service-highlight-icon{

    background:var(--navy);

    border-color:var(--navy);

    color:#fff;

    transform:rotate(-10deg) scale(1.05);

    box-shadow:var(--shadow-md);

}


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

.performance-band{

    display:grid;

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

    gap:50px;

    padding:70px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        #FFFFFF,
        var(--silver)
    );

}


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

.performance-item{

    text-align:center;

}

.performance-item h2{

    color:var(--navy);

    margin-bottom:10px;

}

.performance-item h2 span{

    color:var(--gold);

}

.performance-item p{

    margin:0;

}


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

.signature-hover{

    position:relative;

    transition:.55s;

}

.signature-hover::before{

    content:'';

    position:absolute;

    inset:0;

    background:var(--gradient-primary);
    
    opacity:0;

    transition:.55s;

    z-index:0;

}

.signature-hover>*{

    position:relative;

    z-index:1;

}

.signature-hover:hover::before{

    opacity:1;

}

.signature-hover:hover h2,
.signature-hover:hover h3,
.signature-hover:hover h4,
.signature-hover:hover p{

    color:#fff;

}

.signature-hover:hover .section-label{

    color:var(--gold-light);

}

.signature-hover:hover .section-label::before{

    width:80px;

}


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

.executive-quote{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.executive-quote blockquote{

    font-family:var(--font-heading);

    font-size:42px;

    font-weight:700;

    line-height:1.4;

    color:var(--charcoal);

}

.executive-quote cite{

    display:block;

    margin-top:28px;

    color:var(--gold);

    font-style:normal;

    letter-spacing:.12em;

    text-transform:uppercase;

}


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

@media(max-width:991px){

.service-highlight{

grid-template-columns:1fr;

}

.performance-band{

grid-template-columns:1fr 1fr;

padding:40px;

}

.executive-panel{

padding:35px;

}

.executive-quote blockquote{

font-size:28px;

}

}