/*==================================================
    MAXX LIMITED
    Luxury Corporate Website
==================================================*/


/*==============================
    RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;

    background:#f8f7f3;

    color:#333;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
}

img{

    display:block;

    max-width:100%;
}

a{

    text-decoration:none;

    color:inherit;

    transition:.3s ease;
}

ul{

    list-style:none;
}


/*==============================
    VARIABLES
==============================*/

:root{

    --primary:#111111;

    --secondary:#242424;

    --gold:#c9a14b;

    --gold-light:#e7c879;

    --gold-dark:#987227;

    --cream:#f8f7f3;

    --white:#ffffff;

    --gray:#777777;

    --light-gray:#ececec;

    --dark-overlay:rgba(0,0,0,.55);

    --container:1280px;

    --radius:16px;

    --shadow:

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

    --transition:.35s ease;
}


/*==============================
    LAYOUT
==============================*/

.container{

    width:min(92%,var(--container));

    margin:auto;
}

section{

    padding:110px 0;
}


/*==============================
    TYPOGRAPHY
==============================*/

h1,
h2,
h3,
h4{

    font-family:'Cormorant Garamond',serif;

    color:var(--primary);

    font-weight:700;

    line-height:1.15;
}

.hero-title{

    font-size:clamp(3rem,6vw,5.7rem);

    color:#fff;

    margin-bottom:30px;
}

.hero-title span{

    display:block;
}

.gold{

    color:var(--gold);
}

.section-title{

    font-size:clamp(2.3rem,4vw,3.6rem);

    margin-bottom:22px;
}

.section-description{

    max-width:720px;

    color:var(--gray);

    margin:auto;
}

.eyebrow{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:600;

    color:var(--gold);

    margin-bottom:18px;
}

.eyebrow.dark{

    color:var(--gold-dark);
}

p{

    color:#555;

    margin-bottom:20px;
}


/*==============================
    SECTION HEADINGS
==============================*/

.section-heading{

    margin-bottom:70px;
}

.section-heading.centered{

    text-align:center;
}

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

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:52px;
    padding:14px 26px;
    border:1px solid var(--gold);
    border-radius:999px;
    background:var(--gold);
    color:var(--primary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.button:hover{
    background:var(--gold-light);
    border-color:var(--gold-light);
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(201,161,75,.25);
}

.button:focus-visible{
    outline:3px solid rgba(201,161,75,.35);
    outline-offset:4px;
}

.button-outline{
    background:transparent;
    color:var(--white);
    border-color:rgba(255,255,255,.65);
}

.button-outline:hover{
    background:var(--white);
    border-color:var(--white);
    color:var(--primary);
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold-light);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.text-link i{
    font-size:.75rem;
    transition:transform var(--transition);
}

.text-link:hover{
    color:var(--white);
}

.text-link:hover i{
    transform:translateX(5px);
}


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

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    border-bottom:1px solid transparent;
    background:rgba(10,10,10,.15);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.site-header.scrolled{
    background:rgba(10,10,10,.96);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:88px;
    gap:30px;
}


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

.brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex-shrink:0;
    color:var(--white);
    line-height:1;
}

.brand-main{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    font-weight:700;
    letter-spacing:4px;
    color:var(--gold);
}

.brand-sub{
    margin-top:7px;
    font-size:.58rem;
    font-weight:600;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

.brand:hover .brand-main{
    color:var(--gold-light);
}


/*==============================
    DESKTOP NAVIGATION
==============================*/

.desktop-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
}

.desktop-nav > a:not(.nav-cta){
    position:relative;
    padding:34px 0 31px;
    color:rgba(255,255,255,.8);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.5px;
    white-space:nowrap;
}

.desktop-nav > a:not(.nav-cta)::after{
    content:'';
    position:absolute;
    right:0;
    bottom:23px;
    left:0;
    width:0;
    height:2px;
    margin:auto;
    background:var(--gold);
    transition:width var(--transition);
}

.desktop-nav > a:not(.nav-cta):hover,
.desktop-nav > a:not(.nav-cta).active{
    color:var(--white);
}

.desktop-nav > a:not(.nav-cta):hover::after,
.desktop-nav > a:not(.nav-cta).active::after{
    width:100%;
}

.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 18px;
    border:1px solid var(--gold);
    border-radius:999px;
    color:var(--gold-light);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    white-space:nowrap;
}

.nav-cta:hover{
    background:var(--gold);
    color:var(--primary);
}


/*==============================
    MOBILE MENU BUTTON
==============================*/

.menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(255,255,255,.05);
    color:var(--white);
    font-size:1.15rem;
    cursor:pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.menu-toggle:hover{
    background:rgba(201,161,75,.15);
    border-color:var(--gold);
    color:var(--gold-light);
}

.menu-toggle:focus-visible{
    outline:3px solid rgba(201,161,75,.35);
    outline-offset:3px;
}


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

.mobile-menu{
    position:fixed;
    top:0;
    right:0;
    z-index:999;
    width:min(88%,390px);
    height:100vh;
    padding:120px 30px 40px;
    background:#111;
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
    transform:translateX(105%);
    visibility:hidden;
    transition:
        transform .4s ease,
        visibility .4s ease;
}

.mobile-menu.open{
    transform:translateX(0);
    visibility:visible;
}

.mobile-menu nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.mobile-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:17px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:rgba(255,255,255,.82);
    font-family:'Cormorant Garamond',serif;
    font-size:1.45rem;
    font-weight:600;
}

.mobile-menu a:hover,
.mobile-menu a.active{
    color:var(--gold-light);
    padding-left:8px;
}

.mobile-menu a:last-child{
    justify-content:center;
    margin-top:22px;
    padding:14px 20px;
    border:1px solid var(--gold);
    border-radius:999px;
    color:var(--gold-light);
    font-family:'Montserrat',sans-serif;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.mobile-menu a:last-child:hover{
    padding-left:20px;
    background:var(--gold);
    color:var(--primary);
}


/*==============================
    MENU BACKDROP
==============================*/

body.menu-open{
    overflow:hidden;
}

body.menu-open::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:998;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

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

.hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    padding:160px 0 110px;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.9) 0%,
            rgba(0,0,0,.72) 38%,
            rgba(0,0,0,.28) 67%,
            rgba(0,0,0,.15) 100%
        ),
        url('/assets/images/hero.png') center center / cover no-repeat;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(201,161,75,.14),
            transparent 42%
        );
    pointer-events:none;
}

.hero::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:180px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.55)
        );
    pointer-events:none;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero-content{
    max-width:760px;
}

.hero .eyebrow{
    color:var(--gold-light);
}

.hero-description{
    max-width:680px;
    margin-bottom:34px;
    color:rgba(255,255,255,.78);
    font-size:1.02rem;
    line-height:1.9;
}

.hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}


/*==============================
    SHARED SECTION STYLES
==============================*/

.about,
.values{
    background:var(--cream);
}

.divisions,
.founder,
.contact-band{
    background:var(--primary);
}

