/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    height: 85vh;
    background: url('../assets/images/hero-bg.png') center/cover no-repeat;
    background-color: #333; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
}
.hero-content { position: relative; z-index: 2; color: #fff; padding: 0 20px; }
.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-sub { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; }
.btn-gold {
    background: linear-gradient(45deg, var(--gold), #d4af37);
    color: #fff;
    padding: 15px 40px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    display: inline-block;
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4); }

/* --- ABOUT PREVIEW --- */
.split-layout { display: flex; align-items: center; gap: 60px; }
.about-image-wrapper { flex: 1; }
.image-frame {
    position: relative;
    padding: 10px;
    border: 2px solid var(--gold);
}
.image-frame img { width: 100%; display: block; }
.about-text-content { flex: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-size: 0.85rem; margin-bottom: 10px; }
.about-text-content h2 { font-family: var(--font-heading); font-size: 2.5rem; margin-bottom: 20px; color: var(--dark); }
.btn-text { font-weight: 700; border-bottom: 2px solid var(--gold); color: var(--dark); padding-bottom: 5px; margin-top: 20px; display: inline-block; }

/* --- CATEGORIES TILES --- */
.bg-light { background-color: var(--grey); }
.divider-gold { height: 3px; width: 60px; background: var(--gold); margin: 15px auto 40px; }
.grid-4 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.category-card {
    background: #fff; padding: 40px 20px; text-align: center;
    border: 1px solid #eee; transition: 0.3s; display: block;
}
.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 3px solid var(--gold);
}
.icon-box { font-size: 40px; color: var(--gold); margin-bottom: 20px; }
.category-card h3 { font-family: var(--font-heading); margin-bottom: 10px; color: var(--dark); }

@media (max-width: 968px) {
    .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .split-layout { flex-direction: column; }
    .hero-content h1 { font-size: 2.2rem; }
}