:root {
    --primary:      #1A2E3E; 
    --accent:       #7CA669;  
    --bright-text:  #B4E1A2;
    --gold:         #C5A059;    
    --off-white:    #F9F7F2;
}

body{
    font-family:        'Montserrat', sans-serif; 
    background-color:   var(--off-white); 
    color:              var(--primary);
    letter-spacing:     0.02em;
    scroll-behavior:    smooth;
}

h1, h2, .serif-title{
    font-family:    'Cormorant Garamond', serif; 
    font-weight:    600; 
    color:          var(--primary);
}

/* --- PREMIUM NAVIGATION --- */
.navbar{
    background:         rgba(255, 255, 255, 0.95);
    backdrop-filter:    blur(20px);
    padding:            25px 0;
    border-bottom:      1px solid rgba(0,0,0,0.05);
    transition:         all 0.5s ease;
}

.navbar-brand{
    font-family:    'Cormorant Garamond', serif;
    font-size:      1.8rem;
    letter-spacing: 2px;
}

.navbar-logo{
    height:         45px;
    width:          auto;
    margin-right:   12px;
}

.nav-link{
    font-weight:    600;
    font-size:      0.85rem;
    text-transform: uppercase;
    color:          var(--primary) !important;
    margin:         0 15px;
    opacity:        0.7;
    transition:     0.3s;
}

.nav-link:hover, .nav-link.active{
    opacity:    1;
    color:      var(--accent) !important;
}

/* --- HERO --- */
.hero {
    height:                 100vh;
    display:                flex;
    align-items:            center;
    background:             linear-gradient(rgba(26, 46, 62, 0.6), rgba(26, 46, 62, 0.4)), url('../img/hero.png');
    background-size:        cover;
    background-position:    center;
    color:                  white;
    clip-path:              polygon(0 0, 100% 0, 100% 92%, 0% 100%);
}

.hero h1{
    color:          white;
    font-size:      5rem;
    line-height:    1.1;
    margin-bottom:  2rem;
}

.hero-btn{ 
    border:             1px solid white;
    color:              white;
    padding:            15px 40px; 
    border-radius:      0;
    text-transform:     uppercase;
    font-weight:        700; 
    transition:         0.4s;
    background:         transparent;
    text-decoration:    none;
    display:            inline-block;
}

.hero-btn:hover{
    background: white;
    color:      var(--primary);
}

/* --- BENTO LUXURY GRID (Equal Height) --- */
.bento-card{ 
    background:     white;
    border-radius:  0;
    padding:        50px; 
    box-shadow:     20px 20px 60px rgba(0,0,0,0.03);
    border:         1px solid rgba(0,0,0,0.02);
    transition:     0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    height:         100%; 
    display:        flex;
    flex-direction: column;
}

.bento-card:hover{
    transform:  translateY(-10px);
    box-shadow: 30px 30px 80px rgba(0,0,0,0.08);
}

/* --- SECTION STYLING --- */
.section-padding{
    padding:    120px 0;
}

.label-gold{
    color:          var(--gold);
    font-weight:    700;
    text-transform: uppercase;
    font-size:      0.75rem;
    letter-spacing: 3px;
    margin-bottom:  20px;
    display:        block;
}

/* --- PRICING --- */
.tier-card{
    background: white;
    border:     1px solid #EAEAEA;
    padding:    60px 40px;
    text-align: center;
    transition: 0.5s;
    height:     100%;
}

.tier-card.featured{
    background: var(--primary); 
    color:      white;
    border:     none;
    transform:  scale(1.05);
    z-index:    10;
}

.tier-card hr{
    opacity:    0.1;
    margin:     30px 0;
}

/* --- CONTACT BOX & VIBRANT PLACEHOLDERS --- */
.contact-box{
    background: var(--primary);
    padding:    100px 0;
    color:      white;
}

.form-dark input, .form-dark textarea{
    background:     transparent;
    border:         none;
    border-bottom:  2px solid rgba(255,255,255,0.2); 
    border-radius:  0;
    color:          white;
    padding:        20px 0;
    margin-bottom:  20px;
    font-weight:    500;
    width:          100%;
}

.form-dark input:focus, .form-dark textarea:focus{
    background:     transparent;
    color:          white;
    border-bottom:  2px solid var(--accent);
    box-shadow:     none;
    outline:        none;
}

.form-dark input::placeholder, .form-dark textarea::placeholder{
    color: var(--bright-text) !important;
    opacity:        1; 
    text-transform: uppercase;
    font-size:      0.75rem;
    letter-spacing: 1.5px;
}

footer{
    padding:    60px 0;
    background: white;
    text-align: center;
    border-top: 1px solid #eee;
}