/*
 * Stylesheet for WorldProtest.org one‑page site
 *
 * This file defines the layout, typography and animations for the
 * custom protest website. The design draws inspiration from
 * action‑oriented activist sites and incorporates a dark palette
 * with bright yellow accents. All fonts are served locally and
 * animated elements use pure CSS where possible.
 */

/* Import custom typewriter fonts */
@font-face {
    font-family: 'Typewriter';
    src: url('../fonts/Typewriter-LAYy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Typewriter Bold';
    src: url('../fonts/TypewriterBold-PZ2P.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* CSS reset and global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Typewriter', sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Colour palette variables for easy tweaks */
:root {
    --primary: #000000;
    /* Change the accent from bright yellow to a dark red as requested */
    --accent: #8b0000;
    --secondary: #ffffff;
}

/* Hero section */
header.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--accent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark overlay over hero background for readability */
header.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 90%;
}

/* Container for typewriter lines */
#hero-typewriter {
    display: inline-block;
}


#hero-typewriter .type-line {
    display: block;
    font-family: 'Typewriter Bold', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.2;
    color: var(--accent);
}

/* Subtitle under hero text */
/*
 * Subtitle under hero text
 *
 * By default all copy in the subtitle should be white to improve
 * readability on top of the dark photographic hero background. We
 * override the colour here from the accent (yellow) to white so that
 * only specific phrases wrapped in `.highlight` are emphasised with the
 * accent colour. The subtle glow remains to help the text stand out
 * against the busy background imagery. The `margin-top` spacing is
 * preserved from the original declaration.
 */
.subtitle {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--secondary);
    /* Use a neutral white glow instead of yellow; this preserves legibility
       without tinting the white subtitle text back toward the accent colour. */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    opacity: 0;
}

/*
 * Ensure subtitle text inside the hero uses the secondary (white) colour.
 *
 * The hero container itself defines `color: var(--accent)` which cascades
 * down to all child elements. Because `.subtitle` only has a class
 * selector it is less specific than `header.hero` (which uses an
 * element and a class selector) and therefore the colour property
 * declared on `.subtitle` is overridden. By targeting `.subtitle`
 * specifically within the hero we boost the specificity and reliably
 * override the accent colour set on the hero.
 */
header.hero .subtitle {
    color: var(--secondary);
}

/* Highlight spans inside subtitles. These spans draw attention to key
   phrases by applying the site's accent colour and bold weight. */
.subtitle .highlight {
    color: var(--accent);
    font-weight: bold;
    /* Match the accent colour in the shadow as well */
    text-shadow: 0 0 6px rgba(139, 0, 0, 0.55);
}

/* Utility highlight class used for phrases that should remain yellow even
 * after switching the global accent to dark red. The span below uses
 * `yellow-highlight` to colour "ALL AROUND THE WORLD" in the subhero text. */
.yellow-highlight {
    color: #ffd700;
    font-weight: bold;
}

/* Bright red text utility for specific hero lines. Lines marked up
 * with the `red-text` class will appear a vivid red to distinguish
 * them from the darker accent colour used elsewhere. */
.type-line.red-text {
    color: #ff0000;
}

/* Once a subtitle becomes visible via the `reveal` class, animate its
   opacity and vertical position. This override ensures the subtitle has a
   smooth fade in rather than snapping into place. */
.subtitle.reveal.is-visible {
    animation: fadeIn 1.6s ease forwards;
    opacity: 1;
}

/* Styling for the days‑since‑war counter. This block sits beneath the hero
   text and uses the accent colour to stand out. */
.war-counter {
    /* The war counter now uses a flexible container that holds a label and
       a series of individual digit blocks. The margin separates it from
       the hero actions above, and flex alignment ensures the label and
       digits sit nicely on the same baseline. */
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'Typewriter Bold', sans-serif;
    text-shadow: none;
}

/* Label preceding the counter digits */
.counter-label {
    font-size: 1.1rem;
    color: var(--accent);
    margin-right: 6px;
}