.about-grid,
.founder-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:90px;
}

.about-copy,
.founder-copy{
    max-width:620px;
}

.about-copy > p,
.founder-copy > p{
    font-size:.98rem;
    line-height:1.9;
}


/*==============================
    ABOUT SECTION
==============================*/

.about{
    position:relative;
    overflow:hidden;
}

.about::before{
    content:'';
    position:absolute;
    top:-140px;
    right:-120px;
    width:420px;
    height:420px;
    border:1px solid rgba(201,161,75,.16);
    border-radius:50%;
}

.about::after{
    content:'';
    position:absolute;
    bottom:-180px;
    left:-160px;
    width:460px;
    height:460px;
    border:1px solid rgba(201,161,75,.12);
    border-radius:50%;
}

.about .container{
    position:relative;
    z-index:2;
}

.about-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:34px;
}

.about-point{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:72px;
    padding:18px 20px;
    border:1px solid rgba(17,17,17,.08);
    border-radius:var(--radius);
    background:rgba(255,255,255,.65);
    box-shadow:0 10px 26px rgba(0,0,0,.04);
}

.about-point i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    background:rgba(201,161,75,.12);
    color:var(--gold-dark);
    font-size:.92rem;
}

.about-point span{
    color:var(--primary);
    font-size:.84rem;
    font-weight:700;
    line-height:1.45;
}


/*==============================
    ABOUT VISUAL
==============================*/

.about-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:560px;
    padding:45px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            rgba(17,17,17,.96),
            rgba(36,36,36,.94)
        );
    box-shadow:var(--shadow);
}

.about-visual::before{
    content:'';
    position:absolute;
    top:10%;
    left:12%;
    width:76%;
    height:76%;
    border:1px solid rgba(201,161,75,.25);
    transform:rotate(8deg);
}

.about-visual::after{
    content:'';
    position:absolute;
    top:16%;
    left:18%;
    width:64%;
    height:64%;
    border:1px solid rgba(255,255,255,.07);
    transform:rotate(-7deg);
}

.about-monogram{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:300px;
    height:300px;
    border:1px solid rgba(201,161,75,.6);
    border-radius:50%;
    text-align:center;
    box-shadow:
        inset 0 0 40px rgba(201,161,75,.05),
        0 0 50px rgba(0,0,0,.25);
}

.about-monogram-letter{
    display:block;
    margin-bottom:-18px;
    font-family:'Cormorant Garamond',serif;
    font-size:9rem;
    font-weight:700;
    line-height:.8;
    color:rgba(201,161,75,.2);
}

.about-monogram strong{
    position:absolute;
    top:47%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    color:var(--gold-light);
    font-family:'Cormorant Garamond',serif;
    font-size:1.55rem;
    letter-spacing:4px;
}

.about-monogram small{
    position:absolute;
    bottom:76px;
    color:rgba(255,255,255,.6);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:1.8px;
    text-transform:uppercase;
}


/*==============================
    GENERIC CONTENT WIDTHS
==============================*/

.content-narrow{
    width:min(100%,780px);
}

.content-centered{
    margin-inline:auto;
    text-align:center;
}

.section-intro{
    max-width:760px;
    margin-bottom:55px;
}

.section-intro.centered{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

/*==============================
    DIVISIONS SECTION
==============================*/

.divisions{
    position:relative;
    overflow:hidden;
}

.divisions::before{
    content:'';
    position:absolute;
    top:-220px;
    right:-180px;
    width:520px;
    height:520px;
    border:1px solid rgba(201,161,75,.12);
    border-radius:50%;
}

.divisions::after{
    content:'';
    position:absolute;
    bottom:-240px;
    left:-200px;
    width:560px;
    height:560px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}

.divisions .container{
    position:relative;
    z-index:2;
}

.divisions .section-title{
    color:var(--white);
}

.divisions .section-description{
    color:rgba(255,255,255,.65);
}


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

.division-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.division-card{
    position:relative;
    min-height:460px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    overflow:hidden;
    background-position:center top;
    background-size:cover;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    isolation:isolate;
}

.division-card::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.78) 42%,
            rgba(0,0,0,.24) 78%,
            rgba(0,0,0,.08) 100%
        );
    transition:background var(--transition);
}

.division-card::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:2;
    border:1px solid transparent;
    border-radius:inherit;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.division-card:hover::before{
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.8) 48%,
            rgba(0,0,0,.18) 100%
        );
}

.division-card:hover::after{
    border-color:rgba(201,161,75,.42);
    box-shadow:inset 0 0 35px rgba(201,161,75,.06);
}

.division-card-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    background:
        linear-gradient(
            135deg,
            rgba(201,161,75,.08),
            transparent 42%
        );
    pointer-events:none;
}

.division-card-content{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:4;
    padding:38px;
    transform:translateY(0);
    transition:transform var(--transition);
}

.division-card:hover .division-card-content{
    transform:translateY(-6px);
}

.division-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    margin-bottom:22px;
    border:1px solid rgba(201,161,75,.5);
    border-radius:50%;
    background:rgba(17,17,17,.72);
    color:var(--gold-light);
    font-size:1.2rem;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.division-card h3{
    margin-bottom:14px;
    color:var(--white);
    font-size:2.25rem;
}

.division-card p{
    max-width:520px;
    margin-bottom:22px;
    color:rgba(255,255,255,.72);
    line-height:1.8;
}


/*==============================
    FOUNDER SECTION
==============================*/

.founder{
    position:relative;
    overflow:hidden;
}

.founder::before{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:44%;
    height:100%;
    background:
        linear-gradient(
            to left,
            rgba(201,161,75,.07),
            transparent
        );
    pointer-events:none;
}

.founder .container{
    position:relative;
    z-index:2;
}

.founder-photo{
    position:relative;
    min-height:680px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.22),
            rgba(0,0,0,.02)
        ),
        url('/assets/images/blackdress.jpeg') center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.founder-photo::before{
    content:'';
    position:absolute;
    inset:18px;
    border:1px solid rgba(201,161,75,.3);
    border-radius:18px;
    pointer-events:none;
}

.founder-photo::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:36%;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.55),
            transparent
        );
    pointer-events:none;
}

.founder-copy .section-title{
    color:var(--white);
}

.founder-copy > p{
    color:rgba(255,255,255,.68);
}

.founder-roles{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 28px;
}

