/* Titan Shot It — V2 Homepage Hero
   Premium wedding hero image
   Loaded AFTER /assets/style.css */

.hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .82) 0%,
            rgba(0, 0, 0, .58) 40%,
            rgba(0, 0, 0, .18) 72%,
            rgba(0, 0, 0, .06) 100%
        ),
       var(--hero-image, url('/assets/hero-home-v2.jpg')) !important;

    background-size: cover !important;
    background-position: var(--hero-position, center center) !important;
    background-repeat: no-repeat !important;
}
/* =========================================
   TITAN SHOT IT V2 — MOBILE HERO FIX
   ========================================= */

@media (max-width: 780px) {

    .hero {
       min-height: 100vh !important;

        /* Move the crop toward the couple */
        background-position: var(--hero-position, 72% center) !important;

        /* Stronger mobile readability */
        background-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.88) 0%,
                rgba(0,0,0,.70) 45%,
                rgba(0,0,0,.38) 72%,
                rgba(0,0,0,.18) 100%
            ),
           var(--hero-image, url('/assets/hero-home-v2.jpg')) !important;
    }

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

    .hero h1 {
        font-size: clamp(52px, 14vw, 78px);
        line-height: .98;
    }

    .hero-lead {
        max-width: 95%;
        font-size: 16px;
        line-height: 1.7;
    }
}

@media (max-width: 500px) {

    .hero {
        /* Slightly more rightward crop on narrow phones */
        background-position: var(--hero-position, 76% center) !important;
    }

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

    .hero h1 {
        font-size: clamp(48px, 13vw, 68px);
    }
}
/* ==========================================================
   TITAN SHOT IT — HOMEPAGE HERO BALANCED FINAL
   Bright imagery + controlled readability + responsive focal crop
   ========================================================== */

/* =========================
   DESKTOP
   ========================= */

.hero {
    background-image: var(--hero-image) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: var(--hero-position, 50% 50%) !important;
}

/*
   Very restrained left-side cinematic protection.
   The couple/right side remains essentially untouched.
*/
.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(24, 20, 16, .44) 0%,
            rgba(24, 20, 16, .31) 22%,
            rgba(24, 20, 16, .16) 40%,
            rgba(24, 20, 16, .055) 55%,
            rgba(24, 20, 16, 0) 68%
        ) !important;
}

/* Kill any old second dark veil */
.hero::after {
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* HTML overlay must not darken the photograph */
.hero-overlay {
    background: transparent !important;
    opacity: 0 !important;
}

/* Keep content safely above image treatment */
.hero-content {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
}

/* Editorial kicker */
.hero-content .eyebrow,
.hero-kicker {
    color: #c8a96b !important;
    opacity: 1 !important;
}

/* Main headline */
.hero-content h1,
.hero-title {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow:
        0 2px 12px rgba(0,0,0,.14),
        0 1px 2px rgba(0,0,0,.10) !important;
}

/* Gold editorial emphasis */
.hero-content h1 em,
.hero-title em {
    color: #d2b16d !important;
    opacity: 1 !important;
}

/* Supporting copy */
.hero-lead,
.hero-content .hero-lead {
    color: rgba(255,255,255,.94) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.12) !important;
}

/* Primary CTA */
.hero .button.gold {
    background: #c8a96b !important;
    color: #101010 !important;
    border-color: #c8a96b !important;
    opacity: 1 !important;
}

/* Secondary CTA */
.hero .button.outline {
    background: rgba(10,10,10,.06) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.72) !important;
    opacity: 1 !important;
}

/* Scroll text */
.hero-scroll {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
}


/* ==========================================================
   TABLET
   Keep the couple inside frame
   ========================================================== */

@media (max-width: 1024px) {

    .hero {
        /*
           Shift camera toward the RIGHT-HAND subject.
           This keeps bride + groom in view.
        */
        background-position: 64% 50% !important;
    }

    .hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(12,11,10,.29) 0%,
                rgba(12,11,10,.18) 35%,
                rgba(12,11,10,.055) 58%,
                rgba(12,11,10,0) 75%
            ) !important;
    }
}


