/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : header.css
   Version     : 5.1

   Purpose:

   Premium global header styling.

   Controls:

   • Cosmic logo sizing
   • Brand identity alignment
   • Journey indicator
   • Header spacing

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





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


.ctm-header {


    width:100%;


    height:auto;


    min-height:118px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:

    24px 72px;



    background:

    var(--ctm-background);



    border-bottom:

    1px solid rgba(
        255,
        255,
        255,
        0.06
    );


}





/* ==========================================================================
   BRAND AREA
   ========================================================================== */


.header-brand {


    display:flex;


    align-items:center;


    gap:30px;


}





/* ==========================================================================
   COSMIC LOGO MARK

   Increased to match four-line identity height

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


.header-logo {


    width:110px;


    height:110px;


    display:flex;


    align-items:center;


    justify-content:center;


    flex-shrink:0;


}





.brand-symbol {


    width:105px;


    height:105px;


    object-fit:contain;


}








/* ==========================================================================
   BRAND IDENTITY STACK
   ========================================================================== */


.brand-identity {


    display:flex;


    flex-direction:column;


    justify-content:center;


    line-height:1;


}






.brand-name {


    font-family:

    var(--font-primary);



    font-size:

    30px;



    font-weight:

    800;



    letter-spacing:

    6px;



    color:

    var(--ctm-text-primary);



}








.brand-tagline-main {


    margin-top:

    8px;



    font-size:

    15px;



    font-weight:

    700;



    letter-spacing:

    3px;



    color:

    var(--ctm-gold);



}








.brand-tagline {


    margin-top:

    8px;



    font-size:

    14px;



    font-weight:

    700;



    letter-spacing:

    5px;



    color:

    var(--ctm-teal);



}








.brand-signature {


    margin-top:

    10px;



    font-family:

    var(--font-serif);



    font-style:

    italic;



    font-size:

    16px;



    color:

    var(--ctm-gold-light);



}








/* ==========================================================================
   JOURNEY STATUS
   ========================================================================== */


.journey-status {


    display:flex;


    align-items:center;


    gap:18px;



}





.journey-label {


    font-size:

    12px;



    letter-spacing:

    5px;



    color:

    var(--ctm-text-secondary);



}





.journey-counter {


    padding:

    10px 18px;



    border-radius:

    var(--radius-pill);



    border:

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



    color:

    var(--ctm-gold-light);



    font-size:

    14px;



    font-weight:

    700;



    letter-spacing:

    2px;


}









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


@media(max-width:900px){


.ctm-header {


    padding:

    20px 28px;


}



.header-logo {


    width:80px;


    height:80px;


}



.brand-symbol {


    width:78px;


    height:78px;


}



.brand-name {


    font-size:

    22px;


}



.brand-tagline-main {


    font-size:

    11px;


}



.brand-tagline {


    font-size:

    11px;


}



.brand-signature {


    font-size:

    13px;


}



.journey-status {


    display:none;


}



}





/* ==========================================================================
   END OF FILE

   css/header.css
   Version 5.1

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