.founder-role{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:8px 14px;
    border:1px solid rgba(201,161,75,.3);
    border-radius:999px;
    background:rgba(201,161,75,.06);
    color:var(--gold-light);
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.founder-copy .button{
    margin-top:10px;
}
/*==============================
    VALUES SECTION
==============================*/

.values{
    position:relative;
    overflow:hidden;
}

.values::before{
    content:'';
    position:absolute;
    top:-180px;
    left:50%;
    width:520px;
    height:520px;
    border:1px solid rgba(201,161,75,.12);
    border-radius:50%;
    transform:translateX(-50%);
}

.values .container{
    position:relative;
    z-index:2;
}

.value-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.value-card{
    position:relative;
    min-height:280px;
    padding:34px 28px;
    border:1px solid rgba(17,17,17,.08);
    border-radius:20px;
    background:rgba(255,255,255,.8);
    box-shadow:0 14px 36px rgba(0,0,0,.06);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.value-card:hover{
    transform:translateY(-7px);
    border-color:rgba(201,161,75,.36);
    box-shadow:0 22px 46px rgba(0,0,0,.1);
}

.value-card i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border:1px solid rgba(201,161,75,.28);
    border-radius:50%;
    background:rgba(201,161,75,.1);
    color:var(--gold-dark);
    font-size:1.15rem;
}

.value-card h3{
    margin-bottom:14px;
    font-size:1.65rem;
}

.value-card p{
    margin-bottom:0;
    color:var(--gray);
    font-size:.9rem;
    line-height:1.75;
}


/*==============================
    CONTACT BANNER
==============================*/

.contact-band{
    position:relative;
    padding:80px 0;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.contact-band::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            110deg,
            rgba(201,161,75,.12),
            transparent 40%
        );
    pointer-events:none;
}

.contact-band-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.contact-band h2{
    margin:0;
    color:var(--white);
    font-size:clamp(2rem,4vw,3.35rem);
}


/*==============================
    FOOTER
==============================*/

.site-footer{
    padding:78px 0 28px;
    background:#090909;
    color:var(--white);
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:46px;
    padding-bottom:54px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-column h3{
    margin-bottom:18px;
    color:var(--gold);
    font-size:2rem;
    letter-spacing:1px;
}

.footer-column h4{
    margin-bottom:20px;
    color:var(--white);
    font-family:'Montserrat',sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.footer-column p{
    max-width:390px;
    margin-bottom:0;
    color:rgba(255,255,255,.55);
    font-size:.88rem;
    line-height:1.8;
}

.footer-column ul{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-column li,
.footer-column li a{
    color:rgba(255,255,255,.58);
    font-size:.82rem;
    line-height:1.6;
}

.footer-column li a:hover{
    color:var(--gold-light);
    padding-left:4px;
}

.social-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    background:rgba(255,255,255,.03);
    color:rgba(255,255,255,.68);
}

.social-links a:hover{
    border-color:var(--gold);
    background:rgba(201,161,75,.12);
    color:var(--gold-light);
    transform:translateY(-3px);
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:26px;
    text-align:center;
}

.footer-bottom p{
    margin:0;
    color:rgba(255,255,255,.42);
    font-size:.72rem;
    letter-spacing:.4px;
}


/*==============================
    ACCESSIBILITY
==============================*/

::selection{
    background:var(--gold);
    color:var(--primary);
}

:focus-visible{
    outline:3px solid rgba(201,161,75,.42);
    outline-offset:3px;
}

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}
/*==============================
    LARGE DESKTOP
==============================*/

@media (max-width:1180px){

    .desktop-nav{
        gap:17px;
    }

    .desktop-nav > a:not(.nav-cta){
        font-size:.66rem;
    }

    .nav-cta{
        padding:10px 15px;
        font-size:.63rem;
    }

    .about-grid,
    .founder-grid{
        gap:60px;
    }

    .value-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/*==============================
    TABLET
==============================*/

@media (max-width:980px){

    section{
        padding:90px 0;
    }

    .desktop-nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
        position:relative;
        z-index:1001;
    }

    .about-grid,
    .founder-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .about-copy,
    .founder-copy{
        max-width:none;
    }

    .about-visual{
        min-height:500px;
    }

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

    .division-card{
        min-height:430px;
    }

    .founder-photo{
        min-height:620px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/*==============================
    MOBILE LANDSCAPE / SMALL TABLET
==============================*/

@media (max-width:760px){

    :root{
        --radius:14px;
    }

    section{
        padding:76px 0;
    }

    .container{
        width:min(90%,var(--container));
    }

    .nav-wrap{
        min-height:76px;
    }

    .brand-main{
        font-size:1.75rem;
    }

    .brand-sub{
        font-size:.5rem;
        letter-spacing:1.35px;
    }

    .hero{
        min-height:92vh;
        padding:135px 0 85px;
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.45) 0%,
                rgba(0,0,0,.72) 52%,
                rgba(0,0,0,.94) 100%
            ),
            url('/assets/images/hero.png') center top / cover no-repeat;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-title{
        font-size:clamp(2.7rem,12vw,4.4rem);
    }

    .hero-description{
        max-width:100%;
        font-size:.94rem;
    }

    .hero-actions{
        align-items:stretch;
        flex-direction:column;
        width:100%;
    }

    .hero-actions .button{
        width:100%;
    }

    .section-heading{
        margin-bottom:48px;
    }

    .section-title{
        font-size:clamp(2.15rem,9vw,3rem);
    }

    .section-description{
        font-size:.92rem;
    }

    .about-points{
        grid-template-columns:1fr;
    }

    .about-visual{
        min-height:430px;
        padding:28px;
    }

    .about-monogram{
        width:260px;
        height:260px;
    }

    .about-monogram-letter{
        font-size:7.3rem;
    }

    .about-monogram strong{
        font-size:1.25rem;
        letter-spacing:3px;
    }

    .about-monogram small{
        bottom:66px;
        font-size:.55rem;
    }

    .division-card{
        min-height:410px;
    }

    .division-card-content{
        padding:30px;
    }

    .division-card h3{
        font-size:2rem;
    }

    .founder-photo{
        min-height:540px;
    }

    .contact-band{
        padding:65px 0;
    }

    .contact-band-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .contact-band .button{
        width:100%;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

}


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

@media (max-width:520px){

    section{
        padding:68px 0;
    }

    .eyebrow{
        font-size:.7rem;
        letter-spacing:2.2px;
    }

    .hero{
        min-height:100svh;
        padding-top:120px;
    }

    .hero-title{
        font-size:2.7rem;
    }

    .hero-description{
        font-size:.9rem;
        line-height:1.75;
    }

    .button{
        min-height:50px;
        padding:13px 20px;
        font-size:.72rem;
    }

    .mobile-menu{
        width:92%;
        padding:105px 24px 30px;
    }

    .mobile-menu a{
        font-size:1.28rem;
    }

    .about-point{
        padding:16px;
    }

    .about-visual{
        min-height:380px;
    }

    .about-monogram{
        width:225px;
        height:225px;
    }

    .about-monogram-letter{
        font-size:6.4rem;
    }

    .about-monogram strong{
        font-size:1.05rem;
    }

    .about-monogram small{
        bottom:56px;
        max-width:160px;
        line-height:1.5;
    }

    .division-card{
        min-height:390px;
        border-radius:20px;
    }

    .division-card-content{
        padding:24px;
    }

    .division-card p{
        font-size:.87rem;
        line-height:1.7;
    }

    .division-icon{
        width:52px;
        height:52px;
    }

    .founder-photo{
        min-height:480px;
        border-radius:22px;
    }

    .founder-role{
        font-size:.6rem;
    }

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

    .value-card{
        min-height:auto;
    }

    .contact-band h2{
        font-size:2rem;
    }

    .site-footer{
        padding-top:60px;
    }

}


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

@media (max-width:380px){

    .brand-sub{
        display:none;
    }

    .hero-title{
        font-size:2.35rem;
    }

    .about-monogram{
        width:200px;
        height:200px;
    }

    .about-monogram-letter{
        font-size:5.6rem;
    }

    .about-monogram small{
        bottom:48px;
    }

    .division-card-content{
        padding:21px;
    }

    .division-card h3{
        font-size:1.8rem;
    }

}

/*==================================================
    FASHION PAGE
==================================================*/


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

.page-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:760px;
    padding:175px 0 110px;
    overflow:hidden;
    background-color:var(--primary);
}

.fashion-hero{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.78) 40%,
            rgba(0,0,0,.34) 69%,
            rgba(0,0,0,.18) 100%
        ),
        url('/assets/images/fashion-hero.png')
        center top / cover no-repeat;
}