/* ==========================================================
   MOBILE
   Subject-aware portrait crop
   ========================================================== */

@media (max-width: 780px) {

    .hero {
       min-height: calc(100vh - 90px) !important;

        /*
           THIS is the important mobile correction.
           Move viewport toward bride + groom rather than
           allowing cover to centre on the architecture.
        */
        background-position: 72% 50% !important;
    }

    /*
       Mobile needs a soft LOCAL wash behind the words,
       but absolutely no heavy black overlay.
    */
    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(12,11,10,.05) 0%,
                rgba(12,11,10,.09) 23%,
                rgba(12,11,10,.17) 53%,
                rgba(12,11,10,.25) 78%,
                rgba(12,11,10,.31) 100%
            ) !important;
    }

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

    .hero-content h1,
    .hero-title {
        color: #ffffff !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.16) !important;
    }

    .hero-lead,
    .hero-content .hero-lead {
        color: rgba(255,255,255,.96) !important;
    }

    .hero .button.outline {
        background: rgba(10,10,10,.08) !important;
        border-color: rgba(255,255,255,.76) !important;
    }
}


/* ==========================================================
   SMALL MOBILE
   Slight additional focal adjustment
   ========================================================== */

@media (max-width: 500px) {

    .hero {
        background-position: 75% 50% !important;
    }
}

/* =========================================================
   TITAN SHOT IT — FINAL HOMEPAGE HERO REFINEMENT
   Bright image + premium readable typography
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;
}

/* Keep the photograph bright */
.hero::after {
    content: none !important;
}

/* Soft LOCAL veil behind copy only — not across the couple */
.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(18, 15, 12, .42) 0%,
            rgba(18, 15, 12, .28) 24%,
            rgba(18, 15, 12, .12) 42%,
            rgba(18, 15, 12, .025) 57%,
            rgba(18, 15, 12, 0) 70%
        ) !important;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 820px;
}

/* Eyebrow — stronger and properly legible */
.hero-content .eyebrow {
    color: #d7b56d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 3.2px !important;
    line-height: 1.6 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
    opacity: 1 !important;
}

/* Hero title — cleaner and stronger */
.hero-content h1 {
    color: #fffdf8 !important;
    font-weight: 500 !important;
    line-height: .94 !important;
    letter-spacing: -.02em !important;
    text-shadow:
        0 2px 12px rgba(0,0,0,.22),
        0 8px 32px rgba(0,0,0,.12);
}

/* Supporting paragraph */
.hero-content .hero-lead {
    color: rgba(255,255,255,.94) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* Buttons remain premium, not washed out */
.hero .button.gold {
    background: #c8a96b !important;
    color: #101010 !important;
    border-color: #c8a96b !important;
}

.hero .button.outline {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.72) !important;
    background: rgba(20,18,16,.08) !important;
    backdrop-filter: blur(2px);
}

/* =========================================================
   MOBILE — controlled editorial composition
   ========================================================= */

