/* =========================================================
   HERO SECTION
   ========================================================= */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem 4rem;
    background: #16130F;
}

/* =========================================================
   HERO BACKGROUND VIDEO
   ========================================================= */

.hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    /* Make the video fully non-interactive: no tap-to-play overlay,
       no long-press context menu, no accidental fullscreen on iOS */
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* =========================================================
   VIDEO DARK OVERLAY
   Keeps the text readable over the video
   ========================================================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(22, 19, 15, 0.55) 0%,
            rgba(22, 19, 15, 0.68) 55%,
            rgba(22, 19, 15, 0.88) 100%
        );
}

/* =========================================================
   WARM WOODEN COLOUR TINT
   ========================================================= */

.hero::before {
    content: '';

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        radial-gradient(
            ellipse at 15% 85%,
            rgba(184, 124, 76, 0.16) 0%,
            transparent 55%
        ),

        radial-gradient(
            ellipse at 80% 15%,
            rgba(201, 160, 99, 0.12) 0%,
            transparent 50%
        );

    pointer-events: none;
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 3;

    max-width: 750px;

    margin: 0 auto;
}

/* =========================================================
   HERO BADGE
   ========================================================= */

.hero-badge {
    display: inline-block;

    font-family: var(--font-mono);

    background: rgba(22, 19, 15, 0.25);

    color: var(--brass);

    border: 1px solid rgba(201, 160, 99, 0.4);

    padding: 0.45rem 1.1rem;

    border-radius: var(--radius-sm);

    font-size: 0.78rem;

    font-weight: 500;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin-bottom: 1.8rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* =========================================================
   HERO HEADING
   ========================================================= */

.hero h1 {
    font-family: var(--font-display);

    font-size: clamp(2.6rem, 5.5vw, 4.2rem);

    font-weight: 600;

    color: var(--parchment);

    line-height: 1.12;

    margin-bottom: 1.3rem;

    letter-spacing: -0.5px;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Highlighted word */

.hero h1 span {
    color: var(--oak);

    font-style: italic;
}

/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.hero p {
    font-size: 1.15rem;

    color: rgba(241, 233, 216, 0.78);

    max-width: 560px;

    margin: 0 auto 2.3rem;

    line-height: 1.65;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-buttons {
    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    justify-content: center;
}

/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.btn {
    display: inline-block;

    padding: 0.85rem 2rem;

    border-radius: var(--radius-sm);

    font-weight: 600;

    font-size: 0.95rem;

    text-decoration: none;

    cursor: pointer;

    border: none;

    transition: var(--transition);

    letter-spacing: 0.2px;
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn-primary {
    background: var(--oak);

    color: #fff;

    box-shadow:
        0 4px 18px rgba(184, 124, 76, 0.35);
}

.btn-primary:hover {
    background: var(--oak-deep);

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(184, 124, 76, 0.4);
}

/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.btn-outline {
    background: rgba(22, 19, 15, 0.15);

    color: var(--parchment);

    border: 1.5px solid rgba(241, 233, 216, 0.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    
}

.btn-outline:hover {
    background: rgba(241, 233, 216, 0.08);

    border-color: var(--parchment);

    transform: translateY(-2px);
}

/* =========================================================
   WOOD TEXTURE AT BOTTOM OF HERO
   ========================================================= */

.hero-wood-texture {
    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 80px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.10) 3px,
            rgba(0, 0, 0, 0.10) 4px
        );

    pointer-events: none;

    z-index: 4;
}

/* =========================================================
   SIGNATURE DOVETAIL-JOINT DIVIDER
   ========================================================= */

.joint-divider {
    width: 100%;

    line-height: 0;

    background: var(--paper);
}

.joint-divider svg {
    width: 100%;

    height: 22px;

    display: block;
}

.joint-divider svg path {
    fill: var(--charcoal);
}

/* =========================================================
   MOBILE HERO
   ========================================================= */

@media (max-width: 768px) {

    .hero {
        min-height: 100svh;

        padding:
            7rem
            1.5rem
            4rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-badge {
        font-size: 0.68rem;

        padding:
            0.4rem
            0.8rem;

        margin-bottom: 1.4rem;
    }

    .hero h1 {
        font-size: clamp(
            2.2rem,
            10vw,
            3.2rem
        );

        line-height: 1.12;

        margin-bottom: 1.1rem;
    }

    .hero p {
        font-size: 1rem;

        line-height: 1.6;

        margin-bottom: 2rem;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        width: 100%;

        max-width: 320px;

        margin: 0 auto;
    }

    .btn {
        width: 100%;

        text-align: center;

        padding:
            0.9rem
            1.5rem;
    }

    .hero-wood-texture {
        height: 55px;
    }
}

/* =========================================================
   SMALL MOBILE DEVICES
   ========================================================= */

@media (max-width: 480px) {

    .hero {
        padding:
            6.5rem
            1.2rem
            3.5rem;
    }

    .hero h1 {
        font-size: 2.15rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-badge {
        letter-spacing: 0.07em;
    }
}

/* =========================================================
   REDUCED MOTION
   Respect users who prefer reduced animation
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-video {
        display: none;
    }

    .hero {
        background:
            repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.015) 0px,
                rgba(255, 255, 255, 0.015) 1px,
                transparent 1px,
                transparent 68px
            ),
            linear-gradient(
                160deg,
                #23201B 0%,
                #1C1815 55%,
                #16130F 100%
            );
    }

    .btn {
        transition: none;
    }
}