.page-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201,161,75,.16),
            transparent 42%
        );
    pointer-events:none;
}

.page-hero::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:180px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.65)
        );
    pointer-events:none;
}

.page-hero .container{
    position:relative;
    z-index:2;
}

.page-hero-content{
    max-width:760px;
}

.page-hero .eyebrow{
    color:var(--gold-light);
}

.page-hero-title{
    margin-bottom:26px;
    color:var(--white);
    font-size:clamp(3.3rem,6vw,5.8rem);
}

.page-hero-title span{
    display:block;
}

.page-hero-description{
    max-width:680px;
    margin-bottom:34px;
    color:rgba(255,255,255,.76);
    font-size:1.02rem;
    line-height:1.9;
}


/*==============================
    FASHION INTRO
==============================*/

.fashion-intro{
    position:relative;
    overflow:hidden;
    background:var(--cream);
}

.fashion-intro::before{
    content:'';
    position:absolute;
    top:-180px;
    right:-180px;
    width:460px;
    height:460px;
    border:1px solid rgba(201,161,75,.12);
    border-radius:50%;
}

.fashion-intro-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);
    align-items:center;
    gap:85px;
}

.fashion-intro-copy{
    max-width:650px;
}

.fashion-intro-copy > p{
    font-size:.98rem;
    line-height:1.9;
}

.fashion-intro-image{
    position:relative;
    min-height:650px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.32),
            rgba(0,0,0,.03)
        ),
        url('/assets/images/closeupgreendress.JPG')
        center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.fashion-intro-image::before{
    content:'';
    position:absolute;
    inset:18px;
    border:1px solid rgba(231,200,121,.38);
    border-radius:19px;
}

.fashion-intro-image::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:35%;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.5),
            transparent
        );
}


/*==============================
    FASHION SERVICES
==============================*/

.fashion-services{
    position:relative;
    overflow:hidden;
    background:var(--primary);
}

.fashion-services::before{
    content:'';
    position:absolute;
    top:-240px;
    left:-190px;
    width:560px;
    height:560px;
    border:1px solid rgba(201,161,75,.11);
    border-radius:50%;
}

.fashion-services::after{
    content:'';
    position:absolute;
    right:-190px;
    bottom:-230px;
    width:520px;
    height:520px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}

.fashion-services .container{
    position:relative;
    z-index:2;
}

.fashion-services .section-title{
    color:var(--white);
}

.fashion-services .section-description{
    color:rgba(255,255,255,.62);
}

.fashion-service-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

.fashion-service-card{
    position:relative;
    min-height:390px;
    padding:40px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.fashion-service-card:hover{
    transform:translateY(-7px);
    border-color:rgba(201,161,75,.38);
    background:
        linear-gradient(
            145deg,
            rgba(201,161,75,.1),
            rgba(255,255,255,.02)
        );
    box-shadow:0 26px 55px rgba(0,0,0,.28);
}

.fashion-service-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin-bottom:26px;
    border:1px solid rgba(201,161,75,.42);
    border-radius:50%;
    background:rgba(201,161,75,.08);
    color:var(--gold-light);
    font-size:1.25rem;
}

.fashion-service-card h3{
    margin-bottom:15px;
    color:var(--white);
    font-size:2rem;
}

.fashion-service-card > p{
    margin-bottom:26px;
    color:rgba(255,255,255,.65);
    line-height:1.8;
}

.feature-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.feature-list li{
    display:flex;
    align-items:center;
    gap:11px;
    color:rgba(255,255,255,.75);
    font-size:.87rem;
}

.feature-list i{
    color:var(--gold-light);
    font-size:.72rem;
}


/*==============================
    FASHION FEATURE
==============================*/

.fashion-feature{
    position:relative;
    overflow:hidden;
    background:#ece8df;
}

.fashion-feature-grid{
    display:grid;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1fr);
    align-items:center;
    gap:90px;
}

.fashion-feature-image{
    position:relative;
    min-height:700px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            transparent 42%
        ),
        url('/assets/images/sweaterdress.jpeg')
        center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.fashion-feature-image::before{
    content:'';
    position:absolute;
    inset:18px;
    border:1px solid rgba(231,200,121,.38);
    border-radius:18px;
}

.fashion-feature-copy{
    max-width:650px;
}

.fashion-feature-copy > p{
    font-size:.98rem;
    line-height:1.9;
}

.fashion-feature-points{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:35px;
}

.fashion-feature-point{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid rgba(17,17,17,.1);
}

.fashion-feature-point:last-child{
    border-bottom:1px solid rgba(17,17,17,.1);
}

.fashion-point-number{
    color:var(--gold-dark);
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;
    font-weight:700;
}

.fashion-feature-point h3{
    margin-bottom:7px;
    font-size:1.55rem;
}

.fashion-feature-point p{
    margin:0;
    color:var(--gray);
    font-size:.9rem;
    line-height:1.75;
}


/*==============================
    FASHION AUDIENCE
==============================*/

.fashion-audience{
    position:relative;
    overflow:hidden;
    background:var(--cream);
}

.fashion-audience-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.fashion-audience-card{
    min-height:290px;
    padding:34px 28px;
    border:1px solid rgba(17,17,17,.08);
    border-radius:20px;
    background:var(--white);
    box-shadow:0 14px 36px rgba(0,0,0,.055);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.fashion-audience-card:hover{
    transform:translateY(-7px);
    border-color:rgba(201,161,75,.38);
    box-shadow:0 22px 46px rgba(0,0,0,.1);
}

.fashion-audience-card i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border:1px solid rgba(201,161,75,.3);
    border-radius:50%;
    background:rgba(201,161,75,.09);
    color:var(--gold-dark);
    font-size:1.1rem;
}

.fashion-audience-card h3{
    margin-bottom:13px;
    font-size:1.65rem;
}

.fashion-audience-card p{
    margin:0;
    color:var(--gray);
    font-size:.89rem;
    line-height:1.75;
}