@media (max-width: 780px) {

    .hero {
        min-height: calc(100vh - 90px) !important;
        background-position: 68% center !important;
    }

    .hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(16,14,12,.05) 0%,
                rgba(16,14,12,.08) 20%,
                rgba(16,14,12,.20) 46%,
                rgba(16,14,12,.32) 72%,
                rgba(16,14,12,.40) 100%
            ),
            linear-gradient(
                90deg,
                rgba(16,14,12,.18) 0%,
                rgba(16,14,12,.10) 55%,
                rgba(16,14,12,0) 100%
            ) !important;
    }

    .hero-content {
        width: min(88%, 620px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-content .eyebrow {
        font-size: 10px !important;
        letter-spacing: 2.5px !important;
        line-height: 1.65 !important;
        max-width: 310px !important;
        margin-bottom: 20px !important;
    }

    .hero-content h1 {
        font-size: clamp(52px, 13vw, 78px) !important;
        line-height: .94 !important;
        max-width: 620px !important;
        margin: 0 0 24px !important;
    }

    .hero-content .hero-lead {
        font-size: 17px !important;
        line-height: 1.65 !important;
        max-width: 540px !important;
        margin-bottom: 28px !important;
    }

    .hero .button-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 540px !important;
    }

    .hero .button-row .button {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .hero-scroll {
        left: 7% !important;
        bottom: 28px !important;
    }
}

@media (max-width: 480px) {

    .hero {
        background-position: 70% center !important;
    }

    .hero-content {
        width: 86% !important;
    }

    .hero-content h1 {
        font-size: clamp(46px, 12.3vw, 64px) !important;
        line-height: .96 !important;
    }

    .hero-content .hero-lead {
        font-size: 16px !important;
    }
}

/* ==========================================================
   TITAN SHOT IT
   HOMEPAGE SPLIT HERO — FINAL ARCHITECTURE
   Copy and photography are permanently separated.
   ========================================================== */


/* ---------- MAIN HERO ---------- */

.home-split-hero {
    width: 100%;
    min-height: calc(100vh - 90px);
    display: grid;
    grid-template-columns: 43% 57%;
    background: #f3f0e9;
    overflow: hidden;
   
}


/* ---------- LEFT EDITORIAL PANEL ---------- */

.home-split-copy {
    position: relative;
    display: flex;
    align-items: center;
    background:
    linear-gradient(
        135deg,
        rgba(214, 193, 150, 0.14) 0%,
        rgba(243, 240, 233, 0.92) 42%,
        rgba(235, 226, 207, 0.34) 100%
    ),
    #f3f0e9;
    color: #151412;
}
.home-split-copy::after {
    content: "";
    position: absolute;
    top: 7%;
    right: 0;
    bottom: 7%;
    width: 1px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(200, 169, 107, 0.35) 20%,
        rgba(200, 169, 107, 0.55) 50%,
        rgba(200, 169, 107, 0.35) 80%,
        transparent
    );

    pointer-events: none;
}

.home-split-copy-inner {
    width: 100%;
    max-width: 660px;
    padding:
        clamp(70px, 8vw, 130px)
        clamp(42px, 7vw, 112px)
        clamp(55px, 7vw, 90px);
}


/* ---------- EYEBROW ---------- */

.home-split-eyebrow {
    margin: 0 0 30px;
    color: #a78344;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* ---------- HEADLINE ---------- */

.home-split-title {
    margin: 0;
    max-width: 610px;
    color: #171613;
    font-family: 'Playfair Display', serif;
    font-size: clamp(58px, 6.4vw, 108px);
    font-weight: 500;
    line-height: .92;
    letter-spacing: -2.5px;
}

.home-split-title em {
    display: block;
    margin-top: 8px;
    color: #b78f4b;
    font-weight: 500;
    font-style: italic;
}


/* ---------- SUPPORTING COPY ---------- */

.home-split-lead {
    max-width: 540px;
    margin: 34px 0 0;
    color: #5d5952;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.8;
}


/* ---------- CTA BUTTONS ---------- */

.home-split-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.home-split-actions .button {
    min-width: 180px;
    text-align: center;
}

.home-split-outline {
    border-color: #28251f !important;
    color: #28251f !important;
}

.home-split-outline:hover {
    background: #171613 !important;
    border-color: #171613 !important;
    color: #fff !important;
}


/* ---------- SCROLL DETAIL ---------- */

.home-split-scroll {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 58px;

    color: #777065;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
}

.home-split-scroll span {
    color: #b78f4b;
    font-size: 15px;
    transition: transform .25s ease;
}

.home-split-scroll:hover span {
    transform: translateY(4px);
}


/* ---------- RIGHT PHOTOGRAPH ---------- */

.home-split-media {
    position: relative;
    min-height: calc(100vh - 90px);

    background-size: cover;
    background-repeat: no-repeat;

    /* Admin X/Y positioning remains authoritative */
    background-position: center center;

    isolation: isolate;
}


/*
   Very light photographic finishing only.
   NOT a dark veil.
*/
.home-split-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(24,20,15,.05) 0%,
            rgba(24,20,15,0) 18%
        );
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .home-split-hero {
        grid-template-columns: 46% 54%;
        min-height: 760px;
    }

    .home-split-copy-inner {
        padding:
            80px
            clamp(38px, 5vw, 68px)
            65px;
    }

    .home-split-title {
        font-size: clamp(54px, 7vw, 78px);
    }

    .home-split-media {
        min-height: 760px;
    }
}


