/* ==========================================================
   HOME 3 CONCEPT -- full-bleed image hero (header + hero only)
========================================================== */
.home3-hero{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 9rem;
    padding-bottom: 8rem;
    background: linear-gradient(180deg, #050505, #0c0c0c);
    background-size: cover;
    background-position: 78% center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Swapped in by site-images.js once an image is uploaded for the
   "home3-hero" slot in the backstage dashboard. */
.home3-hero.has-uploaded-image{
    background-image: none; /* backgroundImage is set inline by the JS */
}

/* No dark overlay by design -- the source photo is already dark enough
   for the text to sit on top of cleanly. If contrast ever becomes an
   issue on a lighter crop of the image, add a ::before with a subtle
   gradient here rather than flattening the whole photo. */

/* This hero deliberately does NOT use the shared .container (which is
   centered with a fixed 1440px max-width). On very wide screens that
   centering left a dead gap between the left edge and the text block,
   with the text pinned at a "laptop" width no matter how wide the
   viewport got. Instead this wrapper scales its inset with the
   viewport itself, so the copy tracks the left edge proportionally at
   every screen size. */
.home3-hero-inner{
    width: 100%;
    padding-left: clamp(3rem, 12vw, 14rem);
    padding-right: clamp(3rem, 12vw, 14rem);
}

.home3-hero .hero-copy{
    max-width: min(700px, 44vw);
}

/* Tightened copy stack: eyebrow / headline / typewriter / buttons --
   the static paragraph and micro-copy line were dropped so the text
   block doesn't compete as hard with a photographic background. */
.home3-hero .hero-copy h1{
    margin-bottom: 0;
}

.home3-typewriter-line{
    margin-top: 1.75rem;
    margin-bottom: 3rem;
}

.home3-hero .hero-buttons{
    margin-bottom: 0;
}

/* Laptop range -- the text box and the photo's subject (the monitor)
   are sized independently of each other, so at these widths the
   headline was wide/large enough to run straight into the image.
   Rather than touching the padding again (which would break the
   large-screen balance you approved), shrink the text column and the
   type itself here, and nudge the photo further right so the subject
   sits a little further from the copy. */
@media (max-width: 1680px) and (min-width: 901px){
    .home3-hero{
        background-position: 88% center;
    }
    .home3-hero .hero-copy{
        max-width: min(480px, 38vw);
    }
    .home3-hero .hero-copy h1{
        font-size: clamp(2.6rem, 4.4vw, 4rem);
    }
}

@media (max-width: 900px){
    .home3-hero{
        min-height: 92vh;
        padding-top: 7rem;
        background-position: 85% center;
        position: relative;
    }
    /* Below the laptop breakpoint the headline used to run full-width and
       straight into the photo's monitor subject, since neither the text
       column nor the type size shrank for phones -- this scrim + narrower
       column keeps the copy legible without touching the desktop image or
       layout. */
    .home3-hero::before{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.55) 45%, rgba(5,5,5,.1) 75%);
        pointer-events: none;
    }
    .home3-hero-inner{
        position: relative;
        z-index: 1;
    }
    .home3-hero .hero-copy{
        max-width: min(480px, 88vw);
    }
    .home3-hero .hero-copy h1{
        font-size: clamp(2.2rem, 8vw, 3rem);
    }
}