/*==============================
    FASHION CONTACT
==============================*/

.fashion-contact{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            100deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.72)
        ),
        url('/assets/images/cheetah.jpeg')
        center 22% / cover no-repeat;
}

.fashion-contact::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            rgba(201,161,75,.14),
            transparent 45%
        );
}

.fashion-contact-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.fashion-contact-inner > div{
    max-width:780px;
}

.fashion-contact h2{
    margin-bottom:18px;
    color:var(--white);
    font-size:clamp(2.2rem,4vw,3.7rem);
}

.fashion-contact p{
    margin-bottom:0;
    color:rgba(255,255,255,.68);
    line-height:1.85;
}

.fashion-contact .button{
    flex-shrink:0;
}


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

@media (max-width:1100px){

    .fashion-intro-grid,
    .fashion-feature-grid{
        gap:55px;
    }

    .fashion-audience-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:980px){

    .page-hero{
        min-height:700px;
    }

    .fashion-intro-grid,
    .fashion-feature-grid{
        grid-template-columns:1fr;
    }

    .fashion-intro-copy,
    .fashion-feature-copy{
        max-width:none;
    }

    .fashion-intro-image,
    .fashion-feature-image{
        min-height:620px;
    }

    .fashion-feature-image{
        order:2;
    }

    .fashion-feature-copy{
        order:1;
    }

    .fashion-contact-inner{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media (max-width:760px){

    .page-hero{
        min-height:100svh;
        padding:135px 0 85px;
    }

    .fashion-hero{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.97) 0%,
            rgba(0,0,0,.9) 34%,
            rgba(0,0,0,.62) 55%,
            rgba(0,0,0,.2) 78%,
            rgba(0,0,0,.08) 100%
        ),
        url('/assets/images/fashion-hero.png')
        68% top / cover no-repeat;
}

.page-hero-content{
    max-width:650px;
}

.page-hero-title{
    margin-bottom:26px;
    color:var(--white);
    font-size:clamp(3.1rem,5.4vw,5.15rem);
}

.page-hero-description{
    max-width:590px;
    margin-bottom:34px;
    color:rgba(255,255,255,.76);
    font-size:1.02rem;
    line-height:1.9;
}

    .fashion-service-grid{
        grid-template-columns:1fr;
    }

    .fashion-service-card{
        min-height:auto;
    }

    .fashion-intro-image,
    .fashion-feature-image{
        min-height:540px;
    }

    .fashion-audience-grid{
        grid-template-columns:1fr;
    }

    .fashion-contact{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.78),
                rgba(0,0,0,.95)
            ),
            url('/assets/images/cheetah.jpeg')
            center top / cover no-repeat;
    }

    .fashion-contact .button{
        width:100%;
    }

}

@media (max-width:520px){

    .page-hero-title{
        font-size:2.8rem;
    }

    .fashion-intro-image,
    .fashion-feature-image{
        min-height:470px;
        border-radius:22px;
    }

    .fashion-service-card{
        padding:30px 24px;
    }

    .fashion-feature-point{
        grid-template-columns:46px 1fr;
        gap:14px;
    }

    .fashion-audience-card{
        min-height:auto;
    }

}

/*==================================================
    HEALTH & BEAUTY PAGE
==================================================*/


/*==============================
    HEALTH & BEAUTY HERO
==============================*/

.beauty-hero{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.82) 38%,
            rgba(0,0,0,.48) 62%,
            rgba(0,0,0,.18) 100%
        ),
        url('/assets/images/health-hero.png')
        center top / cover no-repeat;
}

.beauty-hero::before{
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(201,161,75,.16),
            transparent 44%
        );
}


/*==============================
    HEALTH & BEAUTY INTRO
==============================*/

.beauty-intro{
    position:relative;
    overflow:hidden;
    background:var(--cream);
}

.beauty-intro::before{
    content:'';
    position:absolute;
    top:-180px;
    left:-150px;
    width:450px;
    height:450px;
    border:1px solid rgba(201,161,75,.12);
    border-radius:50%;
}

.beauty-intro::after{
    content:'';
    position:absolute;
    right:-170px;
    bottom:-210px;
    width:500px;
    height:500px;
    border:1px solid rgba(17,17,17,.06);
    border-radius:50%;
}

.beauty-intro-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.88fr);
    align-items:center;
    gap:85px;
}

.beauty-intro-copy{
    max-width:650px;
}

.beauty-intro-copy > p{
    font-size:.98rem;
    line-height:1.9;
}

.beauty-intro-image{
    position:relative;
    min-height:650px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.3),
            rgba(0,0,0,.02)
        ),
        url('/assets/images/closeupgreendress.JPG')
        center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.beauty-intro-image::before{
    content:'';
    position:absolute;
    inset:18px;
    border:1px solid rgba(231,200,121,.38);
    border-radius:19px;
}

.beauty-intro-image::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:34%;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.48),
            transparent
        );
}


/*==============================
    HEALTH & BEAUTY SERVICES
==============================*/

.beauty-services{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            #111 0%,
            #1b1b1b 55%,
            #111 100%
        );
}

.beauty-services::before{
    content:'';
    position:absolute;
    top:-220px;
    right:-180px;
    width:520px;
    height:520px;
    border:1px solid rgba(201,161,75,.11);
    border-radius:50%;
}

.beauty-services::after{
    content:'';
    position:absolute;
    bottom:-240px;
    left:-190px;
    width:560px;
    height:560px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}

.beauty-services .container{
    position:relative;
    z-index:2;
}

.beauty-services .section-title{
    color:var(--white);
}

.beauty-services .section-description{
    color:rgba(255,255,255,.64);
}

.beauty-service-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

.beauty-service-card{
    position:relative;
    min-height:390px;
    padding:40px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.beauty-service-card:hover{
    transform:translateY(-7px);
    border-color:rgba(201,161,75,.38);
    background:
        linear-gradient(
            145deg,
            rgba(201,161,75,.1),
            rgba(255,255,255,.02)
        );
    box-shadow:0 26px 55px rgba(0,0,0,.28);
}

.beauty-service-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin-bottom:26px;
    border:1px solid rgba(201,161,75,.42);
    border-radius:50%;
    background:rgba(201,161,75,.08);
    color:var(--gold-light);
    font-size:1.25rem;
}

.beauty-service-card h3{
    margin-bottom:15px;
    color:var(--white);
    font-size:2rem;
}

.beauty-service-card > p{
    margin-bottom:26px;
    color:rgba(255,255,255,.65);
    line-height:1.8;
}


/*==============================
    HEALTH & BEAUTY FEATURE
==============================*/

.beauty-feature{
    position:relative;
    overflow:hidden;
    background:#ece8df;
}

.beauty-feature::before{
    content:'';
    position:absolute;
    top:-170px;
    left:46%;
    width:430px;
    height:430px;
    border:1px solid rgba(201,161,75,.1);
    border-radius:50%;
}

.beauty-feature-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1fr);
    align-items:center;
    gap:90px;
}