/* Container that wraps the digit elements */
/* Display container for the days/minutes/seconds counter. Use inline-block
   and padding so the entire string stands out without individual boxes.
   Combined with the .count-num spans defined below, this improves legibility. */
.counter-digits {
    display: inline-block;
    background: #111;
    padding: 12px 20px;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 1.3rem;
    color: var(--secondary);
    font-family: 'Typewriter Bold', sans-serif;
}

/* Style applied to the numeric portions of the counter (e.g. the day, minute,
   and second values). These appear in gold to contrast with the surrounding text. */
.count-num {
    color: #ffd700;
    font-size: 1.5rem;
    font-family: 'Typewriter Bold', sans-serif;
}

/* Individual digit styling to mimic a mechanical counter. The subtle
   gradients and shadows create a three‑dimensional appearance, while
   rounded corners and borders give each digit a polished look. */
.counter-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Improve readability for the seconds counter: larger digits with
       a dark background and yellow digits instead of the original
       yellow gradient. */
    width: 50px;
    height: 80px;
    border-radius: 8px;
    background: #111;
    border: 1px solid #444;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.6);
    font-size: 2.2rem;
    color: #ffd700;
    font-family: 'Typewriter Bold', sans-serif;
}

/* Separator styling for the comma separators inserted between
   thousands groups in the seconds counter. These separators are
   narrower than the digit boxes and use the accent colour to clearly
   delineate groups of three digits. */
.counter-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 2.2rem;
    color: var(--accent);
    height: 80px;
    font-family: 'Typewriter Bold', sans-serif;
}

/* Status message below the newsletter form */
.newsletter-status {
    margin-top: 12px;
    font-size: 1rem;
    color: var(--accent);
}

/* Info section */
.info-section {
    padding: 60px 20px;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--secondary);
    text-align: center;
}

.info-section h2 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2rem;
    font-family: 'Typewriter Bold', sans-serif;
}

.cta-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.cta-box {
    background-color: #111;
    padding: 20px;
    border: 2px solid var(--accent);
    width: 300px;
    color: var(--secondary);
    text-align: center;
    transition: transform 0.3s ease;
    border-radius: 6px;
}

/*
 * Bounce animation for CTA boxes. The box bounces up and down once and
 * scales slightly to draw attention when hovered. Using keyframes
 * eliminates the need for a fixed transform and produces a smoother
 * interactive feel.
 */
@keyframes cta-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-12px) scale(1.05);
    }
    60% {
        transform: translateY(-6px) scale(1.03);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Apply the bounce animation on hover */
.cta-box:hover {
    animation: cta-bounce 0.6s ease-out;
}

.cta-box h3 {
    color: var(--accent);
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-family: 'Typewriter Bold', sans-serif;
}

.cta-box p {
    font-size: 1rem;
    line-height: 1.4;
}

/* Newsletter section */
.newsletter-section {
    padding: 60px 20px;
    background-color: var(--primary);
    text-align: center;
    color: var(--secondary);
}

.newsletter-section h2 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2rem;
    font-family: 'Typewriter Bold', sans-serif;
}

.newsletter-section p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.4;
}

.newsletter-section form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.newsletter-section input[type="email"] {
    padding: 10px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    font-size: 1rem;
    width: 260px;
    color: #000;
}

/* Style the country dropdown similarly to the email input */
.newsletter-section select {
    padding: 10px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    font-size: 1rem;
    width: 260px;
    color: #000;
}

.newsletter-section button {
    padding: 10px 20px;
    border: none;
    background-color: var(--accent);
    color: #000;
    font-size: 1rem;
    font-family: 'Typewriter Bold', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.newsletter-section button:hover {
    background-color: #e6c200;
}

/* Footer styles */
.footer {
    background-color: var(--primary);
    color: var(--secondary);
    text-align: center;
    padding: 20px;
    font-size: 1rem;
}

.footer span {
    display: inline-block;
    font-family: 'Typewriter Bold', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

/* Fade in animation reused across sections */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
}

/* ===== USER REQUESTED UPDATES ===== */

/* Increase overall text sizes */
body {
    font-size: 18px;
}

#hero-typewriter .type-line {
    font-size: clamp(2.5rem, 6vw, 3rem);
}

