/* ─── Reset & Base ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body { overflow-x: hidden; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; }

    /* ─── Nav ─── */
    #nav { transition: background 0.4s ease, box-shadow 0.4s ease; }
    #nav.scrolled { background: rgba(61, 43, 31, 0.97); box-shadow: 0 1px 20px rgba(0,0,0,0.2); }
    .nav-link { transition: opacity 0.3s; }

    /* ─── Scroll Indicator ─── */
    .scroll-line { animation: scrollDown 1.8s ease-in-out infinite; }
    @keyframes scrollDown {
        0%   { top: -16px; opacity: 0; }
        30%  { opacity: 1; }
        60%  { opacity: 1; }
        100% { top: 16px; opacity: 0; }
    }

    /* ─── Hero Animations ─── */
    .hero-subtitle { animation: fadeUp 0.8s ease forwards 0.3s; }
    .hero-title    { animation: fadeUp 0.8s ease forwards 0.5s; }
    .hero-body     { animation: fadeUp 0.8s ease forwards 0.7s; }
    .hero-cta      { animation: fadeUp 0.8s ease forwards 0.9s; }

    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── Section Tags ─── */
    .section-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #B85C38;
        background: rgba(184, 92, 56, 0.08);
        padding: 0.4em 1em;
        border-radius: 100px;
    }
    .section-tag-light {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.6);
        background: rgba(255,255,255,0.08);
        padding: 0.4em 1em;
        border-radius: 100px;
    }

    /* ─── Section Headings ─── */
    .section-heading {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 700;
        line-height: 1.1;
        color: #3D2B1F;
    }
    .section-heading-light {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 700;
        line-height: 1.1;
        color: #ffffff;
    }

    /* ─── Body Text ─── */
    .body-text {
        font-size: 1.05rem;
        line-height: 1.75;
        color: #6B5B50;
    }
    .body-text-light {
        font-size: 1.05rem;
        line-height: 1.75;
        color: rgba(255,255,255,0.65);
    }

    /* ─── Reveal Animations (below-fold only) ─── */
    @media (prefers-reduced-motion: no-preference) {
        .reveal-up,
        .reveal-left,
        .reveal-right {
            opacity: 1;
            transform: none;
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
    }
    /* Default hidden state for JS-enhanced reveals */
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 0;
    }
    .reveal-up    { transform: translateY(40px); }
    .reveal-left  { transform: translateX(-40px); }
    .reveal-right { transform: translateX(40px); }
    .reveal-up.visible,
    .reveal-left.visible,
    .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

    /* ─── Product Cards ─── */
    .product-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 8px;
        transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .product-card:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.15);
        transform: translateY(-4px);
    }

    /* ─── Mobile Link ─── */
    .mobile-link {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        transition: opacity 0.3s;
    }
    .mobile-link:hover { opacity: 0.7; }

    /* ─── Utility ─── */
    ::selection { background: rgba(184, 92, 56, 0.2); }