.beauty-feature-image{
    position:relative;
    min-height:700px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.3),
            transparent 44%
        ),
        url('/assets/images/cheetah.jpeg')
        center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.beauty-feature-image::before{
    content:'';
    position:absolute;
    inset:18px;
    border:1px solid rgba(231,200,121,.38);
    border-radius:18px;
}

.beauty-feature-copy{
    max-width:650px;
}

.beauty-feature-copy > p{
    font-size:.98rem;
    line-height:1.9;
}

.beauty-feature-points{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:35px;
}

.beauty-feature-point{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid rgba(17,17,17,.1);
}

.beauty-feature-point:last-child{
    border-bottom:1px solid rgba(17,17,17,.1);
}

.beauty-point-number{
    color:var(--gold-dark);
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;
    font-weight:700;
}

.beauty-feature-point h3{
    margin-bottom:7px;
    font-size:1.55rem;
}

.beauty-feature-point p{
    margin:0;
    color:var(--gray);
    font-size:.9rem;
    line-height:1.75;
}


/*==============================
    HEALTH & BEAUTY BENEFITS
==============================*/

.beauty-benefits{
    position:relative;
    overflow:hidden;
    background:var(--cream);
}

.beauty-benefits::before{
    content:'';
    position:absolute;
    top:-180px;
    left:50%;
    width:520px;
    height:520px;
    border:1px solid rgba(201,161,75,.11);
    border-radius:50%;
    transform:translateX(-50%);
}

.beauty-benefits .container{
    position:relative;
    z-index:2;
}

.beauty-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.beauty-benefit-card{
    min-height:290px;
    padding:34px 28px;
    border:1px solid rgba(17,17,17,.08);
    border-radius:20px;
    background:var(--white);
    box-shadow:0 14px 36px rgba(0,0,0,.055);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.beauty-benefit-card:hover{
    transform:translateY(-7px);
    border-color:rgba(201,161,75,.38);
    box-shadow:0 22px 46px rgba(0,0,0,.1);
}

.beauty-benefit-card i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border:1px solid rgba(201,161,75,.3);
    border-radius:50%;
    background:rgba(201,161,75,.09);
    color:var(--gold-dark);
    font-size:1.1rem;
}

.beauty-benefit-card h3{
    margin-bottom:13px;
    font-size:1.65rem;
}

.beauty-benefit-card p{
    margin:0;
    color:var(--gray);
    font-size:.89rem;
    line-height:1.75;
}


/*==============================
    HEALTH & BEAUTY CONTACT
==============================*/

.beauty-contact{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            100deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.72)
        ),
        url('/assets/images/health-hero.png')
        center 24% / cover no-repeat;
}

.beauty-contact::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            rgba(201,161,75,.14),
            transparent 45%
        );
}

.beauty-contact-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.beauty-contact-inner > div{
    max-width:780px;
}

.beauty-contact h2{
    margin-bottom:18px;
    color:var(--white);
    font-size:clamp(2.2rem,4vw,3.7rem);
}

.beauty-contact p{
    margin-bottom:0;
    color:rgba(255,255,255,.68);
    line-height:1.85;
}

.beauty-contact .button{
    flex-shrink:0;
}


/*==============================
    HEALTH & BEAUTY RESPONSIVE
==============================*/

@media (max-width:1100px){

    .beauty-intro-grid,
    .beauty-feature-grid{
        gap:55px;
    }

    .beauty-benefit-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:980px){

    .beauty-intro-grid,
    .beauty-feature-grid{
        grid-template-columns:1fr;
    }

    .beauty-intro-copy,
    .beauty-feature-copy{
        max-width:none;
    }

    .beauty-intro-image,
    .beauty-feature-image{
        min-height:620px;
    }

    .beauty-feature-image{
        order:2;
    }

    .beauty-feature-copy{
        order:1;
    }

    .beauty-contact-inner{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media (max-width:760px){

    .beauty-hero{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.35) 0%,
                rgba(0,0,0,.72) 52%,
                rgba(0,0,0,.96) 100%
            ),
            url('/assets/images/health-hero.png')
            center top / cover no-repeat;
    }

    .beauty-service-grid{
        grid-template-columns:1fr;
    }

    .beauty-service-card{
        min-height:auto;
    }

    .beauty-intro-image,
    .beauty-feature-image{
        min-height:540px;
    }

    .beauty-benefit-grid{
        grid-template-columns:1fr;
    }

    .beauty-contact{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.8),
                rgba(0,0,0,.96)
            ),
            url('/assets/images/closeupgreendress.JPG')
            center top / cover no-repeat;
    }

    .beauty-contact .button{
        width:100%;
    }

}

@media (max-width:520px){

    .beauty-intro-image,
    .beauty-feature-image{
        min-height:470px;
        border-radius:22px;
    }

    .beauty-service-card{
        padding:30px 24px;
    }

    .beauty-feature-point{
        grid-template-columns:46px 1fr;
        gap:14px;
    }

    .beauty-benefit-card{
        min-height:auto;
    }

}
/*==================================================
    FINANCIAL PRODUCTS PAGE
==================================================*/


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

.finance-hero{
    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,.96) 0%,
            rgba(8,8,8,.86) 38%,
            rgba(8,8,8,.48) 66%,
            rgba(8,8,8,.18) 100%
        ),
        url('/assets/images/financial-hero.png')
        center center / cover no-repeat;
}

.finance-hero::before{
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201,161,75,.16),
            transparent 45%
        );
}


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

.finance-intro{
    background:var(--cream);
    position:relative;
    overflow:hidden;
}

.finance-intro::before{
    content:'';
    position:absolute;
    top:-180px;
    right:-170px;
    width:460px;
    height:460px;
    border:1px solid rgba(201,161,75,.10);
    border-radius:50%;
}

.finance-intro-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);
    align-items:center;
    gap:90px;
}

.finance-intro-copy{
    max-width:650px;
}

.finance-intro-copy p{
    line-height:1.9;
}

.finance-intro-image{
    min-height:640px;
    border-radius:28px;
    overflow:hidden;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            transparent
        ),
        url('/assets/images/businesssuitbeige.PNG')
        center center / cover no-repeat;

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


/*==============================
    SERVICES
==============================*/

.finance-services{

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #111,
            #181818,
            #111
        );

}

.finance-services::before{

    content:'';

    position:absolute;

    width:560px;
    height:560px;

    left:-180px;
    top:-220px;

    border-radius:50%;
    border:1px solid rgba(201,161,75,.08);

}

.finance-services::after{

    content:'';

    position:absolute;

    width:520px;
    height:520px;

    right:-170px;
    bottom:-180px;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.05);

}

.finance-services .container{

    position:relative;
    z-index:2;

}

.finance-services .section-title{

    color:#fff;

}

.finance-services .section-description{

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

}

.finance-service-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;

}

.finance-service-card{

    padding:38px;

    border-radius:22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    transition:.35s;

}

