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

        :root {
            --copper: #C97C4D;
            --copper-dark: #a5612f;
            --copper-glow: #C97C4D99;
            --cream: #FAF6F0;
            --dark: #1a1209;
            --font-serif: 'Playfair Display', Georgia, serif;
            --font-sans: 'Lato', sans-serif;
        }

        body {
            background: var(--dark);
            color: var(--cream);
            font-family: var(--font-sans);
            min-height: 100vh;
        }

        /* ── HERO ── */
        .hero {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .hero__bg {
            position: absolute;
            inset: 0;
            background-image: url('hero.jpg');
            /* ← replace with your generated image */
            background-size: cover;
            background-position: center 40%;
            filter: brightness(0.55);
            transition: transform 8s ease-out;
        }

        .hero:hover .hero__bg {
            transform: scale(1.04);
        }

        /* subtle warm vignette */
        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(26, 18, 9, .7) 100%);
            pointer-events: none;
        }

        /* ── HEADER LOGO ── */
        .hero__logo {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 3rem;
            text-decoration: none;
        }

        .hero__logo svg {
            width: 72px;
            height: 72px;
            transition: filter 0.3s ease;
        }

        .hero__logo:hover svg {
            filter: drop-shadow(0 0 10px var(--copper)) drop-shadow(0 0 24px var(--copper-glow));
        }

        .hero__logo-label {
            font-family: var(--font-serif);
            font-size: 0.75rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--copper);
        }

        /* ── TITLE ── */
        .hero__title {
            position: relative;
            z-index: 2;
            font-family: var(--font-serif);
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 400;
            color: var(--cream);
            letter-spacing: 0.05em;
            text-align: center;
            margin-bottom: 0.5rem;
        }

        .hero__subtitle {
            position: relative;
            z-index: 2;
            font-family: var(--font-sans);
            font-size: 0.85rem;
            font-weight: 300;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--copper);
            margin-bottom: 3.5rem;
        }

        /* ── BUTTON GRID ── */
        .hero__buttons {
            position: relative;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            max-width: 760px;
            padding: 0 1.5rem;
        }

        .proj-btn {
            display: inline-block;
            padding: 0.75rem 1.8rem;
            border: 1.5px solid var(--copper);
            color: var(--cream);
            background: rgba(26, 18, 9, 0.45);
            backdrop-filter: blur(6px);
            font-family: var(--font-serif);
            font-size: 1rem;
            letter-spacing: 0.06em;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .proj-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--copper);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
            z-index: -1;
        }

        .proj-btn:hover::before {
            transform: scaleX(1);
        }

        .proj-btn:hover {
            color: var(--dark);
            box-shadow: 0 0 18px var(--copper-glow);
            transform: translateY(-2px);
        }

        .proj-btn:active {
            transform: translateY(0);
        }

        /* ── FOOTER ── */
        .page-footer {
            text-align: center;
            padding: 2rem 1rem;
            font-size: 0.75rem;
            letter-spacing: 0.12em;
            color: rgba(250, 246, 240, 0.35);
            font-family: var(--font-sans);
        }

        .page-footer a {
            color: var(--copper);
            text-decoration: none;
        }

        .page-footer a:hover {
            text-decoration: underline;
        }