:root {
    --bg-green: #0a1f1a;
    --nav-black: #000000;
    --gold: #c5a059;
    --white: #f1f7f4;
    --serif: 'Cormorant Garamond', serif;
    --sans: 'Montserrat', sans-serif;
    --hand: 'Dancing Script', cursive;
}

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

body {
    background-color: var(--bg-green);
    color: var(--white);
    font-family: var(--sans);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* NAVBAR - SOLID BLACK & VISIBLE */
.site-header {
    position: fixed;
    top: 0; width: 100%;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: var(--nav-black);
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.logo { font-size: 1.5rem; text-decoration: none; color: white; letter-spacing: 5px; font-weight: 200; }
.logo span { color: var(--gold); font-weight: 400; }

.nav-links a {
    text-decoration: none; color: white;
    font-size: 0.7rem; letter-spacing: 2px;
    margin-left: 30px; text-transform: uppercase;
    font-weight: 500; transition: 0.3s;
}
.nav-links a:hover { color: var(--gold); }

/* HANDWRITING STYLE */
.handwriting {
    font-family: var(--hand);
    color: var(--gold);
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400;
    font-size: 1.2em;
}

/* MAGIC SPLIT TEXT EFFECT */
.split-text { display: inline-block; overflow: hidden; }
.word { display: inline-block; transform: translateY(100%); opacity: 0; filter: blur(10px); }

/* IMAGE MASKING */
.brush-mask {
    position: relative; overflow: hidden;
    mask-image: radial-gradient(circle, black 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
    border: 1px solid rgba(197, 160, 89, 0.2);
}
.placeholder {
    aspect-ratio: 3/4; background: #0d2b24;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: rgba(197, 160, 89, 0.3);
    font-size: 0.7rem; border: 1px dashed rgba(197, 160, 89, 0.2);
}
.brush-mask img { width: 100%; height: 100%; object-fit: cover; }

/* LAYOUT */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-family: var(--serif); font-size: clamp(3.5rem, 10vw, 8rem); font-weight: 300; line-height: 0.9; }
.eyebrow { font-size: 0.8rem; letter-spacing: 10px; color: var(--gold); margin-bottom: 20px; display: block; }
.hero-sub { font-weight: 100; opacity: 0.5; letter-spacing: 3px; margin-top: 20px; }

.region-sec { padding: 120px 0; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
.alt .grid { grid-template-columns: 0.9fr 1.1fr; }

.text-block h2 { font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 300; margin-bottom: 25px; line-height: 1; }
.text-block p { font-size: 1.05rem; opacity: 0.6; line-height: 1.8; max-width: 450px; font-weight: 300; }
.num { color: var(--gold); display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 2px; }

.btn-gold {
    display: inline-block; margin-top: 40px;
    padding: 18px 55px; border: 1px solid var(--gold);
    color: var(--gold); text-decoration: none;
    text-transform: uppercase; font-size: 0.7rem; letter-spacing: 4px;
    transition: 0.5s;
}
.btn-gold:hover { background: var(--gold); color: black; }

footer { padding: 80px 5%; text-align: center; font-size: 0.6rem; opacity: 0.3; color: var(--gold); }

[data-reveal] { visibility: hidden; }

@media (max-width: 1024px) {
    .grid, .alt .grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .text-block p { margin: 0 auto; }
}