.finance-service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,161,75,.45);

    background:
        linear-gradient(
            145deg,
            rgba(201,161,75,.09),
            rgba(255,255,255,.02)
        );

}

.finance-service-icon{

    width:62px;
    height:62px;

    border-radius:50%;

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

    margin-bottom:26px;

    color:var(--gold);

    background:rgba(201,161,75,.08);

    border:1px solid rgba(201,161,75,.28);

    font-size:1.25rem;

}

.finance-service-card h3{

    color:#fff;

    margin-bottom:15px;

}

.finance-service-card p{

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

    line-height:1.8;

}


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

.finance-feature{

    background:#ece8df;

}

.finance-feature-grid{

    display:grid;

    grid-template-columns:
        minmax(420px,.9fr)
        minmax(0,1fr);

    gap:90px;

    align-items:center;

}

.finance-feature-image{

    min-height:700px;

    border-radius:28px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.25),
            transparent
        ),
        url('/assets/images/cheetah.jpeg')
        center center / cover no-repeat;

    box-shadow:var(--shadow);

}

.finance-feature-copy{

    max-width:650px;

}

.finance-feature-copy p{

    line-height:1.9;

}

.finance-stats{

    display:grid;

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

    gap:20px;

    margin-top:45px;

}

.finance-stat{

    padding:24px;

    border-radius:16px;

    background:#fff;

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

    text-align:center;

}

.finance-stat h3{

    margin-bottom:8px;

    color:var(--gold-dark);

    font-size:1.8rem;

}

.finance-stat span{

    font-size:.85rem;

    color:var(--gray);

}


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

.finance-contact{

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.74)
        ),

        url('/assets/images/financial-hero.png')
        center top / cover no-repeat;

}

.finance-contact-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.finance-contact-inner div{

    max-width:720px;

}

.finance-contact h2{

    color:#fff;

}

.finance-contact p{

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

    line-height:1.8;

}


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

@media(max-width:1100px){

    .finance-service-grid{

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

    }

}

@media(max-width:980px){

    .finance-intro-grid,
    .finance-feature-grid{

        grid-template-columns:1fr;

    }

    .finance-intro-image,
    .finance-feature-image{

        min-height:560px;

    }

    .finance-contact-inner{

        flex-direction:column;
        align-items:flex-start;

    }

}

@media(max-width:760px){

    .finance-service-grid{

        grid-template-columns:1fr;

    }

    .finance-stats{

        grid-template-columns:1fr;

    }

    .finance-contact .button{

        width:100%;

    }

}

@media(max-width:520px){

    .finance-intro-image,
    .finance-feature-image{

        min-height:420px;

    }

}

/*==================================================
    MEDIA PRODUCTION PAGE
==================================================*/


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

.media-hero{
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.84) 38%,
            rgba(5,5,5,.50) 65%,
            rgba(5,5,5,.15) 100%
        ),
        url('/assets/images/media-hero.png')
        center center / cover no-repeat;
}

.media-hero::before{
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201,161,75,.18),
            transparent 45%
        );
}


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

.media-intro{

    position:relative;
    overflow:hidden;
    background:var(--cream);

}

.media-intro::before{

    content:'';

    position:absolute;

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

    width:480px;
    height:480px;

    border-radius:50%;

    border:1px solid rgba(201,161,75,.10);

}

.media-intro-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(430px,.88fr);

    align-items:center;

    gap:90px;

}

.media-intro-copy{

    max-width:650px;

}

.media-intro-copy p{

    line-height:1.9;

}

.media-intro-image{

    min-height:650px;

    border-radius:28px;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.30),
            transparent
        ),

        url('/assets/images/sweaterdress.jpeg')
        center center / cover no-repeat;

    box-shadow:var(--shadow);

}


/*==============================
    SERVICES
==============================*/

.media-services{

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #111,
            #1b1b1b,
            #111
        );

}

.media-services::before{

    content:'';

    position:absolute;

    width:520px;
    height:520px;

    top:-180px;
    right:-180px;

    border-radius:50%;

    border:1px solid rgba(201,161,75,.08);

}

.media-services::after{

    content:'';

    position:absolute;

    width:560px;
    height:560px;

    bottom:-220px;
    left:-180px;

    border-radius:50%;

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

}

.media-services .container{

    position:relative;
    z-index:2;

}

.media-services .section-title{

    color:#fff;

}

.media-services .section-description{

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

}

.media-service-grid{

    display:grid;

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

    gap:26px;

}

.media-service-card{

    padding:38px;

    border-radius:22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    transition:.35s;

}

.media-service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,161,75,.45);

    background:
        linear-gradient(
            145deg,
            rgba(201,161,75,.10),
            rgba(255,255,255,.02)
        );

}

.media-service-icon{

    width:62px;
    height:62px;

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

    border-radius:50%;

    margin-bottom:26px;

    color:var(--gold);

    background:rgba(201,161,75,.08);

    border:1px solid rgba(201,161,75,.30);

    font-size:1.25rem;

}

.media-service-card h3{

    color:#fff;

    margin-bottom:15px;

}

.media-service-card p{

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

    line-height:1.8;

}


/*==============================
    PROCESS
==============================*/

.media-process{

    background:#ece8df;

}

.media-process-grid{

    display:grid;

    grid-template-columns:
        minmax(420px,.9fr)
        minmax(0,1fr);

    gap:90px;

    align-items:center;

}

.media-process-image{

    min-height:700px;

    border-radius:28px;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            transparent
        ),

        url('/assets/images/cheetah.jpeg')
        center center / cover no-repeat;

    box-shadow:var(--shadow);

}

.media-process-copy{

    max-width:650px;

}

.media-process-copy p{

    line-height:1.9;

}

.media-process-steps{

    margin-top:42px;

}

.media-process-step{

    display:grid;

    grid-template-columns:55px 1fr;

    gap:20px;

    padding:22px 0;

    border-top:1px solid rgba(17,17,17,.10);

}

.media-process-step:last-child{

    border-bottom:1px solid rgba(17,17,17,.10);

}

.media-step-number{

    color:var(--gold-dark);

    font-family:'Cormorant Garamond',serif;

    font-size:1.7rem;

    font-weight:700;

}

.media-process-step h3{

    margin-bottom:8px;

}

.media-process-step p{

    margin:0;

}


/*==============================
    CLIENTS
==============================*/

.media-clients{

    background:var(--cream);

}

.media-client-grid{

    display:grid;

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

    gap:24px;

}

.media-client-card{

    padding:34px 28px;

    border-radius:20px;

    background:#fff;

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

    box-shadow:0 14px 36px rgba(0,0,0,.05);

    transition:.35s;

}

.media-client-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,161,75,.40);

}

.media-client-card i{

    width:58px;
    height:58px;

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

    border-radius:50%;

    margin-bottom:22px;

    color:var(--gold-dark);

    background:rgba(201,161,75,.08);

    border:1px solid rgba(201,161,75,.25);

}

.media-client-card h3{

    margin-bottom:14px;

}

.media-client-card p{

    line-height:1.75;

}


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