/*
 * When redefining the subtitle further down the stylesheet we avoid
 * changing its colour again. The size override remains but the colour
 * inherits from the earlier declaration (white). Overriding the colour
 * here would revert the subtitle back to the accent colour and clash with
 * the user's instruction for white subheader copy.
 */
.subtitle {
    /* Make the subhero text larger per user request */
    font-size: 1.8rem;
    color: var(--secondary);
}

.info-section h2,
.newsletter-section h2 {
    font-size: 2.5rem;
}

.cta-box h3 {
    font-size: 1.8rem;
}

.cta-box p,
.newsletter-section p {
    font-size: 1.1rem;
}

/* Make hero text more visible */
#hero-typewriter {
    background: rgba(0,0,0,0.85);
    padding: 20px 30px;
    border-radius: 8px;
}

/* Increase footer rotating section width and emphasis */
.footer {
    width: 100%;
    padding: 40px 20px;
}

#footer-rotating {
    display: block;
    width: 100%;
    font-size: 1.8rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== CUSTOM USER MODIFICATIONS ===== */

/* Hide the playlist section entirely but still allow audio to play in the background */
.playlist-section {
    display: none !important;
}

/* Style for the CAPTCHA container added to the newsletter form */
.captcha-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Match the captcha input styling to other form inputs */
.captcha-field input {
    padding: 10px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    font-size: 1rem;
    width: 260px;
    color: #000;
    font-family: 'Typewriter', sans-serif;
}

/* Share button styling below the newsletter form */
.share-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--accent);
    color: #000;
    font-size: 1rem;
    font-family: 'Typewriter Bold', sans-serif;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.share-button:hover {
    background-color: #e6c200;
}

/* Reduce the size of the demands lead text to satisfy the request for a smaller headline */
.demands-lead {
    font-size: clamp(1.2rem, 3vw, 2rem) !important;
}

/* Apply the Typewriter font to all form controls and labels for consistency */
input,
select,
button,
textarea,
label {
    font-family: 'Typewriter', sans-serif;
}



/* ===== UPGRADE ENHANCEMENTS ===== */


.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    /* Match the accent colour on the nav border instead of yellow */
    border-bottom: 1px solid rgba(139, 0, 0, 0.35);
    z-index: 20;
}

.site-nav a {
    color: var(--secondary);
    text-decoration: none;
    font-size: 1rem;
}

.site-nav .brand {
    color: var(--accent);
    font-family: 'Typewriter Bold', sans-serif;
    font-size: 1.1rem;
}

.nav-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.nav-links a:hover,
.site-nav .brand:hover {
    color: var(--accent);
}

.hero {
    min-height: 100vh;
    padding: 120px 20px 60px;
}

#hero-typewriter {
    display: inline-block;
    background: rgba(0, 0, 0, 0.88);
    padding: 24px 34px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 215, 0, 0.25);
    margin-top: 200px;
}

