:root {
    --bg: #ffffff;
    --accent: #8B5A2B;
    --text-dark: #121212;
    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text-dark);
    overflow-x: hidden;
}

.section-container {
    max-width: 1440px;
    margin: 80px auto;
    padding: 0 40px;
}

.header-box { text-align: center; margin-bottom: 60px; }
.header-box h2 { font-size: 3rem; font-weight: 300; letter-spacing: -0.04em; }
.header-box h2 b { color: var(--accent); font-weight: 700; }

/* Grid & Columns */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
    align-items: center;
}

.column { display: flex; flex-direction: column; gap: 24px; }

/* Card Style - New with Images */
.service-card {
    position: relative;
    height: 260px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    opacity: 0; /* JS Animation */
    transform: translateY(30px);
}

.card-bg-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

.card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 2;
    transition: var(--transition);
}

.card-content {
    position: relative;
    z-index: 3;
    color: #fff;
}

.icon-box { color: var(--accent); margin-bottom: 15px; }
.card-content h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card-content p { font-size: 0.9rem; color: rgba(255,255,255,0.7); }

/* Hover Effects */
.service-card:hover .card-bg-img { transform: scale(1.1); }
.service-card:hover .card-overlay { background: rgba(139, 90, 43, 0.6); }
.service-card:hover { border-color: var(--accent); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

/* Central Image Mask */
.hero-stage { position: relative; height: 650px; }
.image-mask {
    width: 100%; height: 100%; border-radius: 40px; overflow: hidden;
    mask-image: radial-gradient(circle, black 45%, transparent 95%);
    -webkit-mask-image: radial-gradient(circle, black 45%, transparent 95%);
}
.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* Banner */
.premium-banner {
    margin-top: 80px; height: 350px; border-radius: 30px; position: relative;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.banner-bg {
    position: absolute; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1470&auto=format&fit=crop');
    background-size: cover; background-position: center; transition: 1s ease;
}
.premium-banner:hover .banner-bg { transform: scale(1.05); }
.logo-container { z-index: 2; padding: 20px 50px; border: 1px solid #fff; backdrop-filter: blur(10px); color: #fff; text-transform: uppercase; letter-spacing: 10px; font-weight: 700; transition: 0.4s; }
.premium-banner:hover .logo-container { background: #fff; color: #000; letter-spacing: 15px; }

@media (max-width: 1100px) {
    .main-grid { grid-template-columns: 1fr; }
    .hero-stage { height: 400px; grid-row: 1; }
}