/* ========================================================================
   BRUTALIST HERO - new build, matching the header/footer's design
   language (dark bg, thick black borders, offset shadows, Courier New,
   green/yellow accent palette). Typography uses clamp() for fluid
   scaling across every screen width, rather than fixed breakpoints -
   this avoids the whole class of "missed a breakpoint" bugs since the
   size changes continuously instead of jumping at specific widths.
   ======================================================================== */

.xbrutal-hero {
    font-family: 'Courier New', Courier, monospace;
    background:#DAF7E5 ;
    border-bottom: 1px solid #000;
    overflow: hidden;
}

.xbrutal-hero-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.xbrutal-hero-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.xbrutal-hero-stamp {
    background: #FFD600;
    color: #000;
    border: 4px solid #000;
    box-shadow: 5px 5px 0 #000;
    padding: 0.5rem 0.9rem;
    font-weight: 900;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

.xbrutal-hero-stamp-alt {
    background: #00A878;
    color: #fff;
    transform: rotate(3deg);
}

.xbrutal-hero-title {
    color: #000;
    font-size: clamp(1.8rem, 5.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 clamp(0.75rem, 2vw, 1.1rem);
    font-family: 'Raleway', sans-serif;
    text-shadow: -0.001em -0.001em 1px rgba(255,255,255,.15);
    
    z-index: -2;
text-shadow: 1px 2px 1px rgba(0,0,0,.4);
}

.xbrutal-hero-subtitle {
    display: inline-block;
    color: #111;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    font-size: clamp(0.95rem, 2.2vw, 1.3rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 0.4rem 1rem;
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    
}

.xbrutal-hero-tagline {
    color: #000;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 1px;
}


/* Marquee - continuous auto-scroll, two identical <span> tracks placed
   side by side and shifted left by exactly one track's width, looping
   seamlessly. */
.xbrutal-marquee {
    background: #FFD600;
    border-top: 1px solid #000;
    overflow: hidden;
    padding: 0.7rem 0;
}

.xbrutal-marquee-track {
    display: flex;
    width: max-content;
    animation: xbrutal-marquee-scroll 22s linear infinite;
    /* Starts paused - a small script measures the real pixel width of
       one span and sets --marquee-shift before starting playback, so
       there's never a visible flash of the animation running against
       the wrong (fallback) distance before that measurement completes. */
    animation-play-state: paused;
    will-change: transform;
    transform: translateZ(0);
}

.xbrutal-marquee-track span {
    color: #000;
    font-weight: 900;
    /* FIXED font size, not vw-based clamp() - this is the actual fix.
       The -50% animation target is recalculated by the browser against
       this element's CURRENT pixel width on every frame. A vw-based
       size continuously changes as the real viewport width changes -
       which mobile browsers do constantly as their address bar
       collapses/expands during scroll - so the target width could
       shift mid-animation, landing the -50% jump on the wrong pixel
       and showing up as exactly the "merging text and jumping"
       symptom reported. A fixed size (stepped via media queries
       instead of a continuous vw formula) only changes at explicit
       breakpoints, never mid-animation, which is what this element
       specifically needs given it's the only animated one in this
       whole hero section - every other clamp()/vw use here is on
       static text, where a recalculation has no animation to disrupt. */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 2rem;
    /* flex:0 0 auto is a stronger, more complete lock than flex-shrink
       alone (also fixes flex-grow and flex-basis), and box-sizing
       guarantees each span's padding is counted the same way in both
       copies - together these ensure the two halves measure to exactly
       the same pixel width, which is what the seamless loop actually
       depends on. A mismatch here - even by a pixel or two - is what
       shows up as both a stutter AND cut-off/overlapping text at the
       loop point, since the -50% jump no longer lands exactly on the
       real seam. */
    flex: 0 0 auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .xbrutal-marquee-track span {
        font-size: 0.8rem;
    }
}

@keyframes xbrutal-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marquee-shift, -50%)); }
}

/* Respect users who've asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .xbrutal-marquee-track {
        animation: none;
    }
}