/* ==========================================================
   MOBILE
   Text and photograph become completely independent panels.
   ========================================================== */

@media (max-width: 780px) {

    .home-split-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: #f3f0e9;
    }


    /* TEXT FIRST */

    .home-split-copy {
        order: 1;
        min-height: auto;
    }

    .home-split-copy-inner {
        max-width: none;
        padding:
            72px
            7%
            62px;
    }

    .home-split-eyebrow {
        margin-bottom: 22px;
        font-size: 9px;
        line-height: 1.8;
        letter-spacing: 2.2px;
    }

    .home-split-title {
        max-width: 100%;
        font-size: clamp(51px, 15vw, 72px);
        line-height: .95;
        letter-spacing: -1.5px;
    }

    .home-split-title em {
        margin-top: 6px;
    }

    .home-split-lead {
        margin-top: 27px;
        max-width: 94%;
        font-size: 16px;
        line-height: 1.75;
    }


    /* BUTTONS */

    .home-split-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 31px;
    }

    .home-split-actions .button {
        width: 100%;
        min-width: 0;
        padding: 16px 20px;
    }


    /* SMALL SCROLL LABEL */

    .home-split-scroll {
        margin-top: 38px;
    }


    /* IMAGE SECOND */

    .home-split-media {
        order: 2;

        width: 100%;
        min-height: 0;
        height: clamp(470px, 125vw, 690px);

        /*
         The admin positioning still controls the image.
         No typography occupies this photograph.
        */
        background-size: cover;
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 480px) {

    .home-split-copy-inner {
        padding:
            58px
            7%
            52px;
    }

    .home-split-title {
        font-size: clamp(47px, 14.5vw, 62px);
    }

    .home-split-lead {
        max-width: 100%;
        font-size: 15px;
    }

    .home-split-media {
        height: 118vw;
        min-height: 430px;
        max-height: 600px;
    }

}
/* ==========================================================
   TITAN SHOT IT — MOBILE HERO REFINEMENT
   Desktop intentionally untouched.
   ========================================================== */