.media-contact{

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.72)
        ),

        url('/assets/images/media-hero.png')
        center top / cover no-repeat;

}

.media-contact-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.media-contact-inner div{

    max-width:720px;

}

.media-contact h2{

    color:#fff;

}

.media-contact p{

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

    line-height:1.8;

}


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

@media(max-width:1100px){

    .media-service-grid{

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

    }

    .media-client-grid{

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

    }

}

@media(max-width:980px){

    .media-intro-grid,
    .media-process-grid{

        grid-template-columns:1fr;

    }

    .media-intro-image,
    .media-process-image{

        min-height:560px;

    }

    .media-process-image{

        order:2;

    }

    .media-process-copy{

        order:1;

    }

    .media-contact-inner{

        flex-direction:column;
        align-items:flex-start;

    }

}

@media(max-width:760px){

    .media-service-grid{

        grid-template-columns:1fr;

    }

    .media-client-grid{

        grid-template-columns:1fr;

    }

    .media-contact .button{

        width:100%;

    }

}

@media(max-width:520px){

    .media-intro-image,
    .media-process-image{

        min-height:420px;

    }

}

/*==================================================
    MS. L.A. STYLES PAGE
==================================================*/


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

.styles-hero{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.97) 0%,
            rgba(0,0,0,.88) 36%,
            rgba(0,0,0,.52) 62%,
            rgba(0,0,0,.18) 100%
        ),
        url('/assets/images/hoodieandroses.jpeg')
        center top / cover no-repeat;
}

.styles-hero::before{
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201,161,75,.18),
            transparent 44%
        );
}


/*==============================
    STORY
==============================*/

.styles-story{
    position:relative;
    overflow:hidden;
    background:var(--cream);
}

.styles-story::before{
    content:'';
    position:absolute;
    top:-180px;
    right:-170px;
    width:470px;
    height:470px;
    border:1px solid rgba(201,161,75,.11);
    border-radius:50%;
}

.styles-story-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1fr);
    align-items:center;
    gap:90px;
}

.styles-story-image{
    min-height:700px;
    border-radius:28px;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.24),
            transparent 42%
        ),
        url('/assets/images/grayjean3.jpeg')
        center top / cover no-repeat;
    box-shadow:var(--shadow);
}

.styles-story-copy{
    max-width:650px;
}

.styles-story-copy p{
    line-height:1.9;
}


/*==============================
    EXPERTISE
==============================*/

.styles-expertise{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            #111 0%,
            #1a1a1a 55%,
            #111 100%
        );
}

.styles-expertise::before{
    content:'';
    position:absolute;
    top:-220px;
    left:-180px;
    width:540px;
    height:540px;
    border:1px solid rgba(201,161,75,.1);
    border-radius:50%;
}

.styles-expertise .container{
    position:relative;
    z-index:2;
}

.styles-expertise .section-title{
    color:var(--white);
}

.styles-pillars{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.styles-pillars article{
    min-height:330px;
    padding:36px 28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.styles-pillars article:hover{
    transform:translateY(-8px);
    border-color:rgba(201,161,75,.42);
    background:
        linear-gradient(
            145deg,
            rgba(201,161,75,.1),
            rgba(255,255,255,.02)
        );
}

.styles-pillars i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin-bottom:25px;
    border:1px solid rgba(201,161,75,.35);
    border-radius:50%;
    background:rgba(201,161,75,.08);
    color:var(--gold-light);
    font-size:1.2rem;
}

.styles-pillars h3{
    margin-bottom:14px;
    color:var(--white);
    font-size:1.8rem;
}

.styles-pillars p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:.9rem;
    line-height:1.8;
}


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

.styles-timeline{
    position:relative;
    overflow:hidden;
    background:#ece8df;
}

.styles-timeline::before{
    content:'';
    position:absolute;
    top:48%;
    left:0;
    width:100%;
    height:1px;
    background:rgba(201,161,75,.25);
}

.styles-timeline .container{
    position:relative;
    z-index:2;
}

.timeline{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
}

.timeline-item{
    position:relative;
    padding:34px 26px;
    border:1px solid rgba(17,17,17,.08);
    border-radius:20px;
    background:rgba(255,255,255,.86);
    box-shadow:0 14px 36px rgba(0,0,0,.055);
}

.timeline-item span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-bottom:22px;
    border-radius:50%;
    background:var(--gold);
    color:var(--primary);
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    font-weight:700;
}

.timeline-item h3{
    margin-bottom:12px;
    font-size:1.55rem;
}

.timeline-item p{
    margin:0;
    color:var(--gray);
    font-size:.89rem;
    line-height:1.75;
}


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

.styles-quote{
    position:relative;
    overflow:hidden;
    text-align:center;
    background:
        linear-gradient(
            110deg,
            rgba(0,0,0,.93),
            rgba(0,0,0,.78)
        ),
        url('/assets/images/grayjean.jpeg')
        center center / cover no-repeat;
}

.styles-quote::before{
    content:'“';
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(201,161,75,.13);
    font-family:'Cormorant Garamond',serif;
    font-size:18rem;
    line-height:1;
}

.styles-quote .container{
    position:relative;
    z-index:2;
}

.styles-quote blockquote{
    max-width:980px;
    margin:0 auto 24px;
    color:var(--white);
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2rem,4vw,3.6rem);
    font-weight:600;
    line-height:1.3;
}

.quote-author{
    color:var(--gold-light);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}


/*==============================
    CONTACT
==============================*/

.styles-contact{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            100deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.7)
        ),
        url('/assets/images/grayjean2.jpeg')
        center top / cover no-repeat;
}

.styles-contact::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            rgba(201,161,75,.14),
            transparent 45%
        );
}

.styles-contact-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.styles-contact-inner > div{
    max-width:760px;
}

.styles-contact h2{
    margin-bottom:18px;
    color:var(--white);
    font-size:clamp(2.3rem,4vw,3.8rem);
}

.styles-contact p{
    margin-bottom:0;
    color:rgba(255,255,255,.7);
    line-height:1.85;
}


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

@media (max-width:1100px){

    .styles-pillars,
    .timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:980px){

    .styles-story-grid{
        grid-template-columns:1fr;
    }

    .styles-story-image{
        min-height:620px;
    }

    .styles-contact-inner{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media (max-width:760px){

    .styles-hero{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.32) 0%,
                rgba(0,0,0,.72) 52%,
                rgba(0,0,0,.97) 100%
            ),
            url('/assets/images/grayjean.jpeg')
            center top / cover no-repeat;
    }

    .styles-pillars,
    .timeline{
        grid-template-columns:1fr;
    }

    .styles-story-image{
        min-height:540px;
    }

    .styles-contact .button{
        width:100%;
    }

}

@media (max-width:520px){

    .styles-story-image{
        min-height:470px;
        border-radius:22px;
    }

    .styles-pillars article,
    .timeline-item{
        min-height:auto;
        padding:30px 24px;
    }

    .styles-quote blockquote{
        font-size:2rem;
    }

}