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

        body {
            font-family: 'Inter', sans-serif;
            background-color: #F7F5F0;
            color: #1F2A3A;
            scroll-behavior: smooth;
        }

        .case-wrapper {
            max-width: 1440px;
            margin: 0 auto;
            background: #FFFFFF;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
        }

        /* Hero Section */
        .hero-sunroom {
            position: relative;
            height: 85vh;
            min-height: 600px;
            background: url('https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1600&q=80') center/cover no-repeat;
            display: flex;
            align-items: flex-end;
            padding: 3rem 4rem;
        }
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%);
            z-index: 1;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 780px;
            color: white;
        }
        .hero-tag {
            font-size: 0.8rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(6px);
            display: inline-block;
            padding: 0.3rem 1rem;
            border-radius: 40px;
            margin-bottom: 1rem;
            font-weight: 500;
        }
        .hero-sunroom h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.8rem;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 1rem;
            text-shadow: 0 2px 15px rgba(0,0,0,0.2);
        }
        .hero-sub {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 550px;
        }

        /* intro brief (short 200 chars-ish) */
        .brief-intro {
            max-width: 900px;
            margin: 2.5rem auto 0 auto;
            padding: 1.5rem 2rem;
            background: #F2EFEA;
            border-left: 6px solid #C2A575;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #2C3E4E;
            font-weight: 450;
            border-radius: 0 20px 20px 0;
        }

        /* main grid */
        .main-grid {
            display: grid;
            grid-template-columns: 1.6fr 0.9fr;
            gap: 3rem;
            padding: 3rem 4rem;
        }

        .article-body p {
            font-size: 1rem;
            line-height: 1.65;
            color: #2C3E4E;
            margin-bottom: 1.4rem;
        }
        .article-body h2 {
            font-size: 1.8rem;
            font-weight: 600;
            margin: 2rem 0 0.8rem;
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.3px;
            border-left: 4px solid #C2A575;
            padding-left: 1rem;
        }
        .article-body h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 1.8rem 0 0.5rem;
            color: #966C3E;
        }
        .pull-quote {
            margin: 2rem 0;
            background: #F7F5F0;
            padding: 1.5rem 2rem;
            border-radius: 28px;
            font-style: italic;
            font-size: 1.1rem;
            font-weight: 450;
            border-left: 4px solid #C2A575;
            color: #2B3B4C;
        }
        .feature-img {
            width: 100%;
            border-radius: 28px;
            margin: 1.5rem 0;
            box-shadow: 0 12px 28px -8px rgba(0,0,0,0.1);
        }

        /* sidebar */
        .sidebar-card {
            background: #FEFCF9;
            border-radius: 32px;
            padding: 1.8rem;
            border: 1px solid #E9E2D7;
            margin-bottom: 2rem;
        }
        .sidebar-card h4 {
            font-size: 1.2rem;
            font-weight: 600;
            border-bottom: 2px solid #C2A575;
            display: inline-block;
            margin-bottom: 1.2rem;
        }
        .project-data {
            list-style: none;
        }
        .project-data li {
            display: flex;
            justify-content: space-between;
            padding: 0.8rem 0;
            border-bottom: 1px solid #EAE3D8;
            font-size: 0.85rem;
        }
        .data-label {
            font-weight: 500;
            color: #7F6B4A;
        }
        .data-value {
            font-weight: 600;
            color: #2C3E4E;
        }

        /* gallery grid */
        .gallery-section {
            padding: 0 4rem 3rem 4rem;
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            margin-top: 1.5rem;
        }
        .gallery-item {
            border-radius: 28px;
            overflow: hidden;
            transition: transform 0.25s ease;
            background: #FEFCF9;
        }
        .gallery-item img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            display: block;
        }
        .gallery-caption {
            padding: 0.8rem 0 0.2rem;
            font-size: 0.75rem;
            color: #7F6B4A;
            text-align: center;
            font-weight: 450;
        }

        /* footer */
        .case-footer {
            padding: 2rem 4rem;
            border-top: 1px solid #E4DDD2;
            background: #FCFAF7;
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: #8C7A62;
        }

        @media (max-width: 1000px) {
            .main-grid { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
            .hero-sunroom { padding: 2rem; height: 65vh; }
            .hero-sunroom h1 { font-size: 2.6rem; }
            .gallery-grid { grid-template-columns: 1fr; }
            .gallery-section { padding: 0 2rem 2rem 2rem; }
            .case-footer { flex-direction: column; gap: 0.8rem; padding: 1.5rem; }
        }