@media (max-width: 780px) {

    /* Overall mobile hero */
    .home-split-hero {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        background: #f4f0e7 !important;
    }


    /* =========================
       EDITORIAL PANEL
       ========================= */

    .home-split-copy {
        order: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
        background:
            linear-gradient(
                145deg,
                #f8f5ee 0%,
                #f2eee5 100%
            ) !important;
    }

    .home-split-copy-inner {
        width: 100% !important;
        max-width: none !important;

        /* tighter and cleaner than current mobile */
        padding:
            48px
            7%
            46px !important;
    }


    /* Eyebrow — prevent clipping */
    .home-split-eyebrow {
        display: block !important;
        margin: 0 0 20px !important;

        color: #a67f3f !important;

        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.65 !important;
        letter-spacing: 2px !important;

        white-space: normal !important;
        overflow: visible !important;
    }


    /* Main title */
    .home-split-title {
        margin: 0 !important;
        max-width: 100% !important;

        font-size: clamp(48px, 13.5vw, 64px) !important;
        line-height: .96 !important;
        letter-spacing: -1.3px !important;
    }

    .home-split-title em {
        display: block !important;
        margin-top: 4px !important;
    }


    /* Description */
    .home-split-lead {
        max-width: 100% !important;
        margin: 26px 0 0 !important;

        font-size: 15.5px !important;
        line-height: 1.72 !important;
    }


    /* CTAs */
    .home-split-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;

        margin-top: 29px !important;
    }

    .home-split-actions .button {
        width: 100% !important;
        min-width: 0 !important;

        padding: 16px 18px !important;
    }


    /*
       Desktop has enough space for this detail.
       Mobile does not need it.
    */
    .home-split-scroll {
        display: none !important;
    }


    /* =========================
       HERO PHOTOGRAPH
       ========================= */

    .home-split-media {
        order: 2 !important;

        display: block !important;
        width: 100% !important;

        /*
           Important:
           stop the photograph becoming an enormous
           second mobile screen.
        */
        height: 62vh !important;
        min-height: 430px !important;
        max-height: 590px !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;

        /*
           Keep admin focal positioning operational.
           We are NOT hard-coding the couple's position.
        */

        position: relative !important;

        /*
           Creates an intentional architectural boundary
           before the following section.
        */
        border-bottom: 28px solid #f4f0e7 !important;
    }


    /*
       No dark treatment over customer photographs.
    */
    .home-split-media::before,
    .home-split-media::after {
        display: none !important;
    }


    /* Next section must begin independently */
    #home-creator {
        clear: both !important;
        position: relative !important;
        margin-top: 0 !important;
    }

}


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

@media (max-width: 480px) {

    .home-split-copy-inner {
        padding:
            42px
            7%
            42px !important;
    }

    .home-split-title {
        font-size: clamp(46px, 13.2vw, 59px) !important;
    }

    .home-split-lead {
        font-size: 15px !important;
    }

    .home-split-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 3 / 2 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    border-bottom-width: 24px !important;
}

}
/* TITAN — FINAL MOBILE HERO CROP TUNING */
@media (max-width: 780px) {

    .home-split-media {
        /*
         * Keep the client's focal control horizontally,
         * but give portrait subjects safer vertical headroom.
         */
        background-position:
            var(--hero-position-x, 40%) 38% !important;
    }

}
/* ==========================================================
   TITAN SHOT IT — HERO / BEHIND THE LENS TRANSITION
   Premium editorial section separator
   ========================================================== */

.home-split-hero {
    position: relative;
    border-bottom: 0 !important;
    margin-bottom: 18px;
}

/* Deep architectural separation band */
.home-split-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 18px;

    background:
        linear-gradient(
            to bottom,
            #0a0a0a 0%,
            #111111 44%,
            rgba(200, 169, 107, 0.55) 45%,
            rgba(200, 169, 107, 0.55) 52%,
            #111111 53%,
            #0a0a0a 100%
        );

    pointer-events: none;
    z-index: 5;
}
@media (max-width: 780px) {

    .home-split-hero {
        margin-bottom: 12px;
    }

    .home-split-hero::after {
        bottom: -12px;
        height: 12px;
    }
}
/* ==========================================================
   TITAN — FINAL MOBILE EYEBROW VISIBILITY FIX
   ========================================================== */

@media (max-width: 780px) {

    .home-split-copy,
    .home-split-copy-inner {
        overflow: visible !important;
    }

    .home-split-eyebrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        z-index: 20 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        color: #a67f3f !important;
        font-family: 'DM Sans', Arial, sans-serif !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.65 !important;
        letter-spacing: 1.7px !important;
        text-transform: uppercase !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        transform: none !important;
        clip: auto !important;
    }
}
/* ==========================================================
   TITAN — MOBILE FIXED HEADER / HERO OFFSET
   Keeps hero content clear of the fixed navigation bar
   ========================================================== */

@media (max-width: 780px) {

    .home-split-hero {
        padding-top: 68px !important;
    }

    .home-split-copy-inner {
        padding-top: 34px !important;
    }
}