.subtitle {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-button {
    display: inline-block;
    text-decoration: none;
    background: var(--accent);
    color: #000;
    padding: 14px 20px;
    border-radius: 4px;
    font-family: 'Typewriter Bold', sans-serif;
    font-size: 1rem;
    border: 2px solid var(--accent);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-button-outline {
    background: transparent;
    color: var(--secondary);
}

.hero-button-outline:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
}

.scroll-cue {
    /*
     * The scroll cue originally used absolute positioning inside the hero
     * container. When the viewport dimensions changed (e.g. resizing the
     * browser window or opening developer tools), the cue would sometimes
     * slip out of the visible area. Switching to `fixed` positioning pins
     * the cue relative to the viewport so it always remains centered
     * horizontally near the bottom of the screen. The z‑index ensures it
     * stays above the hero background overlay.
     */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    color: var(--secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.9rem;
    opacity: 0.8;
}

.info-copy {
    margin-top: 28px;
    max-width: 980px;
    font-size: 1.2rem;
    line-height: 1.65;
}

/*
 * Offset anchored scrolling to account for the fixed navigation bar.
 *
 * When clicking links in the header the browser scrolls the target
 * section so that its top edge lines up with the top of the viewport.
 * Because our `.site-nav` is fixed and overlays the page content, the
 * very top of each section can be obscured. Applying a
 * `scroll-margin-top` ensures there is always enough space above the
 * section to allow the navigation bar to sit without covering the
 * heading. The value here should roughly equal the height of the nav
 * plus a little breathing room. If the nav wraps to multiple lines on
 * narrow viewports the JS in `script.js` will update this margin at
 * runtime to match the actual nav height.
 */
section,
header.hero {
    scroll-margin-top: 120px;
}

.cta-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cta-action {
    display: inline-block;
    margin-top: 14px;
    color: var(--accent);
    font-family: 'Typewriter Bold', sans-serif;
    font-size: 1rem;
}

.newsletter-note {
    margin-top: 14px;
    opacity: 0.8;
    font-size: 0.95rem;
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#footer-rotating {
    display: block;
    width: min(1100px, 100%);
    margin: 0 auto;
    line-height: 1.35;
    min-height: 2.8em;
}

@media (max-width: 768px) {
    .site-nav {
        padding: 12px 16px;
        /* On small screens use relative positioning instead of fixed to prevent
           the navigation bar from overlapping the hero content. When the
           header scrolls with the page it naturally pushes the hero down,
           eliminating overlay issues on narrow devices. */
        position: relative;
    }

    .nav-links {
        gap: 12px;
        /* Prevent nav items from wrapping onto multiple lines on
           smaller viewports. When links exceed the available width they can
           scroll horizontally instead of increasing the header height and
           obscuring the hero text. */
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .site-nav a,
    .site-nav .brand {
        font-size: 0.9rem;
    }

    #hero-typewriter {
        padding: 18px 16px;
                margin-top: 711px;

    }

    .hero-actions {
        gap: 10px;
    }

    .hero-button {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .info-copy {
        font-size: 1.05rem;
    }

    /* Increase the top padding for the hero on small screens. On very narrow
       devices the navigation can break into multiple rows or simply occupy
       more vertical space, causing it to overlap the beginning of the hero
       typewriter text when the animation finishes. Increasing the top
       padding ensures the hero content remains visible below the fixed nav.
       We also bump this value higher than the previous upgrade to account
       for multi-line navigation on small devices. */
    .hero {
        /* Increase the top padding on smaller screens to prevent the navigation
           bar from overlapping the hero text. The previous value of 260px
           was insufficient after the navigation content was updated. */
        padding-top: 320px;
        /* Provide extra bottom padding on small screens so that the
           hero content, including the counter and actions, has room
           before the next section begins. */
        padding-bottom: 160px;
    }
}

@media (max-width: 480px) {
    /* On extra small devices give even more breathing room above the hero
       content to account for the multi‑row nav and to prevent overlap. */
    .hero {
        /* Further increase padding on very small devices */
        padding-top: 380px;
        padding-bottom: 220px;
    }
}


/* ===== DEMANDS IMAGE LAYOUT ENHANCEMENT ===== */
.demands-layout {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

/* ===== PLAYLIST SECTION STYLES ===== */
.playlist-section {
    padding: 60px 20px;
    background-color: var(--primary);
    text-align: center;
    color: var(--secondary);
}

.playlist-section h2 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2rem;
    font-family: 'Typewriter Bold', sans-serif;
}

.playlist-section p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.4;
}

.playlist-section input[type="file"] {
    padding: 10px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    background-color: #111;
    color: var(--secondary);
    width: 260px;
}

/* Customize the file upload button on WebKit-based browsers */
.playlist-section input[type="file"]::-webkit-file-upload-button {
    padding: 8px 12px;
    border: none;
    background: var(--accent);
    color: #000;
    font-family: 'Typewriter Bold', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
}

/* Container for the playlist items */
#playlist-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

/* Individual playlist item styling */
.playlist-item {
    cursor: pointer;
    padding: 10px 14px;
    width: 100%;
    max-width: 400px;
    background: #111;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--secondary);
    transition: background-color 0.3s ease;
}

.playlist-item:hover {
    background: #222;
}

/* Audio player styling */
#audio-player {
    margin-top: 20px;
    width: 100%;
    max-width: 400px;
}

.demands-image-wrap {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 14px;
    background: #080808;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.demands-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 760px;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(1.05);
    transform: scale(1.02);
}

.demands-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%),
        linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, transparent 45%);
    pointer-events: none;
}

