/*====================================================
PLATINUM EDGE
LAYOUT SYSTEM
======================================================*/



/*====================================================
01. GLOBAL LAYOUT
======================================================*/

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

}

main{

    display:block;

}

section{

    position:relative;

    padding-block:var(--space-128);

}

section:first-of-type{

    padding-top:0;

}



/*====================================================
02. CONTAINERS
======================================================*/

.container{

    width:min(92%,1280px);

    margin-inline:auto;

}

.container-wide{

    width:min(94%,1480px);

    margin-inline:auto;

}

.container-narrow{

    width:min(90%,760px);

    margin-inline:auto;

}



/*====================================================
03. GRID SYSTEM
======================================================*/

.grid{

    display:grid;

    gap:var(--space-32);

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-12{

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

}



/*====================================================
04. HEADER
======================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

.site-header.scrolled{

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

    backdrop-filter:blur(12px);

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

}

.header-inner{

    height:96px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    transition:height .35s ease;

}

.site-header.scrolled .header-inner{

    height:74px;

}



/*====================================================
05. LOGO
======================================================*/

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo img{

    height:54px;

    width:auto;

    transition:.35s ease;

}

.site-header.scrolled .logo img{

    height:46px;

}



/*====================================================
06. DESKTOP NAVIGATION
======================================================*/

.desktop-nav{

    margin-left:auto;

}

.nav-list{

    display:flex;

    align-items:center;

    gap:2.5rem;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-list a{

    position:relative;

    text-decoration:none;

    color:var(--color-text);

    font-weight:500;

    transition:.3s ease;

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:.3s ease;

}

.nav-list a:hover,

.nav-list a.active{

    color:var(--color-primary);

}

.nav-list a:hover::after,

.nav-list a.active::after{

    width:100%;

}



/*====================================================
07. HEADER CTA
======================================================*/

.header-cta{

    margin-left:2rem;

}



/*====================================================
08. MOBILE TOGGLE
======================================================*/

.mobile-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

}

.mobile-toggle svg{

    width:30px;

    height:30px;

}



/*====================================================
09. MOBILE MENU
======================================================*/

.mobile-menu{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:1100;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:2rem;

    transform:translateX(100%);

    transition:transform .4s ease;

}

.mobile-menu.active{

    transform:translateX(0);

}

.mobile-menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mobile-close{

    background:none;

    border:none;

    cursor:pointer;

}

.mobile-nav-list{

    list-style:none;

    padding:0;

    margin:4rem 0;

}

.mobile-nav-list li{

    margin-bottom:1.5rem;

}

.mobile-nav-list a{

    text-decoration:none;

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

}



/*====================================================
10. HERO FRAMEWORK
======================================================*/

.site-main{

    padding-top:96px;

}


.hero{

    min-height:100svh;

    display:flex;

    align-items:center;

    overflow:hidden;

    position:relative;

}

.hero-grid{

    display:grid;

    grid-template-columns:7fr 5fr;

    gap:var(--space-64);

    align-items:center;

}



/*====================================================
11. SECTION UTILITIES
======================================================*/

.bg-light{

    background:var(--color-surface);

}

.bg-dark{

    background:var(--color-primary);

    color:#fff;

}

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}



/*====================================================
12. FOOTER FRAMEWORK
======================================================*/

.site-footer{

    background:var(--color-primary);

    color:#fff;

    padding-top:var(--space-96);

}

.footer-grid{

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.2fr;

    gap:4rem;

}

.footer-bottom{

    margin-top:var(--space-64);

    padding-block:2rem;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

}



/*====================================================
13. RESPONSIVE
======================================================*/

@media(max-width:1100px){

.grid-4{

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

}

.hero-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:900px){

.desktop-nav,

.header-cta{

display:none;

}

.mobile-toggle{

display:block;

}

section{

padding-block:var(--space-96);

}

}


@media(max-width:768px){

.grid-2,

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

.header-inner{

height:84px;

}

.logo img{

height:46px;

}

.container,

.container-wide,

.container-narrow{

width:min(92%,100%);

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

gap:1rem;

text-align:center;

}

}


@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}
}




/*====================================================
HERO
====================================================*/
/*====================================================
HERO
====================================================*/

.hero{

    padding-top:140px;
    padding-bottom:96px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;

}

.hero-content{

    max-width:720px;

}

.hero-eyebrow{

    display:inline-block;

    margin-bottom:24px;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.82rem;

    font-weight:700;

    color:var(--color-accent);

}

.hero h1{

    margin-bottom:32px;

    font-size:clamp(3.5rem,6vw,5.3rem);

    line-height:1.05;

    max-width:11ch;

}

.hero-lead{

    max-width:60ch;

    font-size:1.15rem;

    color:var(--color-muted);

    margin-bottom:48px;

}

.hero-actions{

    display:flex;

    gap:24px;

    align-items:center;

    flex-wrap:wrap;

}

/*=====================================
RIGHT SIDE
=====================================*/

.hero-media{

    position:relative;

}

.hero-media img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    border-radius:24px;

}

/*=====================================
BOTTOM PANEL
=====================================*/

.hero-panel{

    position:absolute;

    left:32px;

    right:32px;

    bottom:32px;

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

    backdrop-filter:blur(10px);

    border-radius:18px;

    display:grid;

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

    overflow:hidden;

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

}

.panel-item{

    padding:24px;

    text-align:center;

}

.panel-item:not(:last-child){

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

}

.panel-item span{

    display:block;

    font-size:1.45rem;

    font-weight:700;

    color:var(--color-primary);

    margin-bottom:8px;

}

.panel-item p{

    font-size:.92rem;

    color:var(--color-muted);

    margin:0;

}

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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

gap:64px;

}

.hero-content{

max-width:100%;

}

.hero-media{

max-width:700px;

margin-inline:auto;

}

}

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero-panel{

position:static;

margin-top:24px;

grid-template-columns:1fr;

}

.panel-item{

border-right:none;

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

}

.panel-item:last-child{

border-bottom:none;

}

.hero h1{

max-width:none;

}

}


/*====================================================
PAGE HERO
====================================================*/

.page-hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:620px;

    margin-top:96px;

    overflow:hidden;

    color:#fff;

}

.page-hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.page-hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(26,31,36,.90) 0%,
            rgba(26,31,36,.82) 38%,
            rgba(26,31,36,.60) 100%
        );

}

.page-hero .container{

    position:relative;

    z-index:2;

}

.page-hero-content{

    max-width:760px;

}

.page-label{

    display:inline-block;

    margin-bottom:24px;

    color:var(--color-accent);

    letter-spacing:.18em;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

}

.page-hero h1{

    color:#fff;

    margin-bottom:32px;

    max-width:12ch;

}

.page-hero p{

    max-width:58ch;

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

    font-size:1.15rem;

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:48px;

    font-size:.92rem;

}

.breadcrumb a{

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

    text-decoration:none;

}

.breadcrumb a:hover{

    color:var(--color-accent);

}

.breadcrumb span{

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

}

@media(max-width:900px){

.page-hero{

min-height:520px;

margin-top:84px;

}

.page-hero h1{

max-width:100%;

}

.page-hero p{

font-size:1rem;

}

}

@media(max-width:640px){

.page-hero{

min-height:460px;

}

.breadcrumb{

display:none;

}

}