.demands-image-overlay {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 1;
    padding: 12px 14px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    background: rgba(0, 0, 0, 0.76);
    color: var(--accent);
    font-family: 'Typewriter Bold', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(3px);
}

.demands-content {
    text-align: left;
}

.demands-content h2 {
    margin-bottom: 18px;
}

.demands-lead {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.12;
    margin-bottom: 24px;
    color: var(--secondary);
    text-wrap: balance;
}

.demands-copy {
    font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
    margin-top: 30px;
}

.demands-content .cta-container {
    /* When there is only a single CTA, stack it to fill the available width.
       Switch to a column layout and stretch items to prevent empty whitespace. */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    /* Ensure the container expands to occupy the full width of the content
       column so that a single CTA does not leave horizontal whitespace. */
    width: 100%;
}

.demands-content .cta-box {
    /* Allow the CTA to grow to the full width of the content column. Remove
       the fixed 300px width so that the box no longer leaves empty space. */
    /* Use !important to override the base .cta-box width and ensure the
       element stretches across the entire content column without leaving
       whitespace on either side. */
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 980px) {
    .demands-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .demands-image-wrap {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }

    .demands-image-wrap img {
        min-height: 520px;
    }

    .demands-content,
    .demands-content .cta-container {
        text-align: center;
        justify-content: center;
    }

    .demands-content .cta-box {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 768px) {
    .demands-layout {
        gap: 22px;
        margin-top: 538px;
    }

    .demands-image-wrap {
        max-width: 320px;
    }

    .demands-image-wrap img {
        min-height: 420px;
    }

    .demands-image-overlay {
        left: 12px;
        right: 12px;
        bottom: 12px;
        font-size: 0.86rem;
        text-align: center;
    }

    .demands-lead {
        font-size: clamp(1.65rem, 10vw, 2.4rem);
    }
}


/* Mobile fix: force hero image to remain visible on phones */
.hero-image {
    display: block;
    flex: 0 0 auto;
}

.hero-image img {
    display: block;
}

@media (max-width: 768px) {
    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .hero-image {
        display: block !important;
        width: 100%;
        text-align: center;
        order: 1;
    }

    .hero-image img {
        display: block !important;
        width: min(220px, 72vw) !important;
        max-width: 72vw !important;
        height: auto !important;
        margin: 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 3;
    }

    .hero-text {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
}


/* Hero image + text layout */
.hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
    width: 100%;
}

.hero-image {
    display: block !important;
    flex: 0 0 auto;
}

.hero-image img {
    display: block !important;
    width: 320px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 3;
}

.hero-text {
    max-width: 600px;
    flex: 1 1 auto;
}

@media (max-width: 768px) {
    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        flex-wrap: nowrap !important;
    }

    .hero-image {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;
    }

    .hero-image img {
        display: block !important;
        width: min(220px, 72vw) !important;
        max-width: 72vw !important;
        height: auto !important;
        margin: 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 700px !important;
    }

    .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
    }

    #hero-typewriter {
        margin-top: 0